Flutter中从有状态Widget向无状态子组件传递void函数报错解决

构建简易待办事项应用时，有状态组件TaskTile向无状态子组件TaskCheckbox传递布尔值和状态修改函数时触发错误：

lib/widgets/task_tile.dart:39:32: Error: This expression has type 'void' and can't be used.

错误原因 #

• 传递函数时直接调用checkboxCallback(checkboxState: isChecked)，这会立即执行函数并返回void，而非传递函数本身
• TaskCheckbox中函数类型声明错误，final void toggleCheckboxState;不是合法的函数类型定义

修正后的代码 #

TaskTile 组件

import 'package:flutter/material.dart';
import 'task_checkbox.dart';

class TaskTile extends StatefulWidget {
  const TaskTile({
    super.key,
    required this.taskName,
  });

  final String taskName;

  @override
  State<TaskTile> createState() => _TaskTileState();
}

class _TaskTileState extends State<TaskTile> {
  bool isChecked = false;

  // 适配Checkbox的onChanged回调类型，参数为bool?
  void checkboxCallback(bool? newValue) {
    setState(() {
      // 处理null情况，默认设为false
      isChecked = newValue ?? false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          widget.taskName,
          style: TextStyle(
            color: Colors.white,
            decoration: isChecked ? TextDecoration.lineThrough : null,
          ),
        ),
        TaskCheckbox(
          checkboxState: isChecked,
          // 直接传递函数引用，而非调用函数
          toggleCheckboxState: checkboxCallback,
        ),
      ],
    );
  }
}

TaskCheckbox 组件

import 'package:flutter/material.dart';

class TaskCheckbox extends StatelessWidget {
  const TaskCheckbox({
    super.key,
    required this.checkboxState,
    required this.toggleCheckboxState,
  });

  final bool checkboxState;
  // 正确声明函数类型：接收bool?参数，返回void
  final void Function(bool?) toggleCheckboxState;

  @override
  Widget build(BuildContext context) {
    return Checkbox(
      value: checkboxState,
      // 直接传递函数，类型已匹配
      onChanged: toggleCheckboxState,
      checkColor: Colors.black,
      activeColor: const Color(0xff7df9ff),
      side: const BorderSide(
        color: Colors.white70,
      ),
    );
  }
}

核心修正点 #

1. 函数传递方式：传递函数引用而非直接调用函数，确保子组件接收的是可执行的函数对象
2. 函数类型匹配：统一函数参数类型为bool?，适配Flutter原生Checkbox的onChanged回调规范
3. null值处理：在状态更新时处理可能的null参数，保证状态变量始终为合法的bool值

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