Flutter中Data Table Class的替代方案：实现类似Swift TableView的列表

在Flutter中，对应Swift TableView的标准组件是ListView（尤其是ListView.builder，适配动态/大量数据场景），比DataTable更贴合单列滚动列表的需求，且无需重写整个main.dart文件，仅需修改MyHomePage的body部分即可。

步骤1：添加数据源（在_MyHomePageState中） #

先定义模拟的列表数据，可替换为实际业务数据：

class _MyHomePageState extends State<MyHomePage> {
  // 模拟列表行数据
  final List<String> _listItems = [
    "列表项1",
    "列表项2",
    "列表项3",
    "列表项4",
    "列表项5",
  ];

  // 原有代码保持不变...
}

步骤2：替换body部分的布局 #

将原来的Center+Column替换为ListView.builder，实现可滚动的列表行：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Center(
        child: Text(
          'Test (Beta v1)',
        ),
      ),
    ),
    body: ListView.builder(
      // 列表项总数
      itemCount: _listItems.length,
      // 构建每个列表行
      itemBuilder: (context, index) {
        // 自定义列表行样式，对应TableViewCell
        return GestureDetector(
          // 行点击事件，对应TableView的didSelectRowAt
          onTap: () {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('点击了${_listItems[index]}')),
            );
          },
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            decoration: const BoxDecoration(
              // 添加底部分隔线，模拟TableView默认分隔线
              border: Border(bottom: BorderSide(color: Colors.grey.shade200)),
            ),
            child: Text(
              _listItems[index],
              style: const TextStyle(fontSize: 16),
            ),
          ),
        );
      },
    ),
    // 原有浮动按钮代码保持不变
    floatingActionButton: FloatingActionButton(
      backgroundColor: Colors.brown,
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => const NewScreen()),
        );
      },
      tooltip: 'Increment',
      child: const Icon(
        Icons.add,
        color: Colors.yellow,
      ),
    ),
  );
}

关键说明 #

• ListView.builder：按需构建列表项，性能更优，适合数据量较大的场景；若为固定少量数据，也可直接用ListView(children: [...])。
• 自定义列表行：通过Container+GestureDetector可完全自定义行的外观（比如添加图标、多文本、背景色等），比DataTable更灵活，完全匹配TableView的自定义Cell需求。
• 无需重写整个文件：仅修改_MyHomePageState中的build方法内的body部分，以及添加数据源即可，原有路由、主题等代码结构全部保留。

补充：用ListTile简化代码 #

若无需高度自定义，可使用Flutter内置的ListTile快速实现标准列表行：

itemBuilder: (context, index) {
  return ListTile(
    title: Text(_listItems[index]),
    onTap: () {
      // 点击逻辑
    },
    trailing: const Icon(Icons.chevron_right), // 右侧箭头，模拟TableView的disclosureIndicator
  );
}

内容的提问来源于stack exchange，提问作者Daniel