自定义MyTimer Widget时传入的callback被立即调用，如何阻止？

嘿，这个问题我之前也踩过坑！问题出在你传递callback的方式上——你大概率是直接把函数调用（比如myCallback()）作为参数传给MyTimer了，而不是传递函数本身的引用。

为什么会自动调用？ #

当你写MyTimer(myCallback())时，myCallback()会立即执行，然后把它的返回值（因为是VoidCallback，返回void，也就是null）传给MyTimer的构造函数。这就导致页面加载时函数就被触发了，而不是等到计时完成才调用。

正确的解决方法 #

1. 无参数的Callback：直接传递函数引用

不要加括号，直接把函数名传进去，这样传递的是函数对象本身，而不是执行后的结果：

// 错误写法（会立即执行）
MyTimer(myCallback())

// 正确写法
MyTimer(myCallback)

2. 需要传递参数的Callback：用匿名函数包裹

如果你的callback需要接收参数，就用匿名函数（箭头函数或普通匿名函数）把它包起来，这样只有当定时器触发时，才会执行内部的callback：

// 带参数的callback示例
void myCallback(String message) {
  print(message);
}

// 正确传递方式
MyTimer(() => myCallback('计时完成！'));
// 或者用普通匿名函数
MyTimer(() {
  myCallback('计时完成！');
});

完整的MyTimer实现示例 #

为了更清晰，这里补充上MyTimerState的实现，确保callback只在计时结束时被调用：

class MyTimer extends StatefulWidget {
  final VoidCallback callback;
  MyTimer(this.callback);

  @override
  State<StatefulWidget> createState() => MyTimerState();
}

class MyTimerState extends State<MyTimer> {
  Timer? _timer;

  @override
  void initState() {
    super.initState();
    // 启动一个5秒的定时器，到时调用callback
    _timer = Timer(const Duration(seconds: 5), () {
      widget.callback(); // 这里才是正确的调用时机
    });
  }

  @override
  void dispose() {
    _timer?.cancel(); // 页面销毁时取消定时器，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return const Text('计时中...');
  }
}

这样修改后，你的callback就只会在计时完成时被调用，而不是页面加载时自动触发啦！

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