Flutter中ElevatedButton的onPressed传入自定义函数不执行问题

我封装了一个可复用的BlackButton组件，当为其传入导航类函数时可以正常执行，但在有状态父组件中传入自定义createOffer()函数时，该函数完全无法触发（无任何打印输出）。

可正常执行的调用示例 #

BlackButton(
  text: 'Create offer',
  onPressed: () => Navigator.pushNamed(context, 'createOfferFighter'), // 此调用正常工作
),

无法执行的调用示例（位于有状态父组件中） #

BlackRoundedButton( // 此处组件名存在错误
  isLoading: false, // 原代码缺少逗号，且BlackButton未定义该参数
  text: submitButton,
  onPressed: () => createOffer() // 无打印输出
),

父组件中自定义createOffer()函数 #

void createOffer() {
  print('casfas');
}

可复用BlackButton组件代码 #

class BlackButton extends StatelessWidget {
  final Function onPressed; // 类型定义不够严谨
  final String text;

  const BlackButton({Key? key, required this.onPressed, required this.text})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 230,
      height: 60,
      child: Container(
        decoration: BoxDecoration(boxShadow: [containerShadowRed]),
        child: ElevatedButton(
            style: ButtonStyle(
              backgroundColor: const MaterialStatePropertyAll(Colors.black),
              shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                const RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                ),
              ),
            ),
            onPressed: () => onPressed(),
            child: Text(
              text,
              style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
            )),
      ),
    );
  }
}

解决方案 #

1. 修正组件调用的错误 #

• 组件名修正：将BlackRoundedButton改为你封装的BlackButton
• 移除多余参数：BlackButton未定义isLoading参数，需删除该行；若需要该功能请扩展组件定义
• 修复语法错误：确保参数间逗号完整，原代码中isLoading: false后缺少逗号会导致编译失败

修正后的调用代码：

BlackButton(
  text: submitButton,
  onPressed: () => createOffer(),
),

2. 严谨定义组件的onPressed类型 #

Flutter中按钮onPressed的标准类型是VoidCallback（即void Function()），将组件中的onPressed类型从泛型Function改为具体的VoidCallback，避免类型不匹配的潜在问题：

class BlackButton extends StatelessWidget {
  final VoidCallback onPressed; // 改为VoidCallback类型
  final String text;

  const BlackButton({Key? key, required this.onPressed, required this.text})
      : super(key: key);

  // ... 其余代码保持不变
}

3. 简化函数传递方式 #

由于createOffer()是无参无返回值的函数，可直接传递函数引用，无需包裹箭头函数：

BlackButton(
  text: submitButton,
  onPressed: createOffer, // 直接传递函数引用
),

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