【接上篇：第一章●第五節(jié)：組件介紹<02>】

包裝小組件

默認情況下，行或列沿其主軸占用盡可能多的空間，但如果要將子項緊密組合在一起，我們需要將mainAxisSize屬性設置為MainAxisSize.min。

Row(
  children: <Widget>[
    Row(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Icon(Icons.star, color: Colors.redAccent,),
        Icon(Icons.star, color: Colors.redAccent),
        Icon(Icons.star, color: Colors.redAccent),
        Icon(Icons.star),
        Icon(Icons.star),
      ],
    ),
  ],
),

嵌套行和列

布局框架允許我們根據(jù)需要進行行列嵌套。

Container(
  padding: EdgeInsets.all(20),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: <Widget>[
      Row(
        children: <Widget>[
          Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Icon(Icons.star, color: Colors.redAccent,),
              Icon(Icons.star, color: Colors.redAccent),
              Icon(Icons.star, color: Colors.redAccent),
              Icon(Icons.star),
              Icon(Icons.star),
            ],
          ),
        ],
      ),
      Text(
        "評分",
        style: TextStyle(
          color: Colors.black,
          fontWeight: FontWeight.w800,
          fontFamily: 'Roboto',
          letterSpacing: 0.5,
          fontSize: 20
        ),
      )
    ],
  ),
),
Row(
  children: <Widget>[
    Column(
      children: <Widget>[
        Icon(Icons.home),
        Row(
          children: <Widget>[
            Text("首頁"),
          ],
        ),
        Row(
          children: <Widget>[
            Text("Home")
          ],
        )
      ],
    ),
    Column(
      children: <Widget>[
        Icon(Icons.account_circle),
        Row(
          children: <Widget>[
            Text("我的"),
          ],
        ),
        Row(
          children: <Widget>[
            Text("Mine")
          ],
        )
      ],
    ),
    Column(
      children: <Widget>[
        Icon(Icons.message),
        Row(
          children: <Widget>[
            Text("消息"),
          ],
        ),
        Row(
          children: <Widget>[
            Text("Message")
          ],
        )
      ],
    ),
  ],
)

從上面示例我們可以看出，五顆星和評分在一行，圖標和文本在一行，并分為三列。結(jié)構(gòu)樹圖如下：

提示：為了使代碼更容易閱讀，我們在書寫時可以將嵌套的各個部分定義成變量或函數(shù)，在具體的使用時直接引用變量或函數(shù)即可。同時我們還可以對重復出現(xiàn)的代碼進行封裝，將其封裝成一個公用的變量或函數(shù)。

常見的布局組件

Flutter擁有豐富的布局組件，以下為常用的組件，其他組件，請閱讀API參考文檔。
以下組件分為兩類：一來自組件庫的標準組件，二來自Material庫的專用組件。任何應用都可以使用標準組件，但只有Material應用可以使用Material庫中的組件。

標準組件

• Container（容器）：向組件添加填充，邊距，邊框，背景顏色或其他裝飾。
• GridView（網(wǎng)格）：將組件作為可滾動網(wǎng)格展示。
• ListView（列表）：將組件作為可滾動列表展示。
• Stack（堆疊）：一個組件上方重疊另一個組件。

Material 組件

• Card（卡片）：將相關信息整理到帶圓角和陰影的盒子中。
• ListTile（列表標題）：將最多三行文本、可選的前導和后面的圖標放置在一行中。

總目錄結(jié)構(gòu)