Flutter--Column组件

一、介绍

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 children = const [],
  }) : 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效果图

57299dc47f32506869f78673f697956.png

MainAxisAlignment.end效果图

4f5b3cb3e14723e1b80c6f11192c08b.png

MainAxisAlignment.center效果图

c5014cea3ba23da9fb97a9d0115c8f9.png

MainAxisAlignment.spaceEvenly效果图

9ec5414768c782a82ae7ae69613b9c0.png

MainAxisAlignment.spaceAround

f519c6809ed02dfb98a01c8e51f6b13.png

MainAxisAlignment.spaceBetween

71e4aa9e759cb6a93eeb41faf2046b8.png

CrossAxisAlignment.start效果图

a4e1ebe73823b6e841e2b2a1e2df27f.png

CrossAxisAlignment.end效果图

c0e8e49bce639a23b969c35eb607588.png

CrossAxisAlignment.center效果图

be148c4fa1db7e248953803976946ea.png

CrossAxisAlignment.stretch效果图

efc591aa9c6a73a85c50841c38b92fc.png