Flutter如何提取内部包含onPressed setState逻辑的自定义Widget

报错原因 #

你要提取的代码段内直接调用了当前_CalculatorState类的setState和calculate方法，独立Widget没有父类State的上下文访问权限，因此触发该报错。

解决方案 #

方案1：构造函数传回调（轻量首选，适合简单场景） #

不需要引入额外依赖，通过回调将父类的操作逻辑传递给子Widget即可，实现步骤如下：

1. 提取目标代码为独立Widget，预留点击回调参数：

class CalculateButton extends StatelessWidget {
  const CalculateButton({
    Key? key,
    required this.onPressed,
  }) : super(key: key);

  // 定义回调参数接收父类传入的点击逻辑
  final VoidCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextButton(
        onPressed: onPressed,
        child: const Text('Button 001'),
      ),
    );
  }
}

2. 在原_CalculatorState的build方法中替换引用，将包含setState的逻辑作为参数传入新Widget：

@override
Widget build(BuildContext context) {
  return Container(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 替换原来的Container+TextButton部分
        CalculateButton(
          onPressed: () {
            setState(() {
              calculate();
            });
          },
        ),
        TextOutput(myValue: myValue),
      ],
    ),
  );
}

方案2：状态管理（适合复杂场景） #

如果涉及多组件共享状态、操作逻辑复杂的场景，可以使用Provider、Riverpod、Bloc等状态管理方案统一维护状态和操作方法，子组件直接从全局状态中调用对应方法即可。

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