Flutter对接MS SQL：ListViewBuilder展示数据库数据遇难题

第一步：修改数据读取方法，返回可用于UI的数据集 #

你当前的read方法仅打印数据，无法支撑UI构建。需要调整为返回查询结果列表：

Future<List<Map<String, dynamic>>> read(String query) async {
  var res = await SqlConn.readData(query);
  // 假设SqlConn返回的是List<Map>格式，若返回格式不同，需根据实际情况转换
  return List<Map<String, dynamic>>.from(res);
}

第二步：用FutureBuilder处理异步数据，构建ListView.builder #

数据库查询是异步操作，必须通过FutureBuilder等待数据加载，同时解决itemCount和数据展示问题：

class SqlDataPage extends StatelessWidget {
  final String query = "SELECT * FROM TabelTest";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SQL数据展示')),
      body: FutureBuilder<List<Map<String, dynamic>>>(
        future: read(query),
        builder: (context, snapshot) {
          // 数据加载中
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          // 加载出错
          if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          }
          // 无数据
          if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return const Center(child: Text('暂无数据'));
          }

          // 数据加载完成，构建列表
          return ListView.builder(
            // 解决itemCount问题：直接取返回数据的长度
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              final rowData = snapshot.data![index];
              // 解决ListTile展示问题：替换成你表中的实际字段名（如Name、Age、ID等）
              return ListTile(
                title: Text(rowData['TitleField'] ?? '无标题'),
                subtitle: Text(rowData['SubtitleField'] ?? '无内容'),
                leading: CircleAvatar(child: Text(rowData['ID'].toString())),
              );
            },
          );
        },
      ),
    );
  }
}

核心要点说明 #

• itemCount设置：直接使用snapshot.data!.length，也就是查询返回的总数据条数，彻底解决你的核心难题。
• ListTile数据展示：通过rowData['字段名']获取单条数据的对应字段值，替换成你TabelTest表中的实际字段即可。
• 额外处理了加载中、出错、空数据的状态，避免页面异常。

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