線性佈局

不管是水平佈局或是垂直佈局都是佈局上常用的配置方式。

佈局組件

• Row
• Column
• Wrap

Layout

Flutter 目標是提供跨平台的開發體驗，因此需要提供彈性的方式來處理呈現平台上佈局的行為。在官網上提供了許多的組件，依照特性可以分為這三個種類：

• Single-child layout

這個佈局類別的組件通常具有一個 child 的屬性，例如Container、SizeBox…。

• Multi-child layout

這個佈局類別的組件通常具有一個 children 的屬性，例如Row、Column…。

• Sliver

這個佈局類別的組件只能是 Sliver 類別，例如SliverList、SliverGrid、SliverAppBar…。

Row、Column

線性佈局是很常見的排列方式，Row 是以水平的方向進行排列，Column是以垂直的方向進行排列。

Row 和 Column 的使用方式相類似，只差在排列的方向不一樣，都是屬於 Multi-child layout 類別的一員，在排列行為又可切分成主軸設定與縱軸設定兩種，我們直接看下面的範例看看差異性在哪邊：

 var theRow = Container(
      margin: const EdgeInsets.all(5.0),
      padding: const EdgeInsets.all(3.0),
      decoration: BoxDecoration(border: Border.all(color: Colors.blueAccent)),
      // 可以更換 Colume 為 Row，理解主軸和縱軸設定差別
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text("ABC"),
          Text(
            "DEF",
            style: TextStyle(
              fontSize: 40.0,
            ),
          ),
          Text("GHI")
        ],
      ),
    );

    var theColumn = Container(
      margin: const EdgeInsets.all(5.0),
      padding: const EdgeInsets.all(3.0),
      decoration: BoxDecoration(border: Border.all(color: Colors.blueAccent)),
      // 可以更換 Colume 為 Row，理解主軸和縱軸設定差別
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Text("ABC"),
          Text(
            "DEF",
            style: TextStyle(
              fontSize: 40.0,
            ),
          ),
          Text("GHI")
        ],
      ),
    );

Wrap

在 Row 或是 Column 使用上，若 children 的元素內容大小超過可顯示的範圍時，會出現類似下面這種提示畫面。

我們可以使用Wrap來提供 children 裡的元素在無法預期內容大小時提供一個彈性排列的方法。在渲染過程會按順列放到畫面上並計算是否會有溢出的狀況，若超過則會將該元件放到下一行。spacing用來定義兩個元素的距離，runSpacing用來定義上下兩排的距離，alignment 則是可以定義每一列的配置方式。

    var theWrap = Wrap(
      spacing: 30.0,
      runSpacing: 15.0,
      alignment: WrapAlignment.center,
      children: <Widget>[
        Text("ABCDEFGHIJKLKNPQRSTUVWXYZ" * 1),
        Text("0123456789"),
        Text("零一二三四五六七八九" * 5), // 溢出
        Text("0123456789"),
      ],
    );

小結

練習成果