彈性布局

彈性布局是一種允許子widget按照一定比例來分配父容器空間的布局方式，如果你知道了它的主軸方向，那就可以用Row或Column了，一般情況下，可以用Flex的地方都可以用Row或者Column一起使用，通常配合Expanded Widget來使用，同樣Expanded也不能脫離Flex單獨創(chuàng)建。

Expanded

Expanded繼承自Flexible，F(xiàn)lexible是一個控制Row、Column、Flex等子組件如何布局的組件，它可以按比例“擴伸”Row、Column和Flex子widget所占用的空間。

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

flex為彈性系數(shù)，如果為0或null，則child是沒有彈性的，即不會被擴伸占用的空間。如果大于0，所有的Expanded按照其flex的比例來分割主軸的全部空閑空間。

示例代碼

 Row(children: <Widget>[
        RaisedButton(
          onPressed: () {
            print('點擊紅色按鈕事件');
          },
          color: Colors.red,
          child: Text('紅色按鈕'),
        ),
        Expanded(
          flex: 1,
          child: RaisedButton(
            onPressed: () {
              print('點擊黃色按鈕事件');
            },
            color: Colors.yellow,
            child: Text('黃色按鈕'),
          ),
        ),
        RaisedButton(
          onPressed: () {
            print('點擊粉色按鈕事件');
          },
          color: Colors.green,
          child: Text('綠色按鈕'),
        ),
      ])

代碼運行效果

Flexible和 Expanded的區(qū)別

• Flexible組件必須是Row、Column、Flex等組件的后裔，并且從Flexible到它封裝的Row、Column、Flex的路徑必須只包括StatelessWidgets或StatefulWidgets組件(不能是其他類型的組件，像RenderObjectWidgets)
• Row、Column、Flex會被Expanded撐開，充滿主軸可用空間，而Flexible不強制子組件填充可用空間，這是因為fit屬性的值不同，該屬性在Expanded中為FlexFit.tight，F(xiàn)lexible為FlexFit.loose，區(qū)別在于tight表示強制使子控件填充剩余可用空間，loose表示最多填滿其在父控件所設(shè)置的比例，所以loose默認即為控件的大小