Flutter中initState填充数组不显示？setState为何生效？是否合规？

问题背景 #

在Flutter开发中，我在initState()里调用异步方法填充recentPatients数组，打印数组长度能看到已有内容，但将其映射为Column的Widget列表时却不显示，仿佛数组为空。取消注释setState()代码后功能恢复正常，但initState()不是在build()之前调用吗？为什么setState()能解决这个问题？另外，在initState内调用setState是否符合最佳实践？

相关代码 #

class _HomePageState extends State<HomePage> {

  List<Patient> recentPatients = [];

  void getRecentPatients() async {
    var patientMapList = await dbGetAllPatients();

    //setState(() {
    recentPatients = patientMapList
        .map(
          (patientMap) => Patient(
            firstName: patientMap['firstName'],
            lastName: patientMap['lastName'],
            age: patientMap['age'],
            sex: patientMap['sex'],
            phoneNumber: patientMap['phoneNumber'],
            registeredOn: patientMap['registeredOn'],
          ),
        )
        .toList();
    // .sublist(recentPatients.length > 5 ? 5 : recentPatients.length);
    //});

    print(recentPatients.length);
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getRecentPatients();
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: recentPatients
          .map((patient) => PatientCard(patient))
          .toList()),
  }
}

问题解析 #

1. 为什么数组有内容但UI不显示？ #

initState()确实在第一次build()前执行，但你调用的getRecentPatients()是异步方法：await dbGetAllPatients()会暂停代码执行，等数据库操作完成后才会给recentPatients赋值。而initState()不会等待异步方法执行完毕就继续走后续逻辑，第一次build()运行时，recentPatients还是初始的空数组，所以UI显示为空。

等异步操作完成后，recentPatients被成功赋值，但此时没有通知Flutter框架状态发生变化，框架不会主动重新调用build()，所以UI不会更新。你打印的数组长度是异步完成后的值，但这时build()已经执行过了，自然看不到界面变化。

2. setState()为什么能解决问题？ #

setState()的核心作用就是告诉Flutter框架：状态已变更，需要重新执行build()来更新UI。当你把赋值操作放进setState()回调里，异步操作完成后，不仅给recentPatients赋了值，还触发了框架重新渲染，这时recentPatients已经有数据了，UI就能正确显示列表内容。

3. initState内调用setState是否符合最佳实践？ #

不推荐直接在initState()的同步代码里调用setState()，而你这里是在异步操作完成后调用，虽然能运行，但有更规范的替代方案：使用FutureBuilder。

FutureBuilder是Flutter官方推荐的处理异步数据渲染的组件，它会自动监听Future的状态（等待、完成、错误），并根据不同状态返回对应的UI，无需手动调用setState()，代码更简洁且易维护。

优化后的示例代码

首先修改getRecentPatients()让它返回Future：

Future<List<Patient>> getRecentPatients() async {
  var patientMapList = await dbGetAllPatients();
  return patientMapList
      .map(
        (patientMap) => Patient(
          firstName: patientMap['firstName'],
          lastName: patientMap['lastName'],
          age: patientMap['age'],
          sex: patientMap['sex'],
          phoneNumber: patientMap['phoneNumber'],
          registeredOn: patientMap['registeredOn'],
        ),
      )
      .toList();
}

然后修改build()方法使用FutureBuilder：

@override
Widget build(BuildContext context) {
  return FutureBuilder<List<Patient>>(
    future: getRecentPatients(),
    builder: (context, snapshot) {
      // 加载中状态
      if (snapshot.connectionState == ConnectionState.waiting) {
        return const CircularProgressIndicator();
      }
      // 加载错误状态
      else if (snapshot.hasError) {
        return Text('加载失败: ${snapshot.error}');
      }
      // 加载完成状态
      else {
        final patients = snapshot.data ?? [];
        return Column(
          children: patients.map((patient) => PatientCard(patient)).toList(),
        );
      }
    },
  );
}

这种方式不仅能自动处理状态更新，还能统一展示加载中、错误等状态，避免手动管理setState()的潜在问题，更符合Flutter的状态管理规范。

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