颤振表结构答案

【问题标题】：Flutter table structure颤振表结构
【发布时间】：2018-12-09 15:57:12
【问题描述】：

我想得到这个结构：

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

基本上我需要有一个Table 和2 个columns，每个rows 有2 个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 属性，就是这样。

【问题讨论】：

标签： flutter flutter-layout tabular flutter-table

【解决方案1】：

使用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"),
              )
            ],
          ),
        )
      ],
    ),
  )

【讨论】：

非常感谢，这正是我所需要的。非常感谢您的帮助:)
我很高兴听到这个消息
为什么flex: 2 都在Expanded 上？他们互相否定
抱歉@RémiRousselet 会更新我的答案，我没有注意到
如何管理文本行，它应该在左右列中相等。

【解决方案2】：

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

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"),
  ]),
]);

【讨论】：

【解决方案3】：

使用标题和滚动创建表格。

return Container(
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Column(
          children: <Widget>[
            headerRow(), /* Header Row */
            dataRow(), /* Row 1 Data */
            dataRow(), /* Row 2 Data */
            Column(
              children: /* Add row cell data dynamically */,
            ),
          ],
        ),
      ),
    );

headerRow(List<dynamic> titleRowData) {
    return Container(
      height: ScreenUtil().setHeight(100),
      child: Row(
        children: /* Add header cell data dynamically */,
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(10),
          topRight: Radius.circular(10),
        ),
        gradient: LinearGradient(
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
          stops: [0, 1],
          colors: [skyBlueColor, indigoColor],
        ),
      ),
    );
  }

【讨论】：