在flutter 中对 Expanded 使用 来平分布局占用比例（相当于Android里面的LinearLayout 控件中设置权重），但是在使用中遇到一些坑，然后就开始了踩坑之旅...........

Column

一种 Column 包含 Expanded 正常显示

Widget _columnExpanded(){return new Column(children: <Widget>[new Expanded(child: new Text("有Expanded一半")),new Text("无Expanded一半"),],);}
复制代码

二种 Column 包含 Expanded ，但是 Text 内容增加，如果不加 maxLines: 3, 它会自动换行。如果不设置crossAxisAlignment属性值 那么 new Text("无Expanded一半"), 这个控件会居中 ，因为 Column 中的crossAxisAlignment 默认值是全部居中

 Widget _columnMoreExpanded(){return new Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[new Expanded(child: new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,""有Expanded一半,有Expanded一半有Expanded一半,有Expanded一半,有Expanded一半",maxLines: 3,)),new Text("无Expanded一半"),],);}
复制代码

三种 Column 包含 Expanded ，但在Expanded中使用Column来加载多控件， 显示正常

/** Expanded 嵌套Column控件  然后Column 控件里面放两个 Text 会出现* */
Widget _columnExpandedMoreWidget(){return new Column(children: <Widget>[new Expanded(child: new Column(children: <Widget>[new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",maxLines: 2,overflow: TextOverflow.ellipsis,),new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",maxLines: 1,overflow: TextOverflow.ellipsis,)],)),new Text("无Expanded一半"),],);
}
复制代码

四种 Column 包含 Expanded，只对 Expanded 里面的Row 加入一个 Expanded 这时屏幕上就会出现，如下图情况：（超出屏幕）

Widget _columnExpandedMoreRowWidget(){return new Column(children: <Widget>[new Expanded(child: new Row(children: <Widget>[new Expanded(child: new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",maxLines: 2,overflow: TextOverflow.ellipsis,)),new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",maxLines: 1,overflow: TextOverflow.ellipsis,)],)),new Text("无Expanded一半"),],);
}
复制代码

看到超出屏幕，于是将 Row 中的两个 Text 控件都加上 Expanded ，代码如下：

Widget _columnExpandedMoreRowWidget1(){return new Column(children: <Widget>[new Expanded(child: new Row(children: <Widget>[new Expanded(child: new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",maxLines: 2,overflow: TextOverflow.ellipsis,)),new Expanded(child: new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",maxLines: 1,overflow: TextOverflow.ellipsis,)),],)),new Text("无Expanded一半"),],);
}
复制代码

超出屏幕的提示消除。如图

于是将 Expanded 中 Row 子控件 其中的一个 Text 内容减少，代码如下： 如图：

Widget _columnExpandedMoreRowWidget1(){return new Column(children: <Widget>[new Expanded(child: new Row(children: <Widget>[new Expanded(child: new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",maxLines: 2,overflow: TextOverflow.ellipsis,)),new Expanded(child: new Text("有Expanded一半",maxLines: 1,overflow: TextOverflow.ellipsis,)),],)),new Text("无Expanded一半"),],);
}
复制代码

平分的确算是平分了，但是没有达到效果，又修改： 代码如下：

Widget _columnExpandedMoreRowWidget1(){return new Column(children: <Widget>[new Expanded(child: new Row(children: <Widget>[new Expanded(child: new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",maxLines: 2,overflow: TextOverflow.ellipsis,)),new Text("有Expanded一半有Expanded一半有Expanded一半",maxLines: 2,overflow: TextOverflow.ellipsis,),],)),new Text("无Expanded一半"),],);
}
复制代码

在 Row 中去掉一个 Expanded 设置，就变成了

但是，问题又来了，去掉一个 Expanded 设置后 Text 不能自动换行。目前没有找到解决办法。。。。除非使用前面那个办法 加两个Expanded 但是这样就是平分天下了

Row

在Row中 Column 的第四种 说明了 Row 一行的排列出现的问题，还是 Text 不换行

Widget _rowExpandedMoreWidget(){return new Row(children: <Widget>[new Expanded(child: new Row(children: <Widget>[new Expanded(child: new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",maxLines: 2,overflow: TextOverflow.clip,),),new Expanded(child: new Text("有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,有Expanded一半,",maxLines: 2,overflow: TextOverflow.clip,),),],)),new Text("无Expanded一半"),],);
}
复制代码

通过以上列子 说明 Row 中 要横向的两个控件 要么平分 ，要么 Row 中的另外一个控件宽度不能太长，不然超出边界不能显示，在Column中始终能自动换行