Flutter如何实现table表格

在Flutter中如何实现一个可滚动的表格？我想展示的数据比较多，需要支持横向和纵向滚动，最好还能固定表头。官方提供的Table组件似乎不支持滚动，用ListView嵌套又比较麻烦。有没有更优雅的实现方式或推荐的第三方库？

2 回复

Flutter中可使用Table组件实现表格。通过TableRow定义行，TableCell定义单元格。可设置边框、列宽等属性。示例：

Table(
  border: TableBorder.all(),
  children: [
    TableRow(children: [
      Text('A1'),
      Text('B1'),
    ]),
  ],
)

更多关于Flutter如何实现table表格的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter 中可以通过多种方式实现表格，以下是常用的方法：

1. Table Widget（推荐）

使用 Flutter 内置的 Table 组件，适合固定列数的表格：

Table(
  border: TableBorder.all(), // 添加边框
  children: [
    TableRow(
      children: [
        Padding(
          padding: EdgeInsets.all(8.0),
          child: Text('姓名', style: TextStyle(fontWeight: FontWeight.bold)),
        ),
        Padding(
          padding: EdgeInsets.all(8.0),
          child: Text('年龄', style: TextStyle(fontWeight: FontWeight.bold)),
        ),
        Padding(
          padding: EdgeInsets.all(8.0),
          child: Text('城市', style: TextStyle(fontWeight: FontWeight.bold)),
        ),
      ],
    ),
    TableRow(
      children: [
        Padding(padding: EdgeInsets.all(8.0), child: Text('张三')),
        Padding(padding: EdgeInsets.all(8.0), child: Text('25')),
        Padding(padding: EdgeInsets.all(8.0), child: Text('北京')),
      ],
    ),
    TableRow(
      children: [
        Padding(padding: EdgeInsets.all(8.0), child: Text('李四')),
        Padding(padding: EdgeInsets.all(8.0), child: Text('30')),
        Padding(padding: EdgeInsets.all(8.0), child: Text('上海')),
      ],
    ),
  ],
)

2. DataTable Widget

适合需要交互功能的表格（排序、选择等）：

DataTable(
  columns: [
    DataColumn(label: Text('姓名')),
    DataColumn(label: Text('年龄')),
    DataColumn(label: Text('城市')),
  ],
  rows: [
    DataRow(cells: [
      DataCell(Text('张三')),
      DataCell(Text('25')),
      DataCell(Text('北京')),
    ]),
    DataRow(cells: [
      DataCell(Text('李四')),
      DataCell(Text('30')),
      DataCell(Text('上海')),
    ]),
  ],
)

3. 使用 ListView + Row（自定义程度高）

适合需要高度自定义的表格：

Column(
  children: [
    // 表头
    Container(
      padding: EdgeInsets.all(8),
      decoration: BoxDecoration(border: Border.all()),
      child: Row(
        children: [
          Expanded(child: Text('姓名', textAlign: TextAlign.center)),
          Expanded(child: Text('年龄', textAlign: TextAlign.center)),
          Expanded(child: Text('城市', textAlign: TextAlign.center)),
        ],
      ),
    ),
    // 表格内容
    Expanded(
      child: ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, index) {
          return Container(
            padding: EdgeInsets.all(8),
            decoration: BoxDecoration(border: Border.all()),
            child: Row(
              children: [
                Expanded(child: Text(data[index].name)),
                Expanded(child: Text(data[index].age.toString())),
                Expanded(child: Text(data[index].city)),
              ],
            ),
          );
        },
      ),
    ),
  ],
)

选择建议：

  • Table：简单固定表格
  • DataTable：需要交互功能
  • ListView + Row：高度自定义需求

Table 组件最简单实用，DataTable 功能更丰富，自定义方案最灵活。

回到顶部