在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一半"),
],
);
}
复制代码超出屏幕的提示消除。如图
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 设置，就变成了
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中始终能自动换行
