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

Question

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

谢谢，

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 class可以这样用

---

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的更多信息

Answer 4

您可以使用DataTable小部件。 此示例显示如何显示具有三列的 DataTable：名称、年龄和角色。 在此处输入图片说明

Answer 5

以上所有解决方案都适用于 static 数据。 但是，如果您正在考虑使用动态数据，那么下面的解决方案适合您。

  Table(
        border: TableBorder(
            horizontalInside:
                BorderSide(color: scaffoldBgColor, width: 10.0)),
        children: [
   //This table row is for the table header which is static
          TableRow(children: [

            Center(
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 10),
                child: Text(
                  "INDEX",
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.black87),
                ),
              ),
            ),
            Center(
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 10),
                child: Text(
                  "NAME",
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.black87),
                ),
              ),
            ),
            Center(
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 10),
                child: Text(
                  "ACTION",
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.black87),
                ),
              ),
            ),
          ]),
      // Using the spread operator to add the remaining table rows which have dynamic data
      // Be sure to use .asMap().entries.map if you want to access their indexes and objectName.map() if you have no interest in the items index.

          ...students.asMap().entries.map(
            (student) {
              return TableRow(
                  decoration: BoxDecoration(color: tertiary),
                  children: [

                    Center(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 20),
                        child: Text(
                          student.value.id.toString(),
                        ),
                      ),
                    ),
                    Center(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 20),
                        child: Text(
                          '${student.value.firstName} ${student.value.surName}',
                        ),
                      ),
                    ),
                    Center(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(vertical: 10),
                        child: Checkbox(
                          materialTapTargetSize:
                              MaterialTapTargetSize.shrinkWrap,
                          onChanged: (val) {},
                          value: false,
                        ),
                      ),
                    ),
                  ]);
            },
          )
        ],
      )