setState ponownie rysuje ekran

Część sekcji Dodajemy interaktywność ścieżki Flutter w Coddy. Lekcja 11 z 34.

Naciśnij Dodaj jeden w tej aplikacji i obserwuj konsolę: 1, 2, 3. Liczba na ekranie pozostaje równa 0. Flutter zbudował ekran raz i nic nie kazało mu zbudować go ponownie.

StatelessWidget nigdy się nie zmienia. Ekran, który się zmienia, to StatefulWidget, zapisany jako dwie klasy:

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

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

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

  @override
  Widget build(BuildContext context) {
    return Text('$_count');
  }
}

HomePage określa tylko, jaki State utworzyć (createState, zapisane w formie strzałkowej opisanej w sekcji Funkcje zwracające wartości). _HomePageState wykonuje pracę: przechowuje dane ekranu w zmiennych u góry, takich jak _count, i buduje ekran. Istnieje tak długo jak ekran, więc _count zachowuje swoją wartość między kolejnymi przebudowaniami.

Aby zmienić ekran, zmień dane wewnątrz setState. Informuje ono Fluttera: „to się zmieniło, zbuduj ekran ponownie”, a Text wyświetla nową liczbę:

setState(() {
  _count = _count + 1;
});

Podkreślenie na początku nazw _HomePageState i _count sprawia, że są one prywatne: może ich używać tylko ten plik. Klasy stanu i ich zmienne zwykle mają takie podkreślenie.

Wyzwanie

Średni

Spraw, aby liczba na ekranie zwiększała się o jeden przy każdym naciśnięciu Add one: umieść zmianę _count wewnątrz setState.

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 MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('$_count', style: TextStyle(fontSize: 48)),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                _count = _count + 1;
                print(_count);
              },
              child: Text('Add one'),
            ),
          ],
        ),
      ),
    );
  }
}