Przekazywanie stanu do komponentu potomnego

Część sekcji Zarządzanie stanem ścieżki Flutter w Coddy. Lekcja 1 z 27.

Aplikacja składa się z wielu widżetów, a mały widżet często potrzebuje wartości, której właścicielem jest większy widżet. Tutaj wynik znajduje się w State strony, ale tablica, która go wyświetla, jest osobnym widżetem.

Aby przekazać wartość w dół, dodaj do widżetu podrzędnego pole final i zażądaj tej wartości w konstruktorze:

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

  final int score;

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

Widżet nadrzędny przekazuje swoją wartość za każdym razem, gdy buduje widżet podrzędny: ScoreBoard(score: score). Gdy widżet nadrzędny wywołuje setState, buduje się ponownie, a tablica otrzymuje nową liczbę.

Widżet podrzędny nigdy nie zmienia tej wartości. Wyświetla to, co otrzymał, a właścicielem wyniku pozostaje widżet nadrzędny.

Wyzwanie

Łatwy

Przycisk +1 zlicza punkty, ale tablica zawsze pokazuje Score: 0.

Dodaj do ScoreBoard pole final int score, ustawiane przez jego konstruktor.
Ustaw jego tekst na Score: , po którym następuje ta wartość.
Przekaż score strony podczas tworzenia przez nią tablicy.

Spróbuj swoich sił

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));
  }
}