前言

目前Flutter常見的布局方式主要有4種：1、線性布局 2、流式布局 3、彈性布局 4、層疊布局

今天我們主要介紹彈性布局

線性布局

流式布局

層疊布局

彈性布局

彈性布局允許子組件按照一定比例來分配父視圖空間。
H5中的彈性盒子布局，Android中的FlexboxLayout等。
關(guān)鍵字Flex、Expanded

代碼實現(xiàn)

    return Scaffold(
        appBar: AppBaseBar("彈性布局"),
        body: Flex(
            direction: Axis.horizontal,
              children: [
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 100,
                    color: Colors.red,
                  ),
                ),
                Expanded(
                  flex: 2,
                  child: Container(
                    height: 100,
                    color: Colors.yellow,
                  ),
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 100,
                    color: Colors.blue,
                  ),
                ),
              ],
          ),
    );

彈性布局水平方向上1：2：1分配父視圖

相對來說彈性布局是比較簡單的一種布局