Flutter中点击新ExpansionPanel时如何收起已展开的面板？

你当前的问题根源是用单个布尔变量控制所有面板的展开状态，导致所有面板共享同一状态，点击任意面板都会同步切换所有面板的展开/收起状态。以下是具体修复方案：

步骤1：替换单个状态变量为状态列表 #

将原来的bool isExpanded = false;替换为一个列表，用来存储每个面板的独立展开状态：

List<bool>? _panelExpandedStates;

在initState方法中初始化这个列表，长度与你的_signals数据长度一致，默认全部设为收起状态：

@override
void initState() {
  super.initState();
  // 根据数据长度初始化所有面板为收起状态
  _panelExpandedStates = List.filled(_signals!.length, false);
}

步骤2：修改面板状态控制逻辑 #

更新ListView.builder中的代码，让每个面板绑定对应索引的状态，并在点击时只修改当前面板的状态（可选自动收起其他面板）：

ListView.builder(
  itemBuilder: (context, index) {
    return Column(
      children: [
        ExpansionPanelList(
          expansionCallback: (panelIndex, isExpanded) {
            setState(() {
              // 方案1：点击当前面板时，自动收起其他所有面板
              for (int i = 0; i < _panelExpandedStates!.length; i++) {
                _panelExpandedStates![i] = i == index ? !isExpanded : false;
              }

              // 方案2：仅切换当前面板的状态，允许同时展开多个面板
              // _panelExpandedStates![index] = !isExpanded;
            });
          },
          children: [
            ExpansionPanel(
              headerBuilder: (context, isExpanded) {
                return Row(
                  children: [
                    const Text("Header"),
                    const Spacer(),
                    Text("username")
                  ],
                );
              },
              body: Column(
                children: [
                  Text(
                    _signals![index].pair.toString(),
                  ),
                ],
              ),
              // 绑定当前索引对应的展开状态
              isExpanded: _panelExpandedStates![index],
            ),
          ],
        )
      ],
    );
  },
  itemCount: _signals!.length,
),

额外说明 #

• 原代码中的isExpandeder是拼写错误，替换为状态列表后无需再使用这个变量
• 如果_signals数据是动态加载的，记得在数据更新后重新初始化_panelExpandedStates，避免长度不匹配的问题

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