Flutter如何实现点击列表项时才加载ExpandablePanel展开内容

问题原因 #

你遇到的问题是因为ExpandablePanel默认会提前构建所有传入的expanded组件，只是未展开时将其隐藏，所以会触发所有列表项的ClassWhichReturnsAContainer初始化。

解决方案 #

方案1：使用包自带懒加载配置（优先推荐，实现最简单）

如果你使用的expandable依赖版本≥5.0.1，直接给ExpandablePanel添加lazy: true配置即可，开启后只有第一次点击展开对应项时，才会构建expanded内的组件。
改造后的核心代码：

ExpandablePanel(
  lazy: true, // 仅需新增这一行配置
  header: Card(
    // 你的原有header代码
  ),
  expanded: Container(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    child: ClassWhichReturnsAContainer(item),
  ),
)

方案2：手动控制组件构建（兼容所有版本）

如果你的依赖版本不支持lazy参数，可以通过单独绑定展开控制器+动态判断状态的方式实现按需加载：
完整改造代码：

ListView(
  children: [
    ...items.map<Widget>(
      (item) {
        // 为每个列表项单独创建展开状态控制器
        final expandController = ExpandableController(initialExpanded: false);
        return ExpandableTheme(
          data: const ExpandableThemeData(hasIcon: false),
          child: ExpandablePanel(
            controller: expandController,
            header: Card(
              // 你的原有header代码
            ),
            expanded: ValueListenableBuilder<bool>(
              valueListenable: expandController,
              builder: (context, isExpanded, child) {
                // 未展开时返回空占位，不会构建目标组件
                if (!isExpanded) return const SizedBox.shrink();
                return Container(
                  height: MediaQuery.of(context).size.height,
                  width: MediaQuery.of(context).size.width,
                  child: ClassWhichReturnsAContainer(item),
                );
              },
            ),
          ),
        );
      },
    )
  ],
)

逻辑说明：

• 每个列表项独立持有ExpandableController跟踪自身的展开状态
• 通过ValueListenableBuilder监听展开状态变化，只有处于展开状态时才会将ClassWhichReturnsAContainer加入组件树执行构建，未展开时仅返回空占位组件，不会触发目标组件的任何初始化逻辑

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