Flutter开发Pomodoro应用时void类型表达式报错如何修复

报错原因 #

报错核心是传参时错误地立即执行了无返回值的方法：
给EntradaTempo组件的inc/dec参数传值时，你在MobX store的action方法后面加了括号()，这行代码会在组件build阶段立刻执行对应方法，而这些action方法本身没有定义返回值，执行后返回void类型，但组件参数要求传入的是点击时才触发的回调函数（VoidCallback类型），类型不匹配就会抛出该错误。
另外原代码还有一处逻辑错误：工作时长模块的减号回调错传成了休息时长的减少方法，会导致交互逻辑异常。

修复步骤 #

• 去掉所有传给inc/dec的方法名后面的括号，直接传函数引用，不要在build阶段执行方法
• 修正工作时长减号回调的方法绑定错误

修复后代码 #

错误传参段修复 #

EntradaTempo(
  titulo: 'Work',
  valor: store.tempoWork,
  inc: store.incrementarTempoWork, // 去掉末尾的()
  dec: store.reduceTempoWork, // 修正原逻辑错误，原代码错传为reduceTempoRest
),
EntradaTempo(
  titulo: 'Relax',
  valor: store.tempoRest,
  inc: store.incrementarTempoRest, // 去掉末尾的()
  dec: store.reduceTempoRest, // 去掉末尾的()
),

完整修复后的组件代码 #

class Pomodoro extends StatelessWidget {
  const Pomodoro({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final store = Provider.of<PomodoroStore>(context);

    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(child: Cronometro()),
          Padding(
            padding: EdgeInsets.symmetric(vertical: 40),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                EntradaTempo(
                  titulo: 'Work',
                  valor: store.tempoWork,
                  inc: store.incrementarTempoWork,
                  dec: store.reduceTempoWork,
                ),
                EntradaTempo(
                  titulo: 'Relax',
                  valor: store.tempoRest,
                  inc: store.incrementarTempoRest,
                  dec: store.reduceTempoRest,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

补充说明 #

如果后续需要给回调方法传参，不能直接加括号执行，可以用箭头函数包裹，写法如下：

// 传参场景示例
inc: () => store.incrementarTempoWork(5),

这种写法不会立刻执行方法，而是会把箭头函数本身作为回调传给组件，点击触发时才会执行内部的方法传参调用，符合类型要求。

内容的提问来源于stack exchange，提问作者pomoworko.com