将 Navigator 函数（任何回调）传递给 StatelessWidget 以在 onPressed 中使用它

Question

我缺乏 Flutter 经验，无法理解如何将回调函数传递给 Widget：

自定义按钮：

class IconButtonWidget extends StatelessWidget {

  final Future<void> callback;
  const IconButtonWidget({Key? key, required this.callback}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextButton.icon(
      icon: const Icon(
        Icons.add_alarm,
        size: 30,
      ),
      label: const Text(
        'New alarm',
        style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 20,
            letterSpacing: 1.0),
      ),
      onPressed: () async {
        await callback;
      },
    );
  }
}

我有一个使用它的简单主屏幕（请参阅注释掉的行）：

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: const <Widget>[
          Center(
            child: IconButtonWidget(
              // callback: () {Navigator.pushNamed(context, '/alarms');},
            ),
          ),
          SizedBox(
            height: 20.0,
          ),
        ],
      )),
    );
  }
}

我想向 Widget 传递一个函数，但不明白我该怎么做。

以前是这样用的（之前我把widget单独分开class）

                child: TextButton.icon(
                  icon: const Icon(
                    Icons.add_alarm,
                    size: 30,
                    // color: Colors.teal,
                  ),
                  label: const Text(
                    'New alarm',
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 20,
                        letterSpacing: 1.0),
                  ),
                  onPressed: () async {
                    dynamic result =
                    await Navigator.pushNamed(context, '/alarms');
                  },
                ),
              ),

Answer 1

请参考以下代码


import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: IconButtonWidget(callback: () async {
            print("Call back Function");
          }),
        ),
      ),
    );
  }
}

class IconButtonWidget extends StatelessWidget {
  final Function callback;
  const IconButtonWidget({Key? key, required this.callback}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextButton.icon(
      icon: const Icon(
        Icons.add_alarm,
        size: 30,
      ),
      label: const Text(
        'New alarm',
        style: TextStyle(
            fontWeight: FontWeight.bold, fontSize: 20, letterSpacing: 1.0),
      ),
      onPressed: () {
        callback();
      },
    );
  }
}

Answer 2

class IconButtonWidget extends StatelessWidget {

  final VoidCallback onPressed;
  const IconButtonWidget({Key? key, required this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextButton.icon(
      icon: const Icon(
        Icons.add_alarm,
        size: 30,
      ),
      label: const Text(
        'New alarm',
        style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 20,
            letterSpacing: 1.0),
      ),
      onPressed: onPressed,
    );
  }
}

.........

Center(
   child: IconButtonWidget(
     onPressed: () async {
        dynamic result =
                await Navigator.pushNamed(context, '/alarms');
     },
   ),
),

.........

将 Navigator 函数（任何回调）传递给 StatelessWidget 以在 onPressed 中使用它

Pass Navigator function (any callback) to a StatelessWidget to use it in onPressed

routes

widget

dart

flutter