Hot Reload zachowuje stan

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

Podgląd umożliwia wprowadzenie zmian na dwa sposoby. Uruchom uruchamia aplikację od nowa. Hot reload wczytuje nowy kod, gdy aplikacja nadal działa, i zachowuje stan: licznik nadal wskazuje tę samą liczbę.

Spróbuj: naciśnij kilka razy przycisk plusa, zmień kolor liczby i naciśnij Hot reload. Pojawi się nowy kolor, a licznik nadal będzie wskazywał tę samą wartość. Podczas stylizowania ekranu nie musisz dzięki temu ponownie przeklikiwać się do miejsca, w którym byłeś.

Hot reload ponownie buduje ekran z nowym kodem, ale nie tworzy nowego stanu. Dlatego zmiana wartości początkowej, na przykład z int _count = 0; na int _count = 10;, nie będzie widoczna: ten wiersz jest wykonywany tylko podczas tworzenia stanu. Naciśnij Uruchom, aby to zobaczyć.

To samo dotyczy main oraz zmiany StatelessWidget na StatefulWidget. Jeśli po Hot reload zmiana nie jest widoczna, naciśnij Uruchom.

Wyzwanie

Łatwy

Ustaw rozmiar liczby na 64 i kolor na Colors.deepPurple. Najpierw naciśnij kilka razy przycisk plusa, a następnie użyj funkcji Hot reload i zobacz, że licznik pozostaje bez zmian.
Ustaw początkową wartość licznika na 10. Zauważ, że Hot reload jej nie wyświetla, a Run tak.

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;

  void _increase() {
    setState(() {
      _count++;
    });
  }

  void _decrease() {
    setState(() {
      _count--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Counter')),
      body: Center(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            IconButton(icon: Icon(Icons.remove), onPressed: _decrease),
            Text('$_count', style: TextStyle(fontSize: 48)),
            IconButton(icon: Icon(Icons.add), onPressed: _increase),
          ],
        ),
      ),
    );
  }
}