Flutter中FutureBuilder无法检测空数据，如何显示无数据提示？

我来帮你搞定这个FutureBuilder的问题！你的核心痛点是：当接口返回空数组[]时，snapshot.hasData会返回true（因为空数组本身是有效的非null数据），所以你需要在hasData的分支里额外判断数据是否为空，同时还要完善加载、错误状态的处理逻辑。

先分析你现有代码的问题： #

• 没有正确处理AsyncSnapshot的不同状态（加载中、错误、数据为空）
• 直接使用外部变量myList而非snapshot.data，导致FutureBuilder的状态更新不同步
• 加载状态的LinearProgressIndicator放置位置错误，永远不会被执行到

修改后的完整代码 #

FutureBuilder(
  future: _future,
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    // 1. 处理加载中状态
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const Center(child: LinearProgressIndicator());
    }

    // 2. 处理错误状态
    if (snapshot.hasError) {
      return const Center(child: Text('加载出错，请稍后重试'));
    }

    // 3. 处理数据状态
    if (snapshot.hasData) {
      // 强转数据类型（如果你的myList是特定类型，比如List<Appointment>，这里可以改成对应类型）
      final List myList = snapshot.data as List;
      
      // 判断数据是否为空数组
      if (myList.isEmpty) {
        return const Center(child: Text('暂无数据'));
      }

      // 数据不为空时渲染列表
      return ListView.builder(
        itemExtent: 80,
        itemCount: myList.length,
        itemBuilder: (BuildContext context, int i) {
          return Card(
            child: ListTile(
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => DisplayReports(appointmentDetail: myList[i])
                  )
                );
              },
              contentPadding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
              leading: Container(
                padding: const EdgeInsets.only(right: 8.0),
                child: const Icon(Icons.date_range, color: Colors.blueGrey),
              ),
              title: Text(
                myList[i].doctorName,
                style: const TextStyle(
                  fontSize: 20.0,
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                ),
              ),
              subtitle: Row(
                children: <Widget>[
                  Text(
                    myList[i].apptDateTime != null 
                        ? formatDate(DateTime.parse(myList[i].apptDateTime), [dd, '/', M, '/', yyyy]) 
                        : " ",
                    overflow: TextOverflow.ellipsis,
                    maxLines: 1,
                    softWrap: false,
                    style: const TextStyle(fontSize: 12, color: Colors.black54),
                  ),
                ],
              ),
              trailing: IconButton(icon: const Icon(Icons.more_vert), onPressed: () {}),
            ),
          );
        },
      );
    }

    // 兜底状态（理论上不会走到这里）
    return const Center(child: Text('加载中...'));
  },
)

关键修改点说明： #

• 加载状态处理：通过connectionState == ConnectionState.waiting判断，显示加载指示器
• 错误状态处理：通过snapshot.hasError捕获请求错误，显示友好提示
• 空数据判断：在snapshot.hasData为true时，额外判断myList.isEmpty，如果为空则显示“暂无数据”
• 使用snapshot.data：不再依赖外部myList，直接从snapshot中获取数据，确保FutureBuilder的状态与请求结果同步

这样修改后，无论是加载中、请求错误、数据为空还是数据正常，都能正确展示对应的UI了。

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