Przenoszenie stanu w górę

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

Dotknij kciuka na telefonie: liczba obok niego rośnie, ale na górnym pasku nadal widnieje 0 likes. Przycisk przechowuje swój licznik we własnym stanie State i nic poza nim nie ma do niego dostępu.

Gdy dwa widżety potrzebują tej samej wartości, przenieś ją do najbliższego widżetu, który obejmuje je oba. Nazywa się to przenoszeniem stanu w górę. Strona przechowuje likes, a przycisk staje się widżetem StatelessWidget, który otrzymuje wartość i funkcję zwrotną:

LikeButton(
  likes: likes,
  onLike: () {
    setState(() {
      likes++;
    });
  },
)

Teraz jest jeden licznik w jednym miejscu. Górny pasek, przycisk i przycisk resetowania odczytują tę samą wartość i ją zmieniają, więc nigdy nie będą się ze sobą różnić.

Szybki test: jeśli wartość jest wyświetlana lub zmieniana w dwóch miejscach, widżet, który ją przechowuje, musi znajdować się nad nimi oboma.

Wyzwanie

Średni

Ustaw stronę jako jedynego właściciela liczby polubień:

Zmień LikeButton w StatelessWidget z dwoma polami: likes i wywołaniem zwrotnym onLike.
Strona przekazuje własne likes oraz onLike, które zwiększa wartość o 1 wewnątrz setState.

Wtedy górny pasek będzie odzwierciedlał stan przycisku, a przycisk odświeżania zresetuje oba.

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 likes = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('$likes likes'),
        actions: [
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: () {
              setState(() {
                likes = 0;
              });
            },
          ),
        ],
      ),
      body: const Center(
        child: LikeButton(),
      ),
    );
  }
}

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

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  int likes = 0;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(
          icon: const Icon(Icons.thumb_up),
          iconSize: 40,
          onPressed: () {
            setState(() {
              likes++;
            });
          },
        ),
        Text('$likes', style: const TextStyle(fontSize: 32)),
      ],
    );
  }
}