Flutter實(shí)戰(zhàn) 彈性布局(Flex)

彈性布局允許子組件按照一定比例來分配父容器空間。彈性布局的概念在其它 UI 系統(tǒng)中也都存在，如 H5 中的彈性盒子布局，Android 中的FlexboxLayout等。Flutter 中的彈性布局主要通過Flex和Expanded來配合實(shí)現(xiàn)。

#Flex

Flex組件可以沿著水平或垂直方向排列子組件，如果你知道主軸方向，使用Row或Column會(huì)方便一些，因?yàn)?code>Row和Column都繼承自Flex，參數(shù)基本相同，所以能使用 Flex 的地方基本上都可以使用Row或Column。Flex本身功能是很強(qiáng)大的，它也可以和Expanded組件配合實(shí)現(xiàn)彈性布局。接下來我們只討論Flex和彈性布局相關(guān)的屬性(其它屬性已經(jīng)在介紹Row和Column時(shí)介紹過了)。

Flex({
  ...
  @required this.direction, //彈性布局的方向, Row默認(rèn)為水平方向，Column默認(rèn)為垂直方向
  List<Widget> children = const <Widget>[],
})

Flex繼承自MultiChildRenderObjectWidget，對應(yīng)的RenderObject為RenderFlex，RenderFlex中實(shí)現(xiàn)了其布局算法。

#Expanded

可以按比例“擴(kuò)伸” Row、Column和Flex子組件所占用的空間。

const Expanded({
  int flex = 1, 
  @required Widget child,
})

flex參數(shù)為彈性系數(shù)，如果為0或null，則child是沒有彈性的，即不會(huì)被擴(kuò)伸占用的空間。如果大于0，所有的Expanded按照其flex的比例來分割主軸的全部空閑空間。下面我們看一個(gè)例子：

class FlexLayoutTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        //Flex的兩個(gè)子widget按1：2來占據(jù)水平空間  
        Flex(
          direction: Axis.horizontal,
          children: <Widget>[
            Expanded(
              flex: 1,
              child: Container(
                height: 30.0,
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                height: 30.0,
                color: Colors.green,
              ),
            ),
          ],
        ),
        Padding(
          padding: const EdgeInsets.only(top: 20.0),
          child: SizedBox(
            height: 100.0,
            //Flex的三個(gè)子widget，在垂直方向按2：1：1來占用100像素的空間  
            child: Flex(
              direction: Axis.vertical,
              children: <Widget>[
                Expanded(
                  flex: 2,
                  child: Container(
                    height: 30.0,
                    color: Colors.red,
                  ),
                ),
                Spacer(
                  flex: 1,
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 30.0,
                    color: Colors.green,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

運(yùn)行效果如圖4-5所示：

示例中的Spacer的功能是占用指定比例的空間，實(shí)際上它只是Expanded的一個(gè)包裝類，Spacer的源碼如下：

class Spacer extends StatelessWidget {
  const Spacer({Key key, this.flex = 1})
    : assert(flex != null),
      assert(flex > 0),
      super(key: key);
  
  final int flex;
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: flex,
      child: const SizedBox.shrink(),
    );
  }
}

#小結(jié)

彈性布局比較簡單，唯一需要注意的就是Row、Column以及Flex的關(guān)系。