Flutter Widget 之DataTable

你有一些重要数据要显示给用户吗？

使用DataTable

该widget可让您构建一个表格，该表格根据单元格中的内容，自动调整其列的大小。

首先，添加DataTable() widget，并定义其列。接下来，定义每一行以及每一行中的单元格。这样，您有一个DataTable了。

DataTable(
    columns: [
        DataColumn(label: Text('Name')),
        DataColumn(label: Text('Year')),
    ],
    rows: [
        DataRow(cells: [
            DataCell(Text('Dash')),
            DataCell(Text('2018')),
        ]),
        DataRow(cells: [
            DataCell(Text('Gopher')),
            DataCell(Text('2009')),
        ]),
    ],
);

还有很多，您可以显示表格的排列方式。

DataTable(
    sortColumnIndex: 0,
    sortAscending: true,
    columns: [
        ...
    ],
    rows: [
        ...
    ],
)

您可以使列以数字排序,强制在左到右环境中进行右对齐

DataTable(
    columns: [
        DataColumn(label: Text('Name')),
        DataColumn(
            label: Text('Year'),
            numeric: true,
        ),
    ],
    rows: [
        ...
    ],
)

您可以显示其中一行已被选择

DataTable(
    columns: [
        ...
    ],
    rows: [
        DataRow(
            selected: true,
            cells: [
               ...
            ],
        ),
        ...
    ],
)

您可以显示一个单元格式可编辑的

DataTable(
    column: [
        ...
    ],
    rows: [
        DataRow(
            cells: [
                DataCell(
                    Text('Dash'),
                    showEditIcon: true,
                ),
                DataCell(Text('2018')),
            ],
        ),
        ...
    ],
)

尚未填写

DataTable(
    column: [
        ...
    ],
    rows: [
        DataRow(
            cells: [
                DataCell(
                    Text('Fill in name'),
                    placeholder: true,
                ),
                DataCell(Text('2018')),
            ],
        ),
        ...
    ],
)

DataTable的所有元素都提供友好的回掉，因此您可以实行用户应如何编辑，选择后排序数据的方式

另外，请不要忘记一切都是widget。因此，随时将任何widget放入数据单元中。

最后提示：如果您的所有数据可能不能都挤在水平空间中，例如在小型电话上，请使用SingleChildScrollView包装该widget。

如果想了解有关DataTable的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址