七、Flutter經常使用佈局-Row水平佈局

1、水平佈局Row的使用

Row組件可讓Row裏邊的子元素進行水平排列。Row組件能夠分爲靈活排列和非靈活排列兩種。

• 不靈活佈局：根據Row子元素的大小，進行佈局。若是子元素不足，會留有空隙，若是子元素超出，會警告。
• 靈活佈局：解決不靈活佈局有空隙的問題，可使用 Expanded來進行解決，也就是靈活佈局。在按鈕的外邊加入Expanded就能夠了

不靈活水平佈局

/**
 * 不靈活水平佈局
 */
class RowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        RaisedButton(onPressed: () {}, color: Colors.red, child: Text('紅色按鈕')),
        RaisedButton(
          onPressed: () {},
          color: Colors.orange,
          child: Text('黃色按鈕'),
        ),
        RaisedButton(onPressed: () {}, color: Colors.pink, child: Text('粉色按鈕'))
      ],
    );
  }
}

實現效果：

頁面上已經有了三個按鈕，但這三個按鈕並無充滿一行，而是出現了空隙。這就是不靈活橫向排列形成的。它根據子元素的大小來進行排列。若是想實現充滿一行的效果，就要使用靈活水平佈局了。

靈活水平佈局

/**
 * 靈活水平佈局
 */
class RowExpandedWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
            child: RaisedButton(
                onPressed: () {}, color: Colors.red, child: Text('紅色按鈕'))),
        Expanded(
            child: RaisedButton(
          onPressed: () {},
          color: Colors.orange,
          child: Text('黃色按鈕'),
        )),
        Expanded(
            child: RaisedButton(
                onPressed: () {}, color: Colors.pink, child: Text('粉色按鈕')))
      ],
    );
  }
}

實現效果：

這時候就能夠佈滿一行了。還有一種就是隻想讓部分實現靈活水平佈局，就要使用混合水平佈局了。

混合水平佈局

/**
 * 混合水平佈局
 */
class RowMixWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        RaisedButton(onPressed: () {}, color: Colors.red, child: Text('紅色按鈕')),
        Expanded(
            child: RaisedButton(
          onPressed: () {},
          color: Colors.orange,
          child: Text('黃色按鈕'),
        )),
        RaisedButton(onPressed: () {}, color: Colors.pink, child: Text('粉色按鈕'))
      ],
    );
  }
}

實現效果：

中間的按鈕爲靈活水平佈局，而兩邊的按鈕保持真實大小，爲非靈活水平佈局。