flutter 表结构

Question

我想得到这个结构:

-----------------------------------------------------------------------------------
item 1                                 item 2
item 3                                 item 4
-----------------------------------------------------------------------------------

基本上我需要有一个表，每个列有2个列和2个行，但这是我得到的效果:

这是我的代码:

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 属性，仅此而已。

Answer 1

我建议使用表格小部件来保持一致性和方便性，因为嵌套的行和列可能会变得有点凌乱且缩进太多。

https://docs.flutter.io/flutter/widgets/Table-class.html

   ...
Table(children: [
  TableRow(children: [
    Text("item 1"),
    Text("item 2"),
  ]),
  TableRow(children:[
    Text("item 3"),
    Text("item 4"),
  ]),
]);