八、Flutter經常使用佈局-Column垂直佈局

1、垂直佈局Column的使用

Column組件即垂直佈局控件，可以將子組件垂直排列。其實Column組件裏邊的大部分屬性都與Row組件同樣。

/**
 * 垂直佈局
 */
class ColumnWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        RaisedButton(onPressed: () {}, color: Colors.red, child: Text('紅色按鈕')),
        RaisedButton(
          onPressed: () {},
          color: Colors.orange,
          child: Text('黃色大按鈕'),
        ),
        RaisedButton(onPressed: () {}, color: Colors.pink, child: Text('粉色按鈕'))
      ],
    );
  }
}

實現效果以下：

• mainAxisAlignment與crossAxisAlignment屬性，主軸對齊方式與副軸對齊方式

  • main軸：若是用Column組件，那垂直就是主軸，若是用Row組件，那水平就是主軸。

  • cross軸：cross軸稱爲副軸，是和主軸垂直的方向。好比Row組件，那垂直就是副軸，Column組件的副軸就是水平方向的。

  • MainAxisAlignment.center、CrossAxisAlignment.center

  • MainAxisAlignment.start、CrossAxisAlignment.start

  • MainAxisAlignment.end、CrossAxisAlignment.end