Flutter Column嵌套可展开ListView报RenderFlex无界高度错误

你想要实现的布局效果参考：

核心问题原因 #

一共3处代码错误导致布局异常：

• 高度约束不匹配。你将未登录态的整体页面内容包裹在SingleChildScrollView中，该组件会向子节点传递无界高度约束，但你在下层LearningCourseBody的Column中给列表套了Expanded组件。Expanded仅能在有明确高度边界的Flex布局中瓜分剩余高度，在无界高度场景下无法计算可用高度，直接触发渲染溢出、列表不显示的问题，这也是你套了Expanded仍然不生效的根本原因。
• 嵌套滚动冲突。ExpandableListViewWidget中的ListView.builder默认会尝试占用全部可用高度，且自带独立滚动逻辑，和外层SingleChildScrollView的滚动逻辑冲突，进一步加剧布局异常。
• 展开状态持久化错误。你将记录展开/收起状态的tileExpanded列表定义在build方法内，每次组件触发setState重建时，该列表都会被重新初始化为全false，导致点击展开后状态立即重置，交互无响应。

修复步骤 #

1. 移除列表外层无效的Expanded包裹
   打开LearningCourseBody组件，删掉包裹ExpandableListViewWidget的Expanded，因为外层是无界高度的滚动视图，Expanded在这里没有任何作用。
2. 适配嵌套滚动场景，修复列表配置
   给ListView.builder添加两个参数：
   • shrinkWrap: true：让列表高度自适应内容总高度，不强制占满父级全部可用空间
   • physics: const NeverScrollableScrollPhysics()：禁用列表自身的滚动响应，统一由外层SingleChildScrollView处理页面滚动
3. 修复展开状态丢失问题
   将tileExpanded列表从build方法中移到State类的成员变量位置，在initState生命周期中完成初始化，避免组件重建时状态被重置。

修复后的可展开列表组件完整代码 #

class ExpandableListViewWidget extends StatefulWidget {
  CourseModel courseModel;
  ExpandableListViewWidget({Key? key, required this.courseModel}) : super(key: key);

  @override
  State<ExpandableListViewWidget> createState() => _ExpandableListViewWidgetState();
}

class _ExpandableListViewWidgetState extends State<ExpandableListViewWidget> {
  // 状态变量移到State类中，避免重建丢失
  late List<bool> tileExpanded;

  @override
  void initState() {
    super.initState();
    // 初始化仅执行一次
    tileExpanded = List<bool>.generate(widget.courseModel.particalsCourse!.length, (index) => false);
  }
  
  List<Widget> _buildExpandList(int index) {
    List<Widget> res = [];
    if (widget.courseModel.particalsCourse![index].lessons == null) return res;
    for (var sub in widget.courseModel.particalsCourse![index].lessons!) {
      var s = ListTile(
        title: Text(sub.title!),
        leading: Icon(Icons.play_circle),
        trailing: sub.isTrial! ? SmallText(text: 'học thử', color: AppColors.yellowColor,) : Text(sub.timeLearning!.toString()),
      );
      res.add(s);
    }
    return res;
  }
  
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        // 解决嵌套滚动冲突
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        itemCount: widget.courseModel.particalsCourse!.length,
        itemBuilder: (context, index) {
          return Container(
            child: ExpansionTile(
              title: Text(widget.courseModel.particalsCourse![index].title!),
              controlAffinity: ListTileControlAffinity.leading,
              leading: Icon(
                tileExpanded[index] ? Icons.arrow_drop_up : Icons.arrow_drop_down
              ),
              children: _buildExpandList(index),
              onExpansionChanged: (bool expanded) {
                setState(() => tileExpanded[index] = expanded);
              },
            ),
          );
        }
    );
  }
}

如果你想要实现列表区域独立滚动、不随页面头部一起滚动的效果，可以去掉外层的SingleChildScrollView，改用Column布局：固定高度的封面、黑色信息模块作为Column的前两个子节点，灰色背景的课程模块外层套Expanded占满剩余屏幕高度，这时候列表不需要设置shrinkWrap和禁用滚动，就能正常在固定高度区域内滚动。

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