关于ios:Flutter-29Flutter手把手教程UI布局和Widget弹性布局控件Flexible

作者 | 弗拉德
起源 | 弗拉德（公众号：fulade_me)

Flexible

Flexible 能够帮忙 Row、Column、Flex 的子控件充斥父控件，它的用法很灵便，也具备权重的属性。跟 Flexible 相相似的控件还有 Expanded。
先来看 Flexible 的构造函数

const Flexible({
    /// key
    Key key,
    // 默认 flex 的值为 1
    this.flex = 1,
    /// 默认 fit 参数为 FlexFit.loose 示意子控件能够以最小的大小来布局
    this.fit = FlexFit.loose,
    @required Widget child,
}) 

按比例布局

Flexible的参数 flex 是示意比例的值。
如果咱们在 Column 外部有三个子控件，每个控件的 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,
        ),
    ],
)

如下图：

而后咱们把 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,
        ),
    ],
)

成果如下图：

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，这个时候优先起到作用的是FlexFit.loose，flex 的值会被疏忽，所以这里的 Image 会以高度为 80 的大小来显示。
成果如下图：

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，间接应用比例来显示。
成果如下图：

优先布局

如果咱们将 flex 的值设置为 0，此时 Flexible 并不是被调配 0 的高度，而是 flex 值为 0 的 Flexible 会优先布局且会尽量大的占用 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,
        ),
    ],
)

能够看到第三个 Flexible 是高度最大的，因为它优先占用最高的高度。

填充残余的空间

很多状况下在 Column 内不止是有 Flexible 控件，还有像 Container 这种控件。在二者都存在的状况下，Container会优先布局并占用本人须要的高度，残余的高度由 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,
            ),
        ),
    ],
)

成果如下：

想体验以上示例的运行成果，能够到我的 Github 仓库我的项目 flutter_app->lib->routes->flexible_page.dart 查看，并且能够下载下来运行并体验。