Flutter 学习之旅(十) 线性控件Row Colu

Expaned

源码中是这样介绍的:
通过Flex 属性,子布局可以填充row 与 column 的可以用空间

Row 与 Column 构造方法直接上例子,注释都写在例子上了

Container(
        color: Colors.white,
        width: double.infinity,///为了让Container 铺满屏幕
        ///
        /// Column  与 Row 的 交叉轴的宽度默认为所有子布局中最大的一个,
        child: Column(
          /// Column 为垂直的线性性布局   与 cross 相关的则为水平属性设置,
          /// 反之Row为水平线性布局,与 cross 相关的则为垂直属性设置,
          crossAxisAlignment: CrossAxisAlignment.center,
          /// 设置 主轴方向的高度,如果为 max 则填充满父布局,如果为min 则为所有子布局之和,
          /// 我这里使用了Expanded  min失去了意义 ,因为Expanded 会在主轴方向上填满父布局
          mainAxisSize: MainAxisSize.max,
          ///主轴的对齐方式
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(///伸缩控件
              child: ColoredBox(
                color: Colors.purpleAccent,
                child: Center(
                  ///这里为了测试如果不给 Container 设置alignment 与 约束,
                  ///他的大小为 子控件的大小 即 warp_centent
                  child: Container(
                    child: inflateText('Row', Colors.black87, 15),
                    color: Colors.redAccent,
                  ),
                ),
              ),
              flex: 1,/// 权重比例
            ),
            Expanded(
              child: Text(
                'and',
                style: TextStyle(
                  color: Colors.black87,
                  background: Paint()..color = Colors.blueAccent, ///为text 设置背景色
                ),
              ),
              flex: 3,/// 权重比例
            ),
            Expanded(
              ///这里为了测试如果 Container 设置了alignment ,并且父布局提供了布局边界
              ///他的大小为填充满父布局 即 match_parent
              child: Container(
                alignment: Alignment.center,
                child: Text(
                  'Column',
                  style: TextStyle(
                    color: Colors.black87,
                    background: Paint()..color = Colors.blueAccent,
                  ),
                ),
                color: Colors.greenAccent,
              ),
              flex: 1,/// 权重比例
            ),
          ],
        ),
      )

这里放一下效果图

image.png

///主轴的对齐方式还可以设置为

/// 这里的意思是将剩余控件平均分配给所有子布局之间的距离
/// 但是  mainAxisSize: MainAxisSize.max,  必须为max,否则 Row 或者Column
///的主轴高度为包裹子布局,则没有多余的空间分配,而且不能出现Expaned 这个控件,
///否则它将会剩余控件据为己有,属性设置失效
mainAxisAlignment: MainAxisAlignment.spaceBetween,

总体来说Row Columu 的用法与android 中 Linearlayout 相似,

我学习flutter的整个过程都记录在里面了
https://www.jianshu.com/c/36554cb4c804

最后附上demo 地址

https://github.com/tsm19911014/tsm_flutter