如何在触发_handleRefresh时折叠已展开的ExpansionTile？

当前页面刷新时，ExpansionTile会保持之前的展开状态，需要手动点击才能折叠。需求是触发_handleRefresh方法时，自动将所有已展开的ExpansionTile折叠。

解决方案 #

要实现这个需求，需要手动管理每个ExpansionTile的展开状态，而非依赖其内部维护的状态，具体步骤如下：

• 在页面的State类中添加状态变量，用分支ID作为键，记录对应ExpansionTile的展开状态
• 给每个ExpansionTile绑定展开状态变量，并通过回调更新状态
• 在刷新方法中先重置所有展开状态为折叠，再执行数据刷新

修改后的代码实现 #

1. 添加状态变量并初始化

在State类中添加用于管理展开状态的变量，并在初始化时设置默认值：

// State类成员变量
Map<int, bool> _expandedStates = {};

@override
void initState() {
  super.initState();
  // 初始化所有分支对应的tile为折叠状态
  branchData.forEach((data) {
    _expandedStates[data['id']] = false;
  });
}

2. 修改ExpansionTile代码

给ExpansionTile绑定展开状态和状态变化回调：

ExpansionTile(
  // 绑定展开状态
  expanded: _expandedStates[data['id']] ?? false,
  // 监听展开状态变化，更新变量
  onExpansionChanged: (isExpanded) {
    setState(() {
      _expandedStates[data['id']] = isExpanded;
    });
  },
  title: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Expanded(
        child: Text(
          data['branchName'],
          style: GoogleFonts.poppins(
            fontSize: 16.0,
            fontWeight: FontWeight.w500,
            color: Colors.black,
          ),
        ),
      ),
      Container(
          width: 60.0,
          decoration: BoxDecoration(
            color: Colors.green.withOpacity(0.6),
            borderRadius: BorderRadius.circular(50.0),
            border: Border.all(
              color: Color(0xFFCDCDCF),
              width: 1.0,
            ),
          ),
          child: Padding(
            padding: const EdgeInsets.all(5.0),
            child: Center(
              child: Text(
                '${data['sstInService']} / ${data['totalSST']}',
                style: GoogleFonts.poppins(
                  fontSize: 12.0,
                  fontWeight: FontWeight.w700,
                ),
              ),
            ),
          )),
      SizedBox(
        width: 20.0,
      )
    ],
  ),
  children: [
    Padding(
      padding:
          const EdgeInsets.only(left: 15.0, right: 15.0, bottom: 10.0),
      child: const Divider(
          height: 10, thickness: 1.0, color: Color(0xFFCDCDCF)),
    ),
    ...buildTerminalContainer(getTerminalDataById(data['id']))
  ],
),

3. 修改刷新方法

在_handleRefresh中先重置所有展开状态，再刷新数据：

Future<void> _handleRefresh() async {
  await Future.delayed(Duration(seconds: 2)); // 模拟延迟

  setState(() {
    // 重置所有ExpansionTile为折叠状态
    branchData.forEach((data) {
      _expandedStates[data['id']] = false;
    });
    // 执行数据刷新
    branchData = getAllBranch(); // 替换为实际的刷新逻辑
  });
}

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