Flutter TabView中如何将DataTable加入static const List<Widget>列表

核心问题根源 #

你完全可以将DataTable组件放到列表中作为Tab页内容，报错是static const的编译时常量限制导致的：

• const修饰的列表要求内部所有元素的构造全是编译时常量，而DataTable通常会包含动态数据、交互回调（比如行选择、排序回调）这类非常量属性，无法满足const要求
• 同时你代码中TabBarView也加了const修饰，会强制要求children参数是常量列表，进一步触发报错

修复步骤 #

1. 去掉TabBarView的const修饰
2. 将_tabs列表的static const改为static final，同时去掉列表的const修饰，如果你的DataTable需要依赖页面动态数据/状态，也可以直接去掉static修饰，改为类的实例属性，或者直接在build方法内定义列表

修改后的完整示例代码 #

import 'package:flutter/material.dart';
import 'package:sliced_inventory/nav_bar.dart';

class ViewEditScreen extends StatelessWidget {
  const ViewEditScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        drawer: const NavBar(),
        appBar: AppBar(
          title: const Text("View Edit"),
          centerTitle: true,
        ),
        body: DefaultTabController(
          length: 8,
          child: Scaffold(
            appBar: AppBar(
              actions: const <Widget>[],
              title: const TabBar(
                tabs: [
                  Tab(text: "Freezer"),
                  Tab(text: "Back Cooler\n& Dry Storage"),
                  Tab(text: "Kitchen\nCooler"),
                  Tab(text: "Salad Cooler"),
                  Tab(text: "Dry Storage"),
                  Tab(text: "Spices"),
                  Tab(text: "Paper\nProducts"),
                  Tab(text: "Chemicals\nand Cleaning"),
                ],
                indicatorColor: Colors.white,
              ),
            ),
            // 已去掉此处的const修饰
            body: TabBarView(
              children: _tabs
            ),
          ),
        ));
  }

// 把static const改为static final，去掉列表的const修饰
static final List<Widget> _tabs = [    
  // 示例：第一个Tab插入自定义的FreezerDataTable
  FreezerDataTable(),
  // 第二个Tab对应DataTable
  BackCoolerDataTable(),
  // 剩余6个Tab的DataTable依次添加即可
  KitchenCoolerDataTable(),
  SaladCoolerDataTable(),
  DryStorageDataTable(),
  SpicesDataTable(),
  PaperProductsDataTable(),
  ChemicalsCleaningDataTable(),
];

// 示例：自定义的Freezer页DataTable组件
Widget FreezerDataTable() {
  return DataTable(
    columns: const [
      DataColumn(label: Text('商品名称')),
      DataColumn(label: Text('库存数量')),
      DataColumn(label: Text('单位')),
    ],
    rows: const [
      DataRow(cells: [
        DataCell(Text('鸡胸肉')),
        DataCell(Text('20')),
        DataCell(Text('袋')),
      ]),
      DataRow(cells: [
        DataCell(Text('薯条')),
        DataCell(Text('15')),
        DataCell(Text('箱')),
      ]),
    ],
  );
}
// 其余7个DataTable组件按自己的业务需求实现即可

}

补充说明 #

如果你的DataTable需要接收页面的动态参数、或者要和页面状态交互，不需要把_tabs定义为static，直接在build方法内声明列表即可，适配性更高。

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