Dart中如何将final函数变量绑定到TextButton的onPressed方法？

你在开发中定义了无状态组件RoundedButton，声明了final Function类型的press变量，尝试将其赋值给TextButton的onPressed方法，但直接写入未生效。你的代码如下：

import 'package:flutter/material.dart';
import 'package:take3/constants.dart';
import 'package:take3/screens/login/login_screen.dart';
import 'package:take3/screens/signup/signup_screen.dart';

class RoundedButton extends StatelessWidget {
  final String text;
  final Function press; // this is the variable!!!
  final Color color, textColor;
  const RoundedButton({
    super.key,
    required this.text,
    required this.press,
    this.color = kPrimaryColor,
    this.textColor = Colors.white,
  });

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      width: size.width * 0.8,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(29),
        child: TextButton(
          style: TextButton.styleFrom(
            backgroundColor: color,
            padding: EdgeInsets.symmetric(vertical: 20, horizontal: 40),
          ),
          onPressed: (press) {} // here is the issue!!!
          child: Text(
            text,
            style: TextStyle(color: textColor),
          ),
        ),
      ),
    );
  }
}

问题原因 #

当前onPressed的写法(press) {}是重新定义了一个名为press的参数，并创建了空函数，完全没有调用组件传入的this.press变量。此外，Function类型过于宽泛，易出现类型不匹配问题，Flutter官方推荐使用VoidCallback类型（对应无参数、无返回值的函数）。

正确写法 #

步骤1：修正函数类型声明 #

将press的类型从Function改为VoidCallback（或Function()，两者等价），明确函数签名。

步骤2：正确绑定onPressed #

直接将onPressed赋值为组件的press变量，无需额外包裹空函数。

完整正确代码：

import 'package:flutter/material.dart';
import 'package:take3/constants.dart';
import 'package:take3/screens/login/login_screen.dart';
import 'package:take3/screens/signup/signup_screen.dart';

class RoundedButton extends StatelessWidget {
  final String text;
  final VoidCallback press; // 改为VoidCallback类型
  final Color color, textColor;
  const RoundedButton({
    super.key,
    required this.text,
    required this.press,
    this.color = kPrimaryColor,
    this.textColor = Colors.white,
  });

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      width: size.width * 0.8,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(29),
        child: TextButton(
          style: TextButton.styleFrom(
            backgroundColor: color,
            padding: EdgeInsets.symmetric(vertical: 20, horizontal: 40),
          ),
          onPressed: press, // 直接绑定组件的press变量
          child: Text(
            text,
            style: TextStyle(color: textColor),
          ),
        ),
      ),
    );
  }
}

扩展：如果press需要接收参数 #

若你的press函数需要传递参数（如字符串、数值），可将类型改为对应签名，并用匿名函数包裹调用：

// 示例：press接收String类型参数
final Function(String) press;

// onPressed绑定方式
onPressed: () => press("需要传递的参数"),

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