Flutter创建带动态onPressed的自定义按钮时未点击自动跳转问题

你的代码存在3个核心错误，直接导致页面加载就自动跳转、点击按钮无响应：

• 给directTo传参时直接写入了Future.delayed(...)的执行结果，这部分代码会在组件初始化、build渲染阶段立刻执行，完全不会等待点击事件触发，这就是页面一加载就自动跳转的根本原因。
• 自定义按钮的onPressed回调中仅写了directTo;，这行代码只是单纯引用了变量，没有做任何执行操作，就算参数传递正确，点击按钮也不会触发任何逻辑。
• 参数类型设计错误：你定义的Future<dynamic>? directTo只能存储一个已经创建完成的Future实例，根本无法承载「点击后才触发执行」的按钮交互逻辑，从设计上就不符合按钮回调的使用要求。

1. 重构自定义按钮组件的参数定义，删除原有的directTo参数，替换为点击触发的回调类型，同时修正按钮内部的事件绑定逻辑：

class RunderKreis extends StatelessWidget {
  final DecorationImage? image;
  final double size;
  final Color? color;
  final IconData? icon;
  final Color? onPrimaryColors;
  // 定义点击回调，存储待执行的函数而非提前执行的结果
  final void Function()? onTap;

  RunderKreis({
    Key? key,
    this.color = const Color.fromARGB(255, 95, 81, 136),
    this.size = 90,
    this.icon,
    this.onPrimaryColors,
    this.image,
    this.onTap,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: size,
      width: size,
      child: ElevatedButton(
        // 直接绑定回调，空安全下如果onTap为null按钮会自动置为不可点击状态
        onPressed: onTap,
        child: Icon(icon),
      ),
    );
  }
}

2. 调整组件调用方式，把每个按钮的业务逻辑包裹在匿名函数中传递给onTap参数，不要直接写入执行后的结果：

// 第一个按钮
RunderKreis(
  icon: FeatherIcons.pieChart,
  onPrimaryColors: AppColors.backColor,
  onTap: () {
    // 这里的逻辑只会在点击按钮时执行
    Future.delayed(const Duration(seconds: 1),(){
      Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => const Steckbrief()),
      );
    });
  },
),
// 第二个按钮
RunderKreis(
  // 传入对应图标、颜色等参数
  onTap: () {
    // 写第二个按钮独立的业务逻辑
  },
),
// 第三个按钮
RunderKreis(
  // 传入对应图标、颜色等参数
  onTap: () {
    // 写第三个按钮独立的业务逻辑
  },
),

小提示：如果你需要统一配置所有按钮的点击水波纹效果、圆角、样式，直接在RunderKreis组件内部给ElevatedButton配置style属性即可，所有复用该组件的按钮都会统一生效，不需要单独配置。

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