一、介绍

Column 垂直布局组件

二、源码

Column({
    Key key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline textBaseline,
    List<Widget> children = const <Widget>[],
  }) : super(
    children: children,
    key: key,
    direction: Axis.vertical,
    mainAxisAlignment: mainAxisAlignment,
    mainAxisSize: mainAxisSize,
    crossAxisAlignment: crossAxisAlignment,
    textDirection: textDirection,
    verticalDirection: verticalDirection,
    textBaseline: textBaseline,
  );
}

三、属性介绍

属性	说明
mainAxisAlignment	主轴的排序方式 MainAxisAlignment.start主轴顶部(默认Y轴左边) MainAxisAlignment.end主轴底部(默认Y轴右边) MainAxisAlignment.center主轴中间(默认Y轴轴中间) MainAxisAlignment.spaceBetween 间距相同首尾没有间距 MainAxisAlignment.spaceAround子元素平均充满 MainAxisAlignment.spaceEvenly间距相同首尾有间距
crossAxisAlignment	次轴的排序方式 CrossAxisAlignment.start次轴的顶部(默认X轴上部) CrossAxisAlignment.end次轴的底部(默认X轴下部) CrossAxisAlignment.center次轴的中部(默认X轴中间) CrossAxisAlignment.stretch子元素宽充满
mainAxisSize	MainAxisSize.min容器空间需要根据内容的大小而撑开的时候用 MainAxisSize.max则相反默认就是最大可占用的空间
textBaseline	基线对齐方式
textDirection	TextDirection.ltr排列方式从左到右（X轴） TextDirection.ltr排列方式从右到左（X轴）

四、Demo

/**
 * 自定义一个图标按钮组件
 */
class IconContainer extends StatelessWidget {
  Color color;
  IconData icon;
  double size = 32.0;

  IconContainer(this.color, this.icon, {this.size});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 60.0,
      height: 60.0,
      decoration: BoxDecoration(
          color: color, borderRadius: BorderRadius.all(Radius.circular(10))),
      child: Icon(
        icon,
        color: Colors.white,
        size: size,
      ),
    );
  }
}


class ColumnStu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black26,
      width: 500,
      height: 500,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconContainer(Colors.blue, Icons.account_circle),
          IconContainer(Colors.red, Icons.ad_units),
          IconContainer(Colors.yellow, Icons.adb_outlined)
        ],
      ),
    );
  }
}

MainAxisAlignment.start效果图