Flutter之Column组件

/**
 * 列布局
 *
 * Column({
    Key key,
    //mainAxisAlignment主轴上的对齐方式
    //center:将children放置在主轴的中心;
    //end:将children放置在主轴的末尾;
    //spaceAround:将主轴方向上的空白区域均分,使得children之间的空白区域相等,首尾空白区域为children之间的1/2;
    //spaceBetween:将主轴方向上的空白区域均分,使得children之间的空白区域相等,首尾没有空白区域;
    //spaceEvenly:将主轴方向上的空白区域均分,使得children之间和收尾的空白区域相等;
    //start:将children放置在主轴的起点;
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,

    //控住一行的高度,max:最大化主轴方向的可用空间;min:与max相反,是最小化主轴方向的可用空间;
    MainAxisSize mainAxisSize = MainAxisSize.max,

    //交叉轴上的对齐方式,baseline:children在交叉轴方向,根据baseline对齐,stretch:让children填满交叉轴方向,start,center,end.
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,

    TextDirection textDirection,//阿拉伯语系的兼容设置,一般无需处理

    //定义了children摆放顺序,down:从top到bottom进行布局,up:从bottom到top进行布局
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List children = const [],
    })
 *
 */

body: Container(
          color: Color(0xfff1f1f1),
          height: 100.0,
          width: 300.0,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            verticalDirection: VerticalDirection.up,
            children: [
              Container(
                color: Colors.red,
                child: Text("Column组件1",),
              ),
              Container(
                color: Colors.red,
                child: Text("Column组件2",),
              ),
              Container(
                color: Colors.red,
                child: Text("Column组件3",),
              ),
            ],
          ),
        ),

码云地址:https://gitee.com/xgljh/Flutter.git

你可能感兴趣的:(Flutter之Column组件)