How to pass callback in Flutter

在Flutter中，传递回调函数是一种常见的做法，用于在组件之间传递和接收事件或数据。回调使得父组件能够将某些操作委托给子组件，而子组件完成操作后可以通知并提供反馈给父组件。下面我将通过一个简单的例子来说明如何在Flutter中传递回调。

步骤 1: 定义子组件

首先，我们定义一个名为 MyButton 的子组件，它接收一个回调函数 onPressed 作为参数，这个回调函数将在按钮被点击时触发。

dart
import 'package:flutter/material.dart';

class MyButton extends StatelessWidget {
  final VoidCallback onPressed;

  MyButton({required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text('Click Me!'),
    );
  }
}

步骤 2: 在父组件中使用子组件

接下来，在父组件中使用 MyButton，并传递一个回调函数。这个回调函数定义了当按钮被点击时父组件应该执行的操作。

dart
import 'package:flutter/material.dart';
import 'my_button.dart';  // 确保导入了MyButton组件

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Callback Example'),
      ),
      body: Center(
        child: MyButton(
          onPressed: () {
            print('Button was clicked!');
          },
        ),
      ),
    );
  }
}

例子解析

在这个例子中，MyButton 是一个简单的自定义按钮组件，它有一个必须的参数 onPressed。这个参数是一个类型为 VoidCallback 的回调函数，当按钮被点击时，这个函数会被调用。

在 HomePage 组件中，我们使用了 MyButton。我们传递了一个匿名函数作为 onPressed 参数，当按钮被点击时，这个匿名函数会执行，并在控制台中打印出消息。

总结

通过这种方式，Flutter允许组件间的通信变得非常灵活和动态。回调不仅限于简单的打印操作，它可以用来修改状态、请求数据、处理表单提交等等。使用回调函数是组件间解耦的一种有效手段。