异步方法下Flutter ListView无内容显示问题求助

核心问题分析 #

• ListView高度约束缺失：将ListView.builder嵌套在Column中时，Column默认允许子组件占用无限高度，导致ListView无法正常渲染内容，这是显示为空的主要原因。
• 空安全处理不严谨：itemCount使用response.data?.length，虽hasData为true时数据必然存在，但这种写法可能引发潜在空值问题；同时_BuildRow接收可空Location?参数，在数据已确认存在的场景下没必要保留可空性。
• 布局结构冗余：外层Center嵌套Column再包裹ListView，会限制ListView的可用空间，导致内容无法展示。

修复方案 #

1. 用Expanded或直接替换布局：让ListView占据页面可用空间，解决高度约束问题。
2. 修正空安全逻辑：在hasData分支中直接使用非空数据，同时调整_BuildRow参数为非空类型。
3. 简化布局层级：移除不必要的嵌套，让ListView正确填充页面。

修改后的完整代码 #

final LocationService service = LocationService();
late Future<List<Location>> _locations;

@override
void initState() {
  super.initState();
  _locations = service.getLocations();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Mes locations'),
    ),
    bottomNavigationBar: const BottomNavBar(2),
    body: FutureBuilder<List<Location>>(
      future: _locations,
      builder: (BuildContext context, AsyncSnapshot<List<Location>> response) {
        if (response.hasData) {
          final locations = response.data!;
          return ListView.builder(
            itemCount: locations.length,
            itemBuilder: (context, index) => _BuildRow(locations[index]),
            itemExtent: 285,
          );
        } else if (response.hasError) {
          return const Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  Icons.error_outline,
                  color: Colors.red,
                  size: 40,
                ),
                Padding(
                  padding: EdgeInsets.only(top: 16),
                  child: Text('Un problème est survenu'),
                ),
              ],
            ),
          );
        } else {
          return const Center(
            child: SizedBox(
              width: 50,
              height: 50,
              child: CircularProgressIndicator(
                strokeWidth: 6,
              ),
            ),
          );
        }
      },
    ),
  );
}

_BuildRow(Location location) {
  return Column(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            children: [
              Text(
                "OKOK",
                style: LocationTextStyle.priceBoldGreyStyle,
              ),
              Text("${location.dateFin}")
            ],
          ),
          Text("${location.montanttotal}€")
        ],
      )
    ],
  );
}

关键修改说明 #

• 移除了外层Center和包裹ListView的Column，让ListView直接作为FutureBuilder的返回值，自动填充Scaffold的body空间。
• 在hasData分支中将response.data赋值给非空变量locations，避免重复空判断，同时确保itemCount和itemBuilder使用的是可靠的非空数据。
• 将_BuildRow的参数改为非空Location类型，因为此时传入的元素必然存在，无需处理空值场景。

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