Flutter ExpansionPanel点击后立即关闭问题求助

你遇到的核心问题确实是展开状态被意外重置——如果每次组件build时都重新发起API请求、或是在build方法内初始化isExpanded列表，就会导致点击展开后，组件重建时状态被覆盖，面板立刻关闭。以下是具体的修复方案：

关键修复步骤 #

1. 将状态变量移至State类成员 #

把数据列表和展开状态列表定义为State类的成员变量，而非build方法内部，避免每次build都重新初始化：

class _YourPageState extends State<YourPage> {
  // 成员变量存储API数据和展开状态，仅在必要时更新
  List<YourDataModel>? _apiData;
  List<bool>? _isExpanded;
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    // 页面初始化时仅请求一次数据
    _loadApiData();
  }
}

2. 正确处理API数据加载 #

仅在initState或主动刷新时调用API，不要在build方法内执行异步请求：

Future<void> _loadApiData() async {
  try {
    final fetchedData = await YourApiService.getData();
    setState(() {
      _apiData = fetchedData;
      // 根据数据长度初始化展开状态，默认全部关闭
      _isExpanded = List.filled(fetchedData.length, false);
      _isLoading = false;
    });
  } catch (e) {
    // 处理API请求错误
    setState(() => _isLoading = false);
  }
}

3. 正确配置ExpansionPanelList #

确保展开状态的更新通过setState持久化，且不要在build中重新生成状态列表：

@override
Widget build(BuildContext context) {
  if (_isLoading) {
    return const Center(child: CircularProgressIndicator());
  }

  return ExpansionPanelList(
    children: List.generate(_apiData!.length, (index) {
      final item = _apiData![index];
      return ExpansionPanel(
        headerBuilder: (context, isExpanded) => Padding(
          padding: const EdgeInsets.all(16),
          child: Text(item.title),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Text(item.content),
        ),
        // 使用成员变量的状态，而非临时变量
        isExpanded: _isExpanded![index],
        onExpansionChanged: (expanded) {
          setState(() {
            // 更新对应索引的展开状态
            _isExpanded![index] = expanded;
          });
        },
      );
    }),
  );
}

额外优化：支持下拉刷新 #

如果需要刷新数据，可添加RefreshIndicator，同时可选重置展开状态：

return RefreshIndicator(
  onRefresh: () async {
    await _loadApiData();
    // 可选：刷新数据后重置所有面板为关闭状态
    setState(() {
      _isExpanded = List.filled(_apiData!.length, false);
    });
  },
  child: ExpansionPanelList(...),
);

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