将回调传递给子组件

本课属于 Coddy Flutter 学习旅程的“状态管理”单元。第 2 课，共 27 课。

值从父级传到子级。点击则反过来：按钮在子级中，但它改变的分数属于父级。

父级把一个函数交给子级，然后由子级调用它。没有参数且不返回任何内容的函数，其类型是 VoidCallback：

class AddButton extends StatelessWidget {
  const AddButton({super.key, required this.onAdd});

  final VoidCallback onAdd;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(onPressed: onAdd, child: Text('Add point'));
  }
}

父级像往常一样用 setState 编写点击后要执行的操作：

AddButton(
  onAdd: () {
    setState(() {
      score++;
    });
  },
)

写 onPressed: onAdd，不要写 onAdd()。第一种写法会把函数交给按钮，供之后调用。第二种写法会在构建时立即调用函数，并传递它的返回值。

挑战

简单

Add point 按钮位于 AddButton 组件中，目前还没有任何作用。

为 AddButton 添加一个 final VoidCallback onAdd 字段，并在构造函数中设置它。
将它用作按钮的 onPressed。
在页面中，传入一个在 setState 中将 score 增加 1 的函数。

亲手试试

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int score = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Score: $score', style: const TextStyle(fontSize: 32)),
            const SizedBox(height: 16),
            const AddButton(),
          ],
        ),
      ),
    );
  }
}

class AddButton extends StatelessWidget {
  const AddButton({super.key});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: const Text('Add point'),
    );
  }
}

自我测试

这节课包含一个小测验。开始学习即可作答，并记录你的进度。

自己练习： Flutter 在线编译器

将回调传递给子组件

状态管理中的所有课