我想得到这样的结构:
-----------------------------------------------------------------------------------
item 1 item 2
item 3 item 4
-----------------------------------------------------------------------------------
基本上,我需要有一个Table
与2columns
与2rows
中的每个column
,但是这是我得到的效果:
这是我的代码:
new Container(
decoration: new BoxDecoration(color: Colors.grey),
child: new Row(
children: <Widget>[
new Column(
children: <Widget>[
new Container(
decoration: new BoxDecoration(color: Colors.red),
child: new Text("item 1"),
),
new Container(
decoration: new BoxDecoration(color: Colors.amber),
child: new Text("item 3"),
),
],
),
new Column(
children: <Widget>[
new Container(
decoration: new BoxDecoration(color: Colors.green),
child: new Text("item 2"),
),
new Container(
decoration: new BoxDecoration(color: Colors.teal),
child: new Text("item 4"),
)
],
)
],
),
)
我希望每个人column
都占用一半的width
可用空间。在Android
我会使用weight
属性,仅此而已。
使用flex
(默认为1),您可以将两列分开,然后使用crossAxisAlignment
来将它们的开头对齐:
new Container(
decoration: new BoxDecoration(color: Colors.grey),
child: new Row(
children: <Widget>[
Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
decoration: new BoxDecoration(color: Colors.red),
child: new Text("item 1"),
),
new Container(
decoration: new BoxDecoration(color: Colors.amber),
child: new Text("item 3"),
),
],
),
),
Expanded(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Container(
decoration: new BoxDecoration(color: Colors.green),
child: new Text("item 2"),
),
new Container(
decoration: new BoxDecoration(color: Colors.teal),
child: new Text("item 4"),
)
],
),
)
],
),
)
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句