作者 | 弗拉德
來源 | 弗拉德（公眾號：fulade_me)

Flexible

Flexible可以幫助Row、Column边酒、Flex的子控件充滿父控件钧汹，它的用法很靈活扇苞，也具有權重的屬性据某。跟Flexible相類似的控件還有Expanded橡娄。
先來看Flexible的構造函數(shù)

const Flexible({
    /// key
    Key key,
    // 默認 flex 的值為 1
    this.flex = 1,
    /// 默認 fit參數(shù)為 FlexFit.loose 表示子控件可以以最小的大小來布局
    this.fit = FlexFit.loose,
    @required Widget child,
}) 

按比例布局

Flexible的參數(shù)flex是表示比例的值。
假如我們在Column內(nèi)部有三個子控件哗脖，每個控件的flex值都設置為1
那么這三個子控件的高度都是Column高度(Row的情況下就是寬度)的三分之一瀑踢，也就是三個子控件均分了Column的高度(Row的情況下就是寬度)

Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 1,
        ),
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 1,
        ),
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 1,
        ),
    ],
)

如下圖：

2020_01_14_flexible_1_1_1

然后我們把flex的值分別設置為1扳还、2才避、3，那么這個三個控件的高度分別是五分之一氨距、五分之二桑逝、五分之三的高度

Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 1,
        ),
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 2,
        ),
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 3,
        ),
    ],
)

效果如下圖：

2020_01_14_flexible_1_2_3

FlexFit.loose 和 FlexFit.tight

Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 1,
        ),
        Flexible(
            child: Image.asset(
            "images/image_demo.jpg",
            height: 80,
            ),
            fit: FlexFit.loose,
            flex: 2,
        ),
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 2,
        ),
    ],
)

我們給第二個控件設置的flex值為2，給Image設置的高度為80俏让，給fit的值設置為FlexFit.loose楞遏，這個時候優(yōu)先起到作用的是FlexFit.loose茬暇，flex的值會被忽略，所以這里的Image會以高度為80的大小來顯示寡喝。
效果如下圖：

2020_01_14_flexible_loose

Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 1,
        ),
        Flexible(
            child: Image.asset(
            "images/image_demo.jpg",
            height: 80,
            ),
            fit: FlexFit.tight,
            flex: 2,
        ),
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 2,
        ),
    ],
)

我們把FlexFit.loose改為FlexFit.tight糙俗，此時就會忽略當前設置的高度80，直接使用比例來顯示预鬓。
效果如下圖：

2020_01_14_flexible_tight

優(yōu)先布局

如果我們將flex的值設置為0巧骚，此時Flexible并不是被分配0的高度，而是flex值為0的Flexible會優(yōu)先布局且會盡量大的占用Column的高度

Column(
    children: [
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 1,
        ),
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 2,
        ),
        Flexible(
            child: Image.asset("images/image_demo.jpg"),
            flex: 0,
        ),
    ],
)

2020_01_14_flexible_flex_00

填充剩余的空間

很多情況下在Column內(nèi)不止是有Flexible控件，還有像Container這種控件顶猜。在二者都存在的情況下沧奴，Container會優(yōu)先布局并占用自己需要的高度，剩余的高度由Flexible控件來填充滿长窄。如果有多個Flexible控件滔吠，它們會按自己設置的flex值來均分剩余的高度。

Column(
    children: [
        Container(
            child: Image.asset("images/image_demo.jpg"),
            width: 100,
            height: 100,
        ),
        Container(
            child: Image.asset("images/image_demo.jpg"),
            width: 100,
            height: 100,
        ),
        Flexible(
            child: Container(
                decoration: BoxDecoration(color: Colors.green),
                width: 300,
            ),
        ),
    ],
)

效果如下：

2020_01_14_flexible_flex_space_full

想體驗以上示例的運行效果挠日，可以到我的Github倉庫項目flutter_app->lib->routes->flexible_page.dart查看屠凶，并且可以下載下來運行并體驗。