[Day5] Flutter - 垂直布局容器 ( Column )

前言

Hi, 我是鱼板伯爵今天要教大家 Column 这个容器，教学内容只会撷取片段程序码，建议大家搭配完整程序码来练习。

完整程序码

常用属性

Column里面的容器会以水平方式排列，mainAxisAlignment控制纵向对齐，crossAxisAlignment则是以横向对齐，下面范例是置中。

class DemoColumn extends StatelessWidget {
  const DemoColumn({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          width: 50,
          height: 50,
          color: Colors.amber,
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.redAccent,
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.blueAccent,
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.cyanAccent,
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.limeAccent,
        ),
      ],
    );
  }
}