如何在flutter中创建像ui一样的表格答案

【问题标题】：How to create table like ui in flutter如何在flutter中创建像ui一样的表格
【发布时间】：2019-11-07 03:34:09
【问题描述】：

我是 Flutter 的新手，只想知道使用哪个小部件可以创建如下图所示的 ui。

谢谢，

【问题讨论】：

api.flutter.dev/flutter/widgets/Table-class.html

标签： flutter dart

【解决方案1】：

Flutter 对此有一个 Table 类（但您也可以使用简单的 Row + Column 组合来实现）。

这是 Table 文档的链接：Flutter Table

这里有一个简单的例子让你开始：

Container(
        color: Colors.white,
        padding: EdgeInsets.all(20.0),
        child: Table(
          border: TableBorder.all(color: Colors.black),
          children: [
            TableRow(children: [
              Text('Cell 1'),
              Text('Cell 2'),
              Text('Cell 3'),
            ]),
            TableRow(children: [
              Text('Cell 4'),
              Text('Cell 5'),
              Text('Cell 6'),
            ])
          ],
        ),
      )

【讨论】：

【解决方案2】：

使用Table 小部件！
该小部件允许您构建表格。 代码： Table(children : <TableRow>[])

示例：

Table(
  border: TableBorder.all(), // Allows to add a border decoration around your table
  children: [ 
    TableRow(children :[
      Text('Year'),
      Text('Lang'),
      Text('Author'),
    ]),
    TableRow(children :[
      Text('2011',),
      Text('Dart'),
      Text('Lars Bak'),
    ]),
    TableRow(children :[
      Text('1996'),
      Text('Java'),
      Text('James Gosling'),
    ]),
  ]
),

输出：

注意：TableRow 是表格中的一组水平单元格。
添加许多您想要的TableRow

您可以通过观看此official video 或访问flutter.dev 了解有关Table 的更多信息

【讨论】：

【解决方案3】：

您可以使用DataTable 小部件。此示例演示如何显示包含三列的 DataTable：名称、年龄和角色。

【讨论】：