Flutter中含Checkbox的ListView触发渲染异常问题求助

核心问题原因 #

• 关闭shrinkWrap时，ListView需要父组件提供明确的垂直高度约束，但你的TaskList把ListView套在了无约束的Column里，而这个Column又嵌套在CCArticles的主Column中，最终导致ListView拿到的是无限高度的约束，触发"Vertical viewport was given unbounded height"错误。
• 开启shrinkWrap时，ListView会根据子项高度自适应，但外层Column不会自动处理滚动或裁剪，所以整个列表内容会超出屏幕范围。

修复方案 #

两种常用解决方式，选其一即可：

方案1：用Expanded包裹ListView #

让ListView占据Column中Progress组件下方的剩余可用空间，同时获得明确的高度约束：
修改TaskList的build方法：

class TaskList extends StatelessWidget {
  const TaskList({super.key, required this.tasks});
  final List<Widget> tasks;
  @override
  Widget build(BuildContext context) {
    return Expanded( // 添加这层Expanded
      child: ListView(
        padding: const EdgeInsets.symmetric(),
        // shrinkWrap保持关闭即可
        children: tasks,
      ),
    );
  }
}

这样既解决了无限高度的断言错误，又能让列表在可用空间内正常滚动，不会超出屏幕。

方案2：用CustomScrollView替代外层Column #

把顶部进度条和列表合并成一个整体滚动页面，适合需要整个页面统一滚动的场景：
修改CCArticles的body部分：

body: CustomScrollView(
  slivers: [
    SliverToBoxAdapter(child: const Progress()),
    SliverList(
      delegate: SliverChildListDelegate(tasks),
    ),
  ],
),

这种方式可以去掉TaskList组件，直接将进度条作为固定头部，列表作为滚动内容，彻底避免嵌套组件的约束冲突。

额外优化建议 #

• 不要在build方法里创建tasks列表，每次build都会重新生成，建议把列表移到State类的成员变量中，提升性能。
• 可以给TaskItem里的Row加padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8)，让列表项排版更美观。

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