Flutter中FutureBuilder列表子部件ElevatedButton交互无响应问题求助

你遇到的按钮点击无响应问题，核心原因是FutureBuilder的future参数每次build时都会重新创建新的Future实例，导致FutureBuilder不断触发重建，你的CampaignCard部件也会被频繁重新初始化，进而丢失了交互状态（比如按钮的点击事件绑定）。

为什么会这样？ #

你当前的代码里直接把campaignList这个getter传给了FutureBuilder的future参数：

FutureBuilder<List>(
  future: campaignList, // 这里每次build都会调用get campaignList，创建新的Future
  // ...
)

Flutter的Widget树在任何状态变化时都会触发build，这意味着每次build都会重新发起HTTP请求，同时FutureBuilder会回到loading状态，重建所有子部件——你的按钮还没来得及响应点击就被重新创建了，自然没反应。

解决步骤 #

1. 把Future的初始化移到State的initState中

在包含FutureBuilder的父部件（假设是StatefulWidget）里，将Future的创建放在initState里，只执行一次：

class _YourParentWidgetState extends State<YourParentWidget> {
  late Future<List> _campaignListFuture; // 声明一个Future变量

  @override
  void initState() {
    super.initState();
    _campaignListFuture = getCampaignList(); // 只在初始化时获取一次数据
  }

  // 把原来的getter改成独立的异步方法
  Future<List> getCampaignList async {
    String jwt = await userToken;
    var url = Uri.parse('[API_URL]');
    var response = await http.get(
      url,
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer $jwt',
      },
    );
    List<dynamic> list = json.decode(response.body);
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List>(
      future: _campaignListFuture, // 使用初始化好的Future变量
      builder: (BuildContext context, AsyncSnapshot<List> snapshot) {
        // ... 你的builder逻辑
      },
    );
  }
}

2. 用ListView.builder替换Column来渲染列表

你当前用Column来装所有CampaignCard，当列表项很多时会导致性能问题，而且也不是列表的正确实现方式。换成ListView.builder更高效，也能避免一些意外的渲染问题：

builder: (BuildContext context, AsyncSnapshot<List> snapshot) {
  if (snapshot.hasData) {
    var campaignList = snapshot.data!;
    return ListView.builder(
      itemCount: campaignList.length,
      itemBuilder: (context, index) {
        final campaign = campaignList[index];
        return CampaignCard(
          id: campaign['id'],
          title: campaign['title'],
          operatingModeId: campaign['operating_mode_id'],
          coringTypeId: campaign['coring_type_id'],
          createdAt: campaign['created_at'],
          status: campaign['status'],
          statusId: campaign['status_id'],
          done: campaign['done'],
          total: campaign['total'],
        );
      },
    );
  } else if (snapshot.hasError) {
    return Center(child: Text('${snapshot.error}'));
  } else {
    return Center(child: Text('Loading'));
  }
}

3. 额外优化：简化CampaignCard的状态管理

你的CampaignCard是StatefulWidget，但目前的状态逻辑里没有需要维护的可变状态，可以考虑改成StatelessWidget（如果后续不需要状态的话），这样更简洁。不过即使保持Stateful，只要FutureBuilder的问题解决了，按钮点击就能正常响应。

验证效果 #

做完以上修改后，Future只会在初始化时执行一次，FutureBuilder不会频繁重建子部件，你的ElevatedButton点击事件就能正常触发，导航到MapScreen的逻辑也能正常运行。

内容的提问来源于stack exchange，提问作者Brice Le Roux