前言

目前Flutter常見的布局方式主要有4種：1、線性布局 2、流式布局 3、彈性布局 4、層疊布局

今天我們主要介紹線性布局

流式布局

彈性布局

層疊布局

線性布局

所謂線性布局，即指沿水平或垂直方向排布子組件。
** Flutter中通過Row和Column來實現(xiàn)線性布局，類似于Android中的LinearLayout。**
關(guān)鍵字Row、Column

1 水平方向（關(guān)鍵字Row）

class testState extends State<test> with BaseBar {
  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, width: defaultWidth, height: defaultHeight);
    return Scaffold(
        appBar: AppBaseBar("線性布局水平方向"),
        body: Row(
          children: [
            Container(
              margin: EdgeInsets.only(left: 30,top: 30),
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text("1",style:TextStyle(
                color: Colors.white,
                fontSize: 60,
              )),
            ),
            Container(
              margin: EdgeInsets.only(left: 30,top: 30),
              width: 100,
              height: 100,
              color: Colors.yellow,
              child: Text("3",style:TextStyle(
                color: Colors.white,
                fontSize: 60,
              )),
            ),
            Container(
              margin: EdgeInsets.only(left: 30,top: 30),
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Text("3",style:TextStyle(
                color: Colors.white,
                fontSize: 60,
              )),
            ),
          ],
        )
    );
  }

線性布局水平方向示例圖

2 垂直方向（關(guān)鍵字Column）

class testState extends State<test> with BaseBar {
  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, width: defaultWidth, height: defaultHeight);
    return Scaffold(
        appBar: AppBaseBar("線性布局水平方向"),
        body: Column(
          children: [
            Container(
              margin: EdgeInsets.only(left: 30,top: 30),
              width: 100,
              height: 100,
              color: Colors.red,
              child: Text("1",style:TextStyle(
                color: Colors.white,
                fontSize: 60,
              )),
            ),
            Container(
              margin: EdgeInsets.only(left: 30,top: 30),
              width: 100,
              height: 100,
              color: Colors.yellow,
              child: Text("3",style:TextStyle(
                color: Colors.white,
                fontSize: 60,
              )),
            ),
            Container(
              margin: EdgeInsets.only(left: 30,top: 30),
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Text("3",style:TextStyle(
                color: Colors.white,
                fontSize: 60,
              )),
            ),
          ],
        )
    );
  }
}

線性布局垂直方向

3 線性布局的注意事項

當(dāng)我們布局超過一行的時候，這時候系統(tǒng)是不會幫我們換行的，也就是說會造成一個問題。UI溢出。

UI溢出

水平排列，使用Row對視圖進(jìn)行水平排列
垂直排列，使用Column對視圖進(jìn)行垂直排列
Flutter中子視圖超過父視圖會報視圖溢出

為了解決這個問題，我們就需要了解到Flutter第二個布局，流式布局