作者 | 弗拉德
起源 | 弗拉德（公众号：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
| 枚举值 | 形容 |
|---|---|
| loose | loose示意容许以最小的高度(Row下是宽度)布局 能够疏忽flex的值 |
| tight | 必须以设置的最大的flex值来显示 |
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查看，并且能够下载下来运行并体验。