Flutter封装可复用ElevatedButton无法调用State中setText方法求助

Flutter 是声明式 UI 框架，不建议通过获取子组件 State 调用方法的方式修改子组件状态，更推荐通过参数传递的方式配置子组件，你的需求完全可以用更简洁的方案实现。

推荐方案：通过构造参数配置组件（无耦合、符合设计规范） #

你需要的可复用按钮本质只需要接收文本和点击回调两个配置项，完全不需要定义为 StatefulWidget，StatelessWidget 就能满足需求，实现代码如下：

class AElevatedButton extends StatelessWidget {
  // 构造函数声明需要配置的参数，还可以根据需求扩展更多样式参数
  const AElevatedButton({
    super.key,
    required this.buttonText,
    required this.onPressed,
    this.backgroundColor,
    this.textStyle,
  });

  final String buttonText;
  final VoidCallback onPressed;
  final Color? backgroundColor;
  final TextStyle? textStyle;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(5),
      child: ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          backgroundColor: backgroundColor,
        ),
        child: Text(buttonText, style: textStyle),
      ),
    );
  }
}

父组件直接传参调用即可，不需要提前创建实例、调用方法修改属性：

class _MyHomePageState extends State<MyHomePage> {
  // 如果需要动态修改按钮文本，把变量存在父组件的State中即可
  String dynamicButtonText = "动态按钮";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Test Buttons")),
      body: Column(
        children: <Widget>[
          AElevatedButton(
            buttonText: "Button 1",
            onPressed: () {
              debugPrint("点击了按钮1");
              // 点击后修改动态按钮文本，setState后自动更新
              setState(() {
                dynamicButtonText = "按钮文本已修改";
              });
            },
          ),
          AElevatedButton(
            buttonText: "Button 2",
            onPressed: () => debugPrint("点击了按钮2"),
          ),
          AElevatedButton(
            buttonText: dynamicButtonText,
            onPressed: () => debugPrint("点击了动态按钮"),
          )
        ],
      ),
    );
  }
}

特殊场景方案：通过GlobalKey获取子组件State #

如果你确实有特殊场景需要调用子组件内部方法，可以用GlobalKey实现，该方案会导致父子组件强耦合，非必要不推荐使用：

1. 调整子组件定义 #

注意State类不要以下划线开头，保证对外可见：

class AElevatedButton extends StatefulWidget {
  const AElevatedButton({super.key});

  @override
  State<AElevatedButton> createState() => ElevatedButtonState();
}

// State类定义为公开（无下划线前缀）
class ElevatedButtonState extends State<AElevatedButton> {
  String buttonText = "Button";
  VoidCallback? _onPressed;

  void setText(String buttonText) {
    setState(() => this.buttonText = buttonText);
  }

  void setOnPressed(VoidCallback callback) {
    setState(() => _onPressed = callback);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(5),
      child: ElevatedButton(
        onPressed: _onPressed,
        child: Text(buttonText),
      ),
    );
  }
}

2. 父组件通过GlobalKey调用子组件方法 #

class _MyHomePageState extends State<MyHomePage> {
  // 创建GlobalKey关联子组件State
  final GlobalKey<ElevatedButtonState> firstButtonKey = GlobalKey();
  final GlobalKey<ElevatedButtonState> secondButtonKey = GlobalKey();

  @override
  void initState() {
    super.initState();
    // 等待组件渲染完成后调用方法
    WidgetsBinding.instance.addPostFrameCallback((_) {
      firstButtonKey.currentState?.setText("Button 1");
      firstButtonKey.currentState?.setOnPressed(() => debugPrint("点击了按钮1"));
      secondButtonKey.currentState?.setText("Button 2");
      secondButtonKey.currentState?.setOnPressed(() => debugPrint("点击了按钮2"));
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Test Buttons")),
      body: Column(
        children: <Widget>[
          AElevatedButton(key: firstButtonKey),
          AElevatedButton(key: secondButtonKey),
        ],
      ),
    );
  }
}

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