自定义Flutter ElevatedButton问题：回调参数变为Closure无法调用？

问题描述 #

想要实现一个自定义ElevatedButton组件，支持两种构造方式：

• 传入一个页面组件，点击按钮自动通过Navigator跳转
• 传入自定义回调函数，完全覆盖按钮的点击逻辑

但使用回调构造函数时功能失效，调试发现onPressed变量是Closure对象，没有执行预期的回调。原代码如下：

import 'package:flutter/material.dart';

// ignore: must_be_immutable
class OrdinaryButton extends StatelessWidget {
  final String? text;
  Widget? goto;
  late Function()? onPressed;

  OrdinaryButton({this.text, this.goto});

  OrdinaryButton.overrideOnPressed({this.text, required this.onPressed})
  {
    this.goto = null;
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
              child: Text("$text"),
              onPressed: () {
                if(goto != null)
                {
                  print("LOG: opening a new page...");
                  Navigator.push(context, MaterialPageRoute(builder: (context) => goto!));
                }
                else if(this.onPressed != null)
                {
                  print("LOG: calling a custom function...");
                  this.onPressed; // This has the 'Closure' object instead of my callback.
                }
              },
            );
  }
}

错误原因及修复方案 #

1. 核心错误：未执行回调函数 #

你只是引用了this.onPressed变量，没有调用这个函数。Closure是Dart中函数对象的类型，必须通过()来执行它。

2. 变量设计不符合StatelessWidget规范 #

StatelessWidget的成员变量应该是不可变的（用final修饰），你使用了可变的goto和late修饰的onPressed，容易引发初始化问题和状态不一致。

修正后的代码 #

import 'package:flutter/material.dart';

class OrdinaryButton extends StatelessWidget {
  final String? text;
  final Widget? goto;
  final VoidCallback? onPressed;

  // 构造函数1：传入跳转页面
  OrdinaryButton({this.text, this.goto}) : onPressed = null;

  // 构造函数2：传入自定义回调
  OrdinaryButton.overrideOnPressed({this.text, required this.onPressed}) : goto = null;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Text(text ?? ''),
      onPressed: () {
        if (goto != null) {
          print("LOG: opening a new page...");
          Navigator.push(context, MaterialPageRoute(builder: (context) => goto!));
        } else if (onPressed != null) {
          print("LOG: calling a custom function...");
          onPressed!(); // 调用回调函数
        }
      },
    );
  }
}

关键修改点 #

• 将goto和onPressed改为final，符合StatelessWidget不可变的设计原则，去掉了must_be_immutable的忽略
• 在回调分支中，将this.onPressed改为onPressed!()，执行回调函数
• 通过构造函数初始化列表明确两种构造场景下的变量值，避免初始化混乱

更简洁的优化方案 #

可以直接在构造函数中处理点击逻辑，减少build方法里的判断：

import 'package:flutter/material.dart';

class OrdinaryButton extends StatelessWidget {
  final String? text;
  final void Function(BuildContext) onPressed;

  // 构造函数1：传入跳转页面，自动生成跳转逻辑
  OrdinaryButton({
    this.text,
    required Widget goto,
  }) : onPressed = (context) {
          Navigator.push(context, MaterialPageRoute(builder: (_) => goto));
        };

  // 构造函数2：传入自定义回调
  OrdinaryButton.overrideOnPressed({
    this.text,
    required void Function(BuildContext) this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      child: Text(text ?? ''),
      onPressed: () => onPressed(context),
    );
  }
}

这样build方法更简洁，逻辑更清晰，同时保持了两种构造方式的灵活性。

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