前面已經說過Flutter中的Row和Column了，這裡我們說一下Flex和Expanded

傳送門----- Flutter 佈局控制元件篇-->Row、Column

Flex 被稱為彈性佈局，這個在H5中也存在這個概念，H5中也有Flex佈局。

所謂的彈性佈局，就是允許子元件按照一定的比例來分配父容器的控制元件，他會自適應螢幕的寬度和高度，不是一個固定的數值。

Flex

Flex 元件可以沿著水平或垂直方向排列子元件。

如果知道主軸方向的話，可以使用Row或Column會方便一些，
因為Row和Column都繼承自Flex，引數基本相同，所以能使用Flex的地方基本上都可以使用Row或Column。

Flex最重要的一點，就是可以和Expanded元件配合使用，來實現彈性佈局

原始碼示例

建構函式如下：

注：其中帶@required，意思是必須要使用這個屬性

Flex({
	Key key,
	@required this.direction,
	this.mainAxisAlignment = MainAxisAlignment.start,
	this.mainAxisSize = MainAxisSize.max,
	this.crossAxisAlignment = CrossAxisAlignment.center,
	this.textDirection,
	this.verticalDirection = VerticalDirection.down,
	this.textBaseline,
	List<Widget> children = const <Widget>[],
})
複製程式碼

屬性解釋

其中Flex幾乎所有屬性都和Row與Column一樣，
所以有關屬性怎麼使用，可以參考我的文章：Flutter 佈局控制元件篇-->Row、Column

這裡只說下direction

direction

決定彈性佈局的方向
Row預設為水平方向，Column預設為垂直方向，其本質和Row和Column元件一樣

如下：
direction: Axis.horizontal意思主軸是水平方向
direction: Axis.vertical意思主軸是垂直方向

Expanded

Expanded用法就比較簡單了
他可以按比例伸縮或擴充套件 Row、Column和Flex子元件所佔用的空間大小。

原始碼示例

建構函式如下：

const Expanded({
	Key key,
	int flex = 1,
	@required Widget child,
}) 
複製程式碼

屬性解釋

key

就是一個唯一識別符號

flex

彈性係數
如果為 0 或 null，則 child 是沒有彈性的，即不會被擴伸佔用的空間。
如果大於 0，所有的Expanded按照其flex的比例來分割主軸的全部空閒空間。

程式碼示例：

class FlexLayoutTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        //Flex的兩個子widget按1：2來佔據水平空間  
        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的三個子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,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}
複製程式碼

執行效果：

示例中的Spacer的功能是佔用指定比例的空間，實際上它只是Expanded的一個包裝類

其中Expanded也是可以和Row和Column結合來使用的

---

Y_Y