将状态传递给子组件

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

应用由许多组件组成，小组件往往需要一个由较大组件持有的值。这里，分数保存在页面的 State 中，但显示分数的计分板本身也是一个组件。

要把值传给子组件，请给它一个 final 字段，并在构造函数中要求传入这个值：

class ScoreBoard extends StatelessWidget {
  const ScoreBoard({super.key, required this.score});

  final int score;

  @override
  Widget build(BuildContext context) {
    return Text('Score: $score');
  }
}

父组件每次构建子组件时，都会传入自己的值：ScoreBoard(score: score)。父组件调用 setState 时，会再次构建，计分板也会获得新的分数。

子组件不会更改这个值。它只显示收到的值，而分数仍由父组件持有。

挑战

简单

+1 按钮会增加分数，但记分板始终显示 Score: 0。

为 ScoreBoard 添加一个 final int score 字段，并由它的构造函数设置。
将文本设为 Score: ，后面跟上该分数。
页面构建记分板时，传入页面的 score。

亲手试试

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: [
            const ScoreBoard(),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  score++;
                });
              },
              child: const Text('+1'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const Text('Score: 0', style: TextStyle(fontSize: 32));
  }
}

自我测试

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

自己练习： Flutter 在线编译器

将状态传递给子组件

状态管理中的所有课