Flutter搜索页JSON解析未完成页面已构建，列表不显示求助

你的核心问题是异步加载数据完成后没有通知Flutter框架更新UI：

• readJson是异步方法，initState调用它后，页面会优先执行build（此时monsters还是空列表）
• 等JSON解析完成、monsters填充完毕后，没有触发UI重建，所以列表始终显示空内容

直接修复方案 #

在readJson方法的末尾添加setState，通知框架更新状态：

Future<void> readJson() async {
  final String responce =
      await rootBundle.loadString('assets/5e-SRD-Monsters.json');
  final retData = jsonDecode(responce);
  // 用临时列表存储解析结果，避免循环中多次触发状态更新
  List<Monster> tempMonsters = [];
  for (var mon in retData) {
    try {
      String sSpeed = mon["speed"];
      sSpeed = sSpeed.substring(0, sSpeed.indexOf(' '));
      tempMonsters.add(Monster(
          mon["name"],
          mon["hit_points"],
          mon["armor_class"],
          mon["strength"],
          mon["constitution"],
          mon["dexterity"],
          mon["intelligence"],
          mon["wisdom"],
          mon["charisma"],
          int.parse(sSpeed)));
    } on Error catch (_) {
      continue;
    } on Exception catch (_) {
      continue;
    }
  }
  // 触发状态更新，让UI重新构建
  setState(() {
    monsters = tempMonsters;
  });
  print(monsters.length);
}

优化体验：添加加载状态 #

为了避免用户看到空白页面，可以在数据加载完成前显示加载指示器，修改build方法中的列表部分：

Expanded(
  child: monsters.isEmpty 
      ? const Center(child: CircularProgressIndicator())
      : ListView.builder(
          scrollDirection: Axis.vertical,
          itemCount: monsters.length,
          itemBuilder: (context, index) {
            return Text(monsters[index].name);
          },
        )
)

为什么之前的尝试无效？ #

• 在initState调用异步方法本身没问题，但必须在异步操作完成后调用setState触发UI更新
• 把异步方法放在build开头会导致每次UI重建都重新加载数据，而且同样没有触发状态更新，反而会引发不必要的重复请求

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