Flutter中如何将sqflite数据库数据以表格形式展示

方案1：ListView列表展示 #

先在页面的State类中维护数据列表，修改查询方法将数据同步到列表并更新UI：

List<Map<String, dynamic>> _dataList = [];

void _query() async {
  final allRows = await dbHelper.queryAllRows();
  setState(() {
    _dataList = allRows;
  });
}

然后在build方法中渲染列表项：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('数据列表')),
    body: _dataList.isEmpty
        ? const Center(child: Text('暂无数据'))
        : ListView.builder(
            itemCount: _dataList.length,
            itemBuilder: (context, index) {
              final row = _dataList[index];
              return ListTile(
                leading: Text(row[columnId].toString()),
                title: Text(row[columnName]),
                subtitle: Text('批次：${row[columnBatch]}'),
              );
            },
          ),
    floatingActionButton: FloatingActionButton(
      onPressed: _query,
      child: const Icon(Icons.refresh),
    ),
  );
}

方案2：DataTable表格展示 #

同样先维护数据列表，再用DataTable实现表格布局（支持横向滚动适配小屏）：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('数据表格')),
    body: _dataList.isEmpty
        ? const Center(child: Text('暂无数据'))
        : SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: DataTable(
              columns: const [
                DataColumn(label: Text('ID')),
                DataColumn(label: Text('名称')),
                DataColumn(label: Text('批次')),
              ],
              rows: _dataList.map((row) {
                return DataRow(cells: [
                  DataCell(Text(row[columnId].toString())),
                  DataCell(Text(row[columnName])),
                  DataCell(Text(row[columnBatch])),
                ]);
              }).toList(),
            ),
          ),
    floatingActionButton: FloatingActionButton(
      onPressed: _query,
      child: const Icon(Icons.refresh),
    ),
  );
}

补充优化 #

• 可在页面初始化时自动加载数据，重写initState：

@override
void initState() {
  super.initState();
  _query();
}

• 确保columnId、columnName、columnBatch常量与你的数据库表定义完全一致

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