Flutter开发待办应用遇RenderBox未布局等三类报错如何解决

错误根源分析 #

三个报错均由两处代码逻辑错误连锁导致：

• 回调函数传参错误：TaskCheckBox中直接执行了toggleCheckBoxState()而非传递函数引用，导致Checkbox的onChanged属性接收到空值，触发Null check operator used on a null value报错
• 布局约束缺失：ListView默认会尝试占满父控件允许的最大高度，若其父容器是Column/Row这类无明确尺寸约束的组件，会导致布局计算失败，触发RenderBox was not laid out和hasSize断言报错

修复步骤 #

1. 修复复选框回调逻辑 #

Checkbox的onChanged属性需要接收一个函数引用，而非函数执行结果，同时要适配空安全的参数类型：
修改TaskCheckBox类的代码：

class TaskCheckBox extends StatelessWidget {
  // 明确指定回调函数的类型为ValueChanged，接收可空bool参数
  TaskCheckBox(this.checkboxState, this.toggleCheckBoxState);
  final bool checkboxState;
  final ValueChanged<bool?> toggleCheckBoxState;

  @override
  Widget build(BuildContext context) {
    return Checkbox(
      activeColor: Colors.blueAccent,
      value: checkboxState,
      // 去掉括号，直接传递函数引用，不要执行
      onChanged: toggleCheckBoxState,
    );
  }
}

同时修改TaskTile中传入回调的逻辑，适配可空参数：

trailing: TaskCheckBox(isChecked, (bool? checkboxState) {
  // 只有参数不为空时才更新状态
  if (checkboxState != null) {
    setState(() {
      isChecked = checkboxState;
    });
  }
}),

2. 修复ListView布局异常 #

给TaskList中的ListView添加shrinkWrap: true属性，让列表只包裹自身内容的高度，避免无边界布局冲突：

class TaskList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      // 添加这行
      shrinkWrap: true,
      children: <Widget>[
        TaskTile(),
        TaskTile(),
      ],
    );
  }
}

内容的提问来源于stack exchange，提问作者Usama Bin Tahir