W tym artykule pokażę, jaka jest różnica między widżetem stanowym a bezstanowym. Jak wiecie we Flutterze wszystkie komponenty UI są znane jako widżety. Widżet zawierający kod dla pojedynczego ekranu aplikacji może mieć tylko dwa typy — stanowy (ang. Stateful) oraz bezstanowy (ang. Stateless ).
Stateless Widgets
Widżety bezstanowe to widżety, których stanu nie można zmienić po ich zbudowaniu, nie posiadają żadnych stanów, jest jeden konkretny widok i nie ulega on zmianie. Te widżety są niezmienne, tj. żadna zmiana w zmiennych, ikonach, przyciskach lub pobieraniu danych nie może zmienić stanu aplikacji. Zmienna final reprezentowana jest przez Stateless Widgets. Struktura widżetu bezstanowego wygląda tak:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container();
}
}Nazwa tego bezstanowego widżetu to „MyApp”, wewnątrz którego musimy nadpisać metodę „build”. Ta metoda budowania przyjmuje „BuildContext” jako parametr i zwraca widżet. I to jest miejsce, w którym można zaprojektować interfejs użytkownika tego ekranu, który jest bezstanowy. W widżecie bezstanowym - Stateless metodę „build” można wywołać tylko RAZ, gdy aplikacja jest w akcji, co odpowiada za rysowanie widżetów na ekranie urządzenia. Jeśli chcesz przerysować widżet bezstanowy, musisz utworzyć nową instancję widżetu.
WSKAZÓWKA: Możesz szybko zbudować widżet bezstanowy w VS Code lub Android Studio, używając skrótu „stl”.
Oto kilka przykładów widżetów bezstanowych:
Text,
Icon,
IconButton,
Container.
Stateful Widgets
Widżety, których stan można zmienić po ich zbudowaniu, są nazywane widżetami stanowymi. Stany te są zmienne i mogą być zmieniane wielokrotnie. Oznacza to po prostu, że stan aplikacji może zmieniać się wielokrotnie przy różnych zestawach zmiennych i danych. Zmienna var reprezentowana jest przez Stateful Widget.
Struktura widżetu Stateful wygląda tak:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Container();
}
}Nazwa widżetu to ponownie „MyApp”, ale teraz zastępuje on metodę „createState” zamiast metody „build”, która zwraca instancję klasy „_MyAppState”. Klasa „_MyAppState” rozciąga się od State<>, która przyjmuje „MyApp” jako dane wejściowe szablonu. Teraz ten „_MyAppState” zastępuje metodę „build” i zwraca widżet. Tutaj możesz zdefiniować interfejs użytkownika aplikacji, który jest stanowy. Ponieważ jest to widżet Stateful, możesz wywołać metodę budowania dowolną liczbę razy, co spowoduje przerysowanie widżetów na ekranie.
Jak więc wywołać metodę budowania? To naprawdę proste, możesz użyć metody „setState”, aby wywołać metodę „build", która z kolei przerysuje widżety. Jest to najważniejsza metoda, której będziesz musiał użyć z dowolnym widżetem Stateful, aby wykorzystać stan widżetu. WSKAZÓWKA: Możesz szybko zbudować Stateful Widget w VS Code lub Android Studio, używając skrótu „stf”. Oto kilka przykładów widżetów Stateful:
CheckBox,
Slider,
InkWell,
TextField.
PODSUMOWANIE:
Stateless Widget:
Są to statyczne widżety, są aktualizowane tylko po zainicjowaniu,
Nie zależy od zmian danych ani zmian zachowania,
Nie zawiera setState(),
Nie można go zaktualizować w czasie działania aplikacji.
Stateful Widget:
Mają dynamiczny charakter,
Jest zależny i zmienia się, gdy użytkownik wchodzi w interakcję,
Posiada wewnętrzną funkcję setState(),
Można go aktualizować w czasie wykonywania.
Doszliśmy do końca tego krótkiego artykułu. Mam nadzieję, że wszyscy zapoznaliście się z podstawowymi informacjami na temat widżetów stanowych i bezstanowych oraz różnic między nimi. Te koncepcje byłyby bardziej zrozumiałe, jeśli samodzielnie wykonasz niektóre projekty i poczujesz, jak aplikacja obsługuje stan.
Comments