如何在Flutter中创建类似ui的表

Question

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

谢谢

Answer 1

Flutter为此提供了一个 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'),
            ])
          ],
        ),
      )

Answer 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

您可以通过观看此 Table 或访问 official video

来了解有关 flutter.dev 的更多信息