使用动态onPressed颤振创建新的按钮小部件

Question

我有一个带有onPressed函数的按钮小部件。现在，我想使用这个小部件来创建多个按钮，但当然也需要使用另一个函数来运行。

新的按钮小部件：

class RunderKreis extends StatelessWidget {
  final DecorationImage? image;
  final double size;
  Color? color;
  IconData? icon;
  Color? onPrimaryColors;
  Future<dynamic>? directTo;
  RunderKreis({
    Key? key,
    this.color = const Color.fromARGB(255, 95, 81, 136),
    this.size = 90,
    this.icon,
    this.onPrimaryColors,
    this.image,
    this.directTo,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: size,
      width: size,
      child: ElevatedButton(
        onPressed: () {
              directTo;
        },
        child: Icon(icon),
      ),
    );
  }
}

使用它：

RunderKreis(
                        icon: FeatherIcons.pieChart,
                        onPrimaryColors: AppColors.backColor,
                         directTo:  Future.delayed(Duration(seconds: 1),(){
                       Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => const Steckbrief()),
                      );}),
                      ),
RunderKreis(...),
RunderKreis(...),

现在我使用了3个按钮，但是我立即被重定向到使用第一个onPressed函数导航到的页面，而没有按a按钮:(我是不是以错误的方式实现了什么？

提前感谢！

Answer 1

我更喜欢这种款式。

 child: ElevatedButton(
        onPressed:directTo,
        child: Icon(icon),
      ),

用例将是

 directTo: () async {
await Future.delayed(Duration(seconds: 1), () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const Steckbrief()),
  );
});

您可以将VoidCallback用于tap事件。

class RunderKreis extends StatelessWidget {
  final DecorationImage? image;
  final double size;
  Color? color;
  IconData? icon;
  Color? onPrimaryColors;
  VoidCallback? 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(
        onPressed: onTap,
        child: Icon(icon),
      ),
    );
  }
}

和使用

RunderKreis(
  onTap: () async {},
),
RunderKreis(
  onTap: () {},
),