如何在颤振中创建类似 ui 的表格

Question

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

谢谢，

Answer 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'),
            ])
          ],
        ),
      )

Answer 2

Flutter 有一个DataTable类可以这样使用。

DataTable(
 columns: [
          DataColumn(
            label: Text('ID'),
          ),
          DataColumn(
            label: Text('Name'),
          ),
          DataColumn(
            label: Text('Code'),
          ),
          DataColumn(
            label: Text('Quantity'),
          ),
          DataColumn(
            label: Text('Amount'),
          ),
        ], 
  rows: [
            
         DataRow(cells: [
            DataCell(Text('1')),
            DataCell(Text('Arshik')),
            DataCell(Text('5644645')),
            DataCell(Text('3')),
            DataCell(Text('265\$')),
         ])
    ])

对于高级配置，您可以检查这些包，它们将帮助您扩展一些功能，如分页、选择等。

https://pub.dev/packages/data_tables

https://pub.dev/packages/data_table_2

Answer 3

使用表格小部件 ！ 该小部件允许您构建表格。 代码 ：
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

您可以通过观看官方视频或访问flutter.dev了解有关Table的更多信息