摘要：布局控件不會直接呈現內容，可看作承載可視控件的容器。布局控件也是可以模擬顯示的，通常用于調試布局樣式時用到的網格線標尺動畫幀等。但是當頁面內容需要超出屏幕尺寸時，就用和代替。

不知不覺已經到了第7篇，然而很多萌新玩家可能還是不知道如何堆砌控件，像用CSS一樣搭出漂亮的APP界面，我也一樣，紅紅火火恍恍惚惚，直到今天含淚讀完Flutter布局基礎，仿佛打開了一個全新的世界。

在flutter中，一切皆控件！一切皆控件！一切皆控件！牢牢記住這個概念。Text是控件，Image是控件，Icon是控件，布局腳手架也Scaffold也是控件，甚至整個APP也是控件。

用戶自定義控件分為有狀態控件和無狀態控件兩種類型，其特性在前面的筆記4中可以感受感受。

flutter的內置控件分為兩種：

可視控件(visible widget)。即我們直接看到的控件，如text、Icon、Button，名稱理解和html標簽相同。

布局控件(layout widget)。可以理解為架子，如Row、Column、Container。布局控件不會直接呈現內容，可看作承載可視控件的容器。所有的布局控件都有承載子控件的屬性：child或children。child可承載單個子控件，children可承載多個子控件。每個布局控件有默認的布局方式，使其子控件按照自己的樣式安放到位子上。布局控件提供了各種樣式的參數，可實現子控件的對齊(align)、縮放(size)、包裝(pack)和嵌套(Nest)。簡單總結為：布局控件是為了實現可視控件的各種視覺效果而做的包裝，比如前端的html為了實現sticky、雙飛翼、圣杯等布局常常內容區外層添加div包裹層。

布局控件也是可以模擬顯示的，通常用于調試布局樣式時用到的網格線、標尺、動畫幀等。啟用方式：
1.在main.dart中，引入包：

import "package:flutter/rendering.dart" show debugPaintSizeEnabled;

2.在main函數中打開開關：

void main() {
  debugPaintSizeEnabled = true;      //打開視覺調試開關
  runApp(new MyApp());
}

運行代碼后APP效果如下：

flutter的內置控件已經定義了很多屬性，玩家可以參考Widgets Catalog了解每種控件的詳細屬性和用法。本篇通過幾個例子，介紹頁面上的控件如何堆砌和布局。

別著急，由于下面的案例中，可能用到圖片，先交待一下加載圖片的基本配置方法：

到項目根目錄下創建一個文件夾，命名:images，將圖片放置到該文件夾中。

打開根目錄下的pubspec.yaml文件，在其下添加注釋中的屬性：

flutter:
  uses-material-design: true
  assets:                            //如果沒有這個屬性則添加到flutter標簽下
    - images/lake.jpg          //聲明圖片的路徑

到代碼中，以image控件的方式引用圖片：

new Image.asset(
              "images/lake.jpg",        //圖片的路徑
              width: 600.0,              //圖片控件的寬度
              height: 240.0,            //圖片控件的高度
              fit: BoxFit.cover,        //告訴引用圖片的控件，圖像應盡可能小，但覆蓋整個控件。
            ),

行(Row)和列(Column)，是flutter中最常用的兩個布局控件，他們只能容納當前屏幕尺寸大小的內容，如果其內部的子控件超出屏幕尺寸，不但不會自動生成滾動條，還會報錯。

案例1-行排列

如圖上圖所示，圖中有3個100px寬的圖片，通過水平平均間隔的方式居中橫向排列顯示到一行中，代碼示例：

 new Center(                //居中控件
  child: new Row(        //行控件
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,      //對齊方式：平均間隔
    children: [
      new Image.asset("images/pic1.jpg"),        //引入三張圖片
      new Image.asset("images/pic2.jpg"),
      new Image.asset("images/pic3.jpg"),
    ]
  )
)

可以看到上圖用到了2個布局控件Center和Row，通過Center包裹Row，使行控件保持居中，而ROW控件包裹了3個圖片控件Image，通過配置Row的mainAxisAlignment對齊屬性，使三個圖片空間通過平均間隔的方式進行橫向排列。

完整代碼：
Dart code:?main.dart
Images:?images
Pubspec:?pubspec.yaml

案例2-列排列

如上圖所示，還是那3張圖，通過縱向平均間隔的方式顯示到一列中，代碼如下：

new Center(
  child: new Column(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,        //對齊方式：平均間隔
    children: [
      new Image.asset("images/pic1.jpg"),
      new Image.asset("images/pic2.jpg"),
      new Image.asset("images/pic3.jpg"),
    ]
  )
)

完整代碼：
Dart code:?main.dart
Images:?images
Pubspec:?pubspec.yaml

對比案例1和2可以看到，代碼結構相同，Row和Column中都用到了mainAxisAlignment屬性，除此以外還有crossAxisAlignment屬性。值得注意的是，在Row中mainAxisAlignment控制水平方向對齊，crossAxisAlignment控制垂直方向對齊，而在Column中則正好相反。相關參數值請參考MainAxisAlignment和CrossAxisAlignment

案例3-行列嵌套

如上圖，我們將圖中的元素按圖中的框線進行分解：

1.最外層的使用Row控件包裹，使其內部的兩個子控件：淺藍色框的菜品介紹和右邊的菜品大圖橫向排列，代碼如下：

new Scaffold(                                                                              //腳手架控件
      appBar: new AppBar(                                                            //工具欄控件
        title: new Text(widget.title),
      ),
  body: new Center(
  child: new Container(                                                                 //Container控件用于調整外邊距
    margin: new EdgeInsets.fromLTRB(0.0, 40.0, 0.0, 30.0),        
    height: 600.0,
    child: new Card(                                                                       //Card控件控制卡片的視覺效果
      child: new Row(                                                                     //Row控件使其子控件橫向排列
        crossAxisAlignment: CrossAxisAlignment.start,                  //縱向對齊方式：起始邊對齊
        children: [
          new Container(                                                                  //Container控件用于調整寬度
            width: 440.0,   
            child: leftColumn,                                                            //左邊的菜品介紹控件
          ),
          mainImage,                                                                        //右邊的大圖控件
        ],
      ),
    ),
  ),
)
)

2.把淺藍色框內的信息，用Column包裹，使其內容垂直排列：

new Container(
      padding: new EdgeInsets.fromLTRB(20.0, 30.0, 20.0, 20.0),
      child: new Column(                                                                    //Column控件，使其子控件垂直排列
        children: [
          titleText,        //標題行，包含了可視Text控件
          subTitle,        //副標題行，包含了可視Text控件
          ratings,         //投票信息行
          iconList,        //小圖標行
        ],
      ),
    );

3.由于titleText和subTitle都是簡單的包裝了Text控件，不再貼代碼和注釋，重點講下ratings和iconList：

ratings和iconList控件是垂直排列的兩行，而各自內部有自己的布局信息，因此將這兩行分別拆解為：

ratings下包含了兩個水平排列：Row控件用于顯示星級，Text控件用于顯示用戶瀏覽數，而評分星級控件ROW又分解為5個水平排列的Icon控件。

iconList橫向排列了3個縱向顯示的控件，層次一目了然。

對照代碼結構：

//ratings控件
new Container(
      padding: new EdgeInsets.all(20.0),
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          new Row(
            mainAxisSize: MainAxisSize.min,       //mainAxisSize，可壓縮或伸長行內控件的間距
            children: [
              new Icon(Icons.star, color: Colors.black),
              new Icon(Icons.star, color: Colors.black),
              new Icon(Icons.star, color: Colors.black),
              new Icon(Icons.star, color: Colors.black),
              new Icon(Icons.star, color: Colors.black),
            ],
          ),
          new Text(
            "170 Reviews",
            style: new TextStyle(
              color: Colors.black,
              fontWeight: FontWeight.w800,
              fontFamily: "Roboto",
              letterSpacing: 0.5,
              fontSize: 20.0,
            ),
          ),
        ],
      ),
    )

//iconList控件
new Container(
        padding: new EdgeInsets.all(20.0),
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            new Column(
              children: [
                new Icon(Icons.kitchen, color: Colors.green[500]),
                new Text("PREP:"),
                new Text("25 min"),
              ],
            ),
            new Column(
              children: [
                new Icon(Icons.timer, color: Colors.green[500]),
                new Text("COOK:"),
                new Text("1 hr"),
              ],
            ),
            new Column(
              children: [
                new Icon(Icons.restaurant, color: Colors.green[500]),
                new Text("FEEDS:"),
                new Text("4-6"),
              ],
            ),
          ],
        ),
      )

Row和Column可以相互包裹，使頁面能夠實現整齊的布局，只因其特性總是橫向或縱向充滿父控件，比如最外層使用時，會自動充滿全屏幕。但是當頁面內容需要超出屏幕尺寸時，就用ListTile和ListView代替。

完整代碼（由于手機屏幕尺寸無法適應此案例，運行后長和寬都會報溢出錯誤，大家最好使用平板虛擬機測試此案例，或者調整代碼中的字體大小和控件尺寸，以滿足顯示要求）：
Dart code:?main.dart
Images:?images
Pubspec:?pubspec.yaml

案例4-縮放

上圖中，三個橫向排列的圖片控件，中間控件的尺寸比兩邊的大一倍，代碼如下：

new Center(
  child: new Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      new Expanded(
        child: new Image.asset("images/pic1.jpg"),
      ),
      new Expanded(              //使用Expanded控件對Image控件進行包裹
        flex: 2,                 //flex值默認為1，這里改成2之后，其子控件2倍放大
        child: new Image.asset("images/pic2.jpg"),
      ),
     new Expanded(
        child: new Image.asset("images/pic3.jpg"),
      ),
))

完整代碼：
Dart code:?main.dart
Images:?images
Pubspec:?pubspec.yaml

由于處理邏輯和布局樣式都一起書寫到代碼中，加上控件的嵌套，flutter的代碼會如同html的標簽一樣嵌套很多層，對前端開發者可能需要時間適應，但對我這種新萌來說降低了從CSS和處理代碼之間來回對照的麻煩，并且flutter的內置控件默認的樣式已經十分整潔，無需多帶帶再學習類似前端CSS處理頁面布局的語法和結構，總體來說降低了不少學習成本，上手更快更簡單。能在短時間內掌握生產技能，成就感油然而生，自然有繼續學下去的動力。

以上便是最基礎的排列布局介紹，相信看到這里的小伙伴已經明白怎么寫APP了，今天就到這里~感謝大家支持！
flutter 中文社區（官方QQ群：338252156）