Flutter中如何正确使用FutureBuilder调用_getAlert()构建列表

首先确认_getAlert()函数的返回类型为Future<List<Notifs>>，你原有异步获取通知数据的逻辑不需要调整，按照以下步骤修改代码即可：

完整修改后代码 #

class _AlerteState extends State<Alerte> {
  // 存储异步获取到的通知列表，用于侧滑删除后本地更新UI
  List<Notifs>? _notifs;

  // 你自己的异步获取通知逻辑，替换内部实现即可
  Future<List<Notifs>> _getAlert() async {
    await Future.delayed(const Duration(milliseconds: 500)); // 模拟异步请求延迟
    return NotifsList.getNotifs();
  }

  Widget _buildNotifsList() {
    return FutureBuilder<List<Notifs>>(
      // 绑定异步请求方法
      future: _getAlert(),
      builder: (context, snapshot) {
        // 加载状态处理，可替换为自定义加载动画
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        // 错误状态处理，可扩展增加重试按钮
        if (snapshot.hasError) {
          return Center(child: Text('加载失败：${snapshot.error}'));
        }
        // 拿到数据后赋值给本地状态变量
        _notifs ??= snapshot.data ?? [];

        return Container(
          child: _notifs!.isNotEmpty
              ? ListView.builder(
                  itemCount: _notifs!.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Dismissible(
                      onDismissed: (DismissDirection direction) {
                        setState(() {
                          // 直接修改本地列表刷新，无需重复发起异步请求
                          _notifs!.removeAt(index);
                        });
                        // 如需同步删除后端/本地数据库数据，可在这里补充对应逻辑
                      },
                      secondaryBackground: Container(
                        child: Center(
                          child: Text(
                            'Delete',
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                        color: Colors.red,
                      ),
                      background: Container(),
                      child: NotifsCard(notif: _notifs![index]),
                      key: UniqueKey(),
                      direction: DismissDirection.endToStart,
                    );
                  },
                )
              : const Center(child: Text('No Items')),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
        minimum: const EdgeInsets.only(
            top: 20.0, right: 5.0, left: 5.0, bottom: 10.0),
        child: Scaffold(
          backgroundColor: const Color(0xFFF6F7F8),
          body: _buildNotifsList(),
        ));
  }
}

核心修改说明 #

• 移除了原有同步获取的notifs成员变量，新增State级_notifs变量存储异步返回的数据，避免侧滑删除后重复触发异步请求
• 用FutureBuilder包裹原有列表构建逻辑，分别对应处理加载中、加载出错、加载完成三种状态
• 完全保留了你原有侧滑删除、空数据提示等业务逻辑，不需要调整现有交互代码

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