Flutter使用ListView.Builder与ListTile无法展示Firestore下载数据

核心问题 #

界面不显示数据的根本原因是：Firestore属于异步请求，你拿到数据更新列表后，没有调用setState通知Flutter框架重新渲染UI。页面首次build的时候carparkList是空的，后续数据加载完成后没有触发重绘，所以界面一直是空的。

其他可优化的问题 #

• 存储数据的carparkList放在StatefulWidget层不符合规范，State私有状态建议放在State类内部
• 异步方法中同时使用await和.then属于冗余写法，统一风格更易维护
• 建议增加加载状态的展示，避免用户等待时看到空白页

修正后完整代码 #

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

class DownloadDataScreen extends StatefulWidget {
  @override
  _DownloadDataScreen createState() => _DownloadDataScreen();
}

class _DownloadDataScreen extends State<DownloadDataScreen> {
  // 把列表移到State内部作为私有状态
  List<DocumentSnapshot> carparkList = [];
  bool isLoading = true;

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

  void readFromFirebase() async {
    QuerySnapshot snapshot = await FirebaseFirestore.instance
        .collection('carpark')
        .get();
    // 遍历拿到数据后更新状态
    setState(() {
      carparkList = snapshot.docs;
      isLoading = false;
    });
    // 调试打印可以保留
    for (var cp in carparkList) {
      print('printing cp');
      print(cp.data());
      print(cp.get('name'));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Car Park',
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
      ),
      body: SafeArea(
        child: isLoading 
        ? const Center(child: CircularProgressIndicator())
        : Column(
          children: [
            Expanded(
              flex: 9,
              child: ListView.builder(
                itemCount: carparkList.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(carparkList[index].get('name')),
                    subtitle: Text(carparkList[index].get('district')),
                    onTap: () {},
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

修复说明 #

• 数据加载完成后调用setState，通知Flutter重新调用build方法渲染界面，此时列表已经有数据，就能正常展示ListTile了
• 增加了加载状态，请求过程中展示加载动画，优化用户体验
• 移除了冗余的.then写法，简化异步逻辑
• 把列表移到State内部，符合Flutter状态管理规范

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