Flutter中从数据库取数据并通过ListView.builder展示的实现方案

问题描述 #

已有数据库查询方法和页面框架，但无法正确在界面显示从数据库获取的column1、column2、column3、column4列的记录，需要实现通过ListView.builder展示这些数据。

修正后的完整代码 #

数据库工具类（dbHelper.dart）

import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';

class SQLHelper {
  static Future<Database> db() async {
    return openDatabase(
      join(await getDatabasesPath(), 'your_database.db'),
      onCreate: (db, version) {
        // 根据你的表结构初始化，示例：
        return db.execute(
          'CREATE TABLE table(id INTEGER PRIMARY KEY, column1 TEXT, column2 TEXT, column3 TEXT, column4 TEXT)',
        );
      },
      version: 1,
    );
  }

  // 获取指定列的所有记录
  static Future<List<Map<String, dynamic>>> getData() async {
    final db = await SQLHelper.db();
    return await db.rawQuery('SELECT column1, column2, column3, column4 FROM table');
  }
}

展示页面（show_outlets.dart）

import 'package:flutter/material.dart';
import 'package:test_02/dbHelper.dart';

class ShowOutlets extends StatefulWidget {
  @override
  State<ShowOutlets> createState() => _ShowOutletsState();
}

class _ShowOutletsState extends State<ShowOutlets> {
  bool _isLoading = true;
  List<Map<String, dynamic>> _recordList = [];

  @override
  void initState() {
    super.initState();
    _loadRecords(); // 页面初始化时自动加载数据
  }

  // 异步加载数据库数据
  void _loadRecords() async {
    final data = await SQLHelper.getData();
    setState(() {
      _recordList = data;
      _isLoading = false;
    });
  }

  static const boldStyle = TextStyle(fontWeight: FontWeight.bold);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('User Data'),
      ),
      body: _isLoading
          ? const Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: _recordList.length,
              itemBuilder: (context, index) {
                final record = _recordList[index];
                return Card(
                  color: Colors.orangeAccent,
                  margin: const EdgeInsets.all(15),
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const Text(
                          "USER INFORMATION",
                          style: TextStyle(fontSize: 20.0),
                        ),
                        const SizedBox(height: 10),
                        Text('Column1: ${record['column1']}', style: boldStyle),
                        Text('Column2: ${record['column2']}'),
                        Text('Column3: ${record['column3']}'),
                        Text('Column4: ${record['column4']}'),
                      ],
                    ),
                  ),
                );
              },
            ),
    );
  }
}

关键修改说明 #

• 数据加载时机：在initState中调用_loadRecords，确保页面启动时自动触发数据查询，无需手动操作。
• 修正数据存储逻辑：将原错误的list = [SQLHelper.getOutletsData()]改为通过异步方法获取真实数据，用_recordList存储数据库返回的Map列表（每条记录对应一个Map，键为列名）。
• ListView配置优化：itemCount绑定_recordList.length，保证列表项数量与数据条数一致；itemBuilder中通过record['columnName']直接取出对应列的值，展示在Text组件中。
• 状态管理修正：_isLoading初始设为true，数据加载完成后切换为false，正确显示加载状态与数据内容。
• 代码规范调整：类名改为大驼峰格式（ShowOutlets）符合Dart命名规范；添加Padding优化卡片内边距，提升界面美观度。

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