Jaka jest relacja między widgetami stanowymi i bezstanowymi we Flutterze?

Widżet stanowy jest definiowany jako dowolny widget, który zmienia swój stan w trakcie swojego istnienia. Ale to jest bardzo powszechną praktyką, StatelessWidgetże a StatefulWidgetjako jedno ze swoich dzieci. Nie StatelessWidgetstaje się stanowy, jeśli jest StatefulWidgetjednym ze swoich dzieci?

Próbowałem zajrzeć do dokumentacji jako części kodu StatelessWidget, ale nie mogłem dowiedzieć się, jak StatelessWidgetmoże mieć Statefulwidgetjako dzieci i nadal pozostać StatelessWidget.

Jaka jest relacja i różnica między widżetami stanowymi i bezstanowymi w Flutterze?

StatelessWidget nigdy nie odbudować sama (ale może ze zdarzeń zewnętrznych). StatefulWidget możliwe. To jest złota zasada.

ALE każdy rodzaj widżetu można przemalować w dowolnym momencie.

Bezstanowy oznacza jedynie, że wszystkie jego właściwości są niezmienne i jedynym sposobem ich zmiany jest utworzenie nowej instancji tego widżetu. Nie blokuje np. Drzewa widżetów.

Ale nie powinieneś przejmować się typem twoich dzieci. Nie ma to na ciebie żadnego wpływu.

StatefulWidget vs StatelessWidget.

StatelessWidget - widget, który nie wymaga zmiany stanu.

• Bezstanowy widget to widget, który opisuje część interfejsu użytkownika, tworząc konstelację innych widgetów, które opisują interfejs użytkownika bardziej konkretnie. Proces budowania jest kontynuowany rekurencyjnie, aż opis interfejsu użytkownika jest w pełni konkretny (np. Składa się w całości z RenderObjectWidgets, które opisują konkretne RenderObjects).

• statelessWidget jest przydatna, gdy część użytkownikowi interfejs ty opisujesz nie zależy od niczego innego niż informacji konfiguracyjnych w samym obiekcie i BuildContext w którym widget jest zawyżone. W przypadku kompozycji, które mogą zmieniać się dynamicznie, np. Z powodu wewnętrznego stanu sterowanego zegarem lub w zależności od stanu systemu, rozważ użycie StatefulWidget.

class GreenFrog extends StatelessWidget {
  const GreenFrog({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(color: const Color(0xFF2DBD3A));
  }
}

StatefulWidget - widget, który ma zmienny stan.

• Widgety stanowe są przydatne, gdy opisywana część interfejsu użytkownika może zmieniać się dynamicznie.

Kiedy Flutter buduje obiekt StatefulWidget, tworzy obiekt State. Ten obiekt jest miejscem, w którym przechowywany jest cały zmienny stan tego widżetu.

Pojęcie stanu definiują dwie rzeczy:

1) Dane używane przez widżet mogą ulec zmianie.

2) Dane nie mogą być odczytywane synchronicznie podczas budowania widgetu. (Cały stan musi zostać ustalony przed wywołaniem metody kompilacji).

Cykl życia StatefulWidget

Cykl życia składa się z następujących uproszczonych kroków:

1. createState () - Gdy Flutter otrzymuje polecenie zbudowania StatefulWidget, natychmiast wywołuje createState().

• Tworzy zmienny stan dla tego widżetu w podanej lokalizacji w drzewie.

• Podklasy powinny przesłonić tę metodę, aby zwrócić nowo utworzone wystąpienie skojarzonej z nimi podklasy State:

@override
_MyState createState() => _MyState();

2. mount == true - Wszystkie widżety mają this.mountedwłaściwość bool . Okazuje się prawdą, gdy buildContextzostanie przypisany. Błędem jest wywołanie, setStategdy widget jest odmontowany. Czy ten obiekt State znajduje się obecnie w drzewie.

• Po utworzeniu obiektu State i przed wywołaniem initStatestruktura „montuje” obiekt State, kojarząc go z plikiem
  BuildContext. Obiekt State pozostaje zamontowany do momentu
  wywołania frameworka dispose(), po którym to czasie framework nigdy nie poprosi
  obiektu State o ponowne zbudowanie.

• Błędem jest wywoływanie setState, chyba że mount jest prawdziwe.

bool get mounted => _element != null;

3. initState () - jest to pierwsza metoda wywoływana podczas tworzenia widgetu (oczywiście po konstruktorze klasy).

initStatejest wywoływana raz i tylko raz. To musi zadzwonićsuper.initState().

• Zainicjuj dane, które zależą od określonego BuildContext dla utworzonego wystąpienia widżetu.

• Zainicjuj właściwości, które opierają się na „rodzicu” tych widżetów w drzewie.

• Zasubskrybuj strumienie ChangeNotifierslub dowolny inny obiekt, który może zmienić dane tego widżetu.

@override
initState() {
  super.initState();
  // Add listeners to this class
  cartItemStream.listen((data) {
    _updateWidget(data);
  });
}

4. didChangeDependencies () - wywoływana, gdy zmienia się zależność tego obiektu State.

• Ta metoda jest również wywoływana bezpośrednio po initState. Dzwonienie BuildContext.inheritFromWidgetOfExactTypez tej metody jest bezpieczne .

• Podklasy rzadko zastępują tę metodę, ponieważ struktura zawsze wywołuje kompilację po zmianie zależności. Niektóre podklasy zastępują tę metodę, ponieważ muszą wykonać pewną kosztowną pracę (np. Pobieranie z sieci), gdy zmieniają się ich zależności, a ta praca byłaby zbyt kosztowna dla każdej kompilacji.

@protected
@mustCallSuper
void didChangeDependencies() { }

5. build () - opisuje część interfejsu użytkownika reprezentowaną przez widżet.

Framework wywołuje tę metodę w wielu różnych sytuacjach:

• Po wezwaniu initState.
• Po wezwaniu didUpdateWidget.
• Po odebraniu telefonu setState.
• Po zmianie zależności tego obiektu State (np. InheritedWidget, do którego odwołują się poprzednie zmiany kompilacji).
• Po wywołaniu dezaktywuj, a następnie wstaw ponownie obiekt State do drzewa w innym miejscu.

• Struktura zastępuje poddrzewo poniżej tego widżetu widżetem zwróconym przez tę metodę, aktualizując istniejące poddrzewo lub usuwając poddrzewo i wypełniając nowe poddrzewo, w zależności od tego, czy widżet zwrócony przez tę metodę może zaktualizować katalog główny istniejącego poddrzewa , jak ustalono dzwoniąc Widget.canUpdate.

• Zazwyczaj implementacje zwracają nowo utworzoną konstelację widżetów, które są skonfigurowane przy użyciu informacji z konstruktora tego widgetu, danego elementu BuildContext oraz stanu wewnętrznego tego obiektu State.

@override
  Widget build(BuildContext context, MyButtonState state) {
    ... () { print("color: $color"); } ...
  }

6. didUpdateWidget () - wywoływana po każdej zmianie konfiguracji widżetu.

• Jeśli widget nadrzędny odbuduje się i zażąda, aby ta lokalizacja w drzewie zaktualizowała się w celu wyświetlenia nowego widgetu o tym samym typie środowiska wykonawczego i Widget.key, struktura zaktualizuje właściwość widgetu tego obiektu State, aby odwoływała się do nowego widgetu, a następnie wywoła to z poprzednim widżetem jako argumentem.

• Zastąp tę metodę, aby reagować na zmiany widżetu (np. Aby rozpocząć niejawne animacje).

• Framework zawsze wywołuje build po wywołaniu didUpdateWidget, co oznacza, że ​​wszelkie wywołania setState w didUpdateWidget są zbędne.

@mustCallSuper
@protected
void didUpdateWidget(covariant T oldWidget) { }

7. setState () - za każdym razem, gdy zmieniasz stan wewnętrzny obiektu State, wprowadź zmianę w funkcji, do której przekazujesz setState:

• Wywołanie setState powiadamia strukturę, że stan wewnętrzny tego obiektu zmienił się w sposób, który może wpłynąć na interfejs użytkownika w tym poddrzewie, co powoduje, że struktura planuje kompilację dla
  tego obiektu State.

• Jeśli po prostu zmienisz stan bezpośrednio bez wywoływania setState , struktura może nie zaplanować kompilacji, a interfejs użytkownika dla tego poddrzewa może nie zostać zaktualizowany w celu odzwierciedlenia nowego stanu.

setState(() { _myState = newValue });

8. dezaktywować () - Deactivate jest wywoływane, gdy stan zostanie usunięty z drzewa, ale może zostać ponownie wstawiony przed zakończeniem bieżącej zmiany ramki. Ta metoda istnieje w zasadzie, ponieważ obiekty State można przenosić z jednego punktu w drzewie do drugiego.

• Struktura wywołuje tę metodę za każdym razem, gdy usuwa ten obiekt State z drzewa. W niektórych przypadkach framework ponownie wstawi obiekt State do innej części drzewa (np. Jeśli poddrzewo zawierające ten obiekt State jest przeszczepione z jednego miejsca w drzewie do drugiego). Jeśli tak się stanie, framework zapewni, że wywoła build, aby dać obiektowi State szansę na dostosowanie się do nowej lokalizacji w drzewie. Jeśli struktura rzeczywiście wstawi to poddrzewo, zrobi to przed końcem klatki animacji, w której poddrzewo zostało usunięte z drzewa. Z tego powodu obiekty State mogą odroczyć zwolnienie większości zasobów, dopóki struktura nie wywoła ich metody dispose.

Jest to rzadko używane.

@protected
@mustCallSuper
void deactivate() { }

9. dispose () - wywoływana, gdy ten obiekt zostanie trwale usunięty z drzewa.

• Struktura wywołuje tę metodę, gdy ten obiekt State nigdy nie zostanie ponownie utworzony. Po wywołaniach dispose()struktury obiekt State jest uważany za odmontowany, a właściwość mount ma wartość false. W tym momencie wywołanie metody setState jest błędem. Ten etap cyklu życia jest ostateczny: nie ma możliwości ponownego zamontowania usuniętego obiektu State.

• Podklasy powinny przesłonić tę metodę, aby zwolnić wszelkie zasoby zachowane przez ten obiekt (np. Zatrzymać wszelkie aktywne animacje).

@protected
@mustCallSuper
void dispose() {
  assert(_debugLifecycleState == _StateLifecycle.ready);
  assert(() { _debugLifecycleState = _StateLifecycle.defunct; return true; }());
}

Więcej informacji można znaleźć tutaj , tutaj

Z dokumentacji na flutter.io :

... Ważną rzeczą, na którą należy zwrócić uwagę, jest to, że u podstaw zarówno widżetów bezstanowych, jak i stanowych zachowują się tak samo. Odbudowują każdą ramkę, różnica polega na tym, że StatefulWidget ma obiekt State, który przechowuje dane stanu między ramkami i przywraca je.

Jeśli masz wątpliwości, zawsze pamiętaj o następującej zasadzie: Jeśli widżet się zmieni (na przykład użytkownik wejdzie z nim w interakcję), jest stanowy. Jeśli jednak dziecko reaguje na zmianę, rodzic, który go zawiera, może nadal być widgetem bezstanu, jeśli rodzic nie reaguje na zmianę.

Jak wspomniano w flutter Docs

Jaki jest sens?

Niektóre widżety są stanowe, a inne bezstanowe. Jeśli widget się zmieni - na przykład użytkownik wejdzie z nim w interakcję - jest stanowy. Stan widżetu składa się z wartości, które mogą się zmieniać, takich jak bieżąca wartość suwaka lub zaznaczenie pola wyboru. Stan widgetu jest przechowywany w obiekcie State, oddzielając stan widgetu od jego wyglądu. Kiedy zmienia się stan widgetu, obiekt stanu wywołuje metodę setState (), informując platformę o konieczności ponownego narysowania widgetu.

Widget bezpaństwowcem ma stan wewnętrzny w zarządzaniu. Icon, IconButton i Text to przykłady bezstanowych widgetów, które stanowią podklasę StatelessWidget.

Stateful widget jest dynamiczna. Użytkownik może wchodzić w interakcje z widgetem stanowym (na przykład wpisując w formularzu lub przesuwając suwak) lub zmienia się on w czasie (być może źródło danych powoduje aktualizację interfejsu użytkownika). Checkbox, Radio, Slider, InkWell, Form i TextField to przykłady widgetów stanowych, które stanowią podklasę StatefulWidget.

https://flutter.io/tutorials/interactive/#stateful-stateless

Stan to informacja, która (1) może być odczytywana synchronicznie podczas budowania widgetu i (2) może się zmieniać w trakcie jego życia. Wdrażający widget jest odpowiedzialny za zapewnienie, że stan zostanie niezwłocznie powiadomiony o zmianie takiego stanu za pomocą funkcji State.setState.

StatefulWidget :

Widżet stanowy to widget, który opisuje część interfejsu użytkownika, tworząc konstelację innych widżetów, które bardziej konkretnie opisują interfejs użytkownika. Proces budowania jest kontynuowany rekurencyjnie, aż opis interfejsu użytkownika jest w pełni konkretny (np. Składa się w całości z RenderObjectWidgets, które opisują konkretne RenderObjects).

Widget pełnostanowy jest przydatny, gdy opisywana część interfejsu użytkownika może zmieniać się dynamicznie, np. Z powodu wewnętrznego stanu sterowanego zegarem lub w zależności od stanu systemu. W przypadku kompozycji, które zależą tylko od informacji konfiguracyjnych w samym obiekcie i BuildContext, w którym widżet jest zawyżony, rozważ użycie StatelessWidget.

Same instancje StatefulWidget są niezmienne i przechowują swój zmienny stan w oddzielnych obiektach State, które są tworzone przez metodę createState, lub w obiektach, które subskrybuje ten stan, na przykład obiekty Stream lub ChangeNotifier, do których odwołania są przechowywane w końcowych polach w StatefulWidget samo.

StatelessWidget :

Bezstanowy widget to widget, który opisuje część interfejsu użytkownika, tworząc konstelację innych widgetów, które opisują interfejs użytkownika bardziej konkretnie. Proces budowania jest kontynuowany rekurencyjnie, aż opis interfejsu użytkownika jest w pełni konkretny (np. Składa się w całości z RenderObjectWidgets, które opisują konkretne RenderObjects).

Widget bezstanowy jest przydatny, gdy opisywana część interfejsu użytkownika nie zależy od niczego innego niż informacje konfiguracyjne w samym obiekcie i BuildContext, w którym widżet jest zawyżony. W przypadku kompozycji, które mogą zmieniać się dynamicznie, np. Z powodu wewnętrznego stanu sterowanego zegarem lub w zależności od stanu systemu, należy rozważyć użycie StatefulWidget.

Widgety bezstanowe to widżety statyczne. Wystarczy przekazać kilka właściwości przed zainicjowaniem widgetów bezstanowych. Nie są zależne od żadnych zmian danych ani zmian zachowania. Na przykład. Text, Icon, RaisedButton to widżety bezstanowe.

Stateful Widgets to dynamiczne widżety, które można aktualizować w czasie wykonywania na podstawie działań użytkownika lub zmian danych. Jeśli widget może zmienić swój stan w czasie wykonywania, będzie to widget stanowy.

Edycja 15/11/2018

Widżety bezstanowe mogą być ponownie renderowane, jeśli zmieniły się dane wejściowe / zewnętrzne (dane zewnętrzne to dane przekazywane przez konstruktor). Ponieważ bezstanowe widżety nie mają stanu, zostaną wyrenderowane raz i nie zaktualizują się same, ale zostaną zaktualizowane tylko w przypadku zmiany danych zewnętrznych.

Natomiast Stateful Widgets mają stan wewnętrzny i mogą być ponownie renderowane, jeśli zmienią się dane wejściowe lub stan Widgetu ulegnie zmianie.

Zarówno widżety bezstanowe, jak i stanowe mają inny cykl życia.

Przychodzi mi do głowy bardzo prosta analogia. Masz jakiś mebel z książkami, dekoracjami i telewizorem. Meble są bezpaństwowe, nic się nie rusza. W telewizorze z drugiej strony można go włączać, wyłączać, zmieniać kanał, odtwarzać film, jeśli jest do niego dołączona płyta DVD itp. W telewizorze występuje stan wewnętrzny, który wpływa na sposób, w jaki się zachowuje. W meblach nie masz stanu. Obecność telewizora w meblu nie dodaje mu stanu. Mam nadzieję że to pomoże.

Odpowiedź na pytanie przepełnienia stosu - stanowość a bezpaństwowość .

We Flutterze różnica polega na tym, że bezstanowe widżety mogą być definiowane przez same argumenty konstruktora. Jeśli utworzysz dwa bezstanowe widgety przy użyciu tych samych argumentów, będą one takie same.

Jednak widget stanowy niekoniecznie jest tym samym, co inny widget zbudowany z tymi samymi argumentami konstruktora. Może być w innym stanie.
W rzeczywistości widget stanowy sam w sobie jest niezmienny (bezstanowy), ale Flutter zarządza oddzielnym obiektem stanu i kojarzy go z widgetem, jak wyjaśniono w dokumencie StatefulWidget . Oznacza to, że kiedy Flutter odbuduje widget stanowy, sprawdzi, czy powinien ponownie użyć poprzedniego obiektu stanu i, jeśli to konieczne, dołączy ten obiekt stanu do widgetu.

Widżet rodzica jest bezpaństwowy, ponieważ nie dba o stan swojego dziecka. Samo stanowe dziecko (lub technicznie Flutter) zajmie się swoim własnym stanem.
Na wysokim poziomie zgadzam się, że to sprawia, że ​​widżet rodzica jest stanowy, ponieważ dwoje rodziców może zawierać dwoje dzieci z różnymi stanami, a tym samym być technicznie różni. Ale z punktu widzenia Fluttera buduje widget nadrzędny bez dbania o stan i dopiero podczas budowania dziecko uzna jego stan.

Co to są widżety stanowe i bezstanowe?

TL; DR: widget, który umożliwia odświeżanie ekranu, jest widgetem Stateful. Widżet, który go nie posiada, jest bezstanowy.

Bardziej szczegółowo, dynamiczny widget z treścią, która może się zmieniać, powinien być widgetem Stateful. Widżet bezstanowy może zmieniać zawartość tylko wtedy, gdy zmieniają się parametry, a zatem należy to zrobić powyżej punktu jego lokalizacji w hierarchii widgetów. Ekran lub widżet zawierający zawartość statyczną powinien być widżetem bezstanowym, ale aby zmienić zawartość, musi być stanowy.

Znalazłem tę względną treść w interesującej historii medium. Nie ma za co!

Bezstanowy : stan widżetu jest tworzony TYLKO RAZ, wtedy może aktualizować wartości, ale nie jawnie stan . Stąd też jasno wynika struktura. Dlatego ma tylko jedną klasę, która rozszerza się z StatelessWidget. Więc jeśli powiem, nie mogą już nigdy ponownie uruchomić build()metody.

Stanowe : widżety mogą aktualizować swój STAN (lokalnie) i wartości wiele razy po wyzwoleniu zdarzenia . Dlatego też implementacja jest inna. W tym mamy 2 klasy, jedna to, StatefulWidgeta druga to program obsługi implementacji stanu, tj State<YourWidget>. Więc jeśli powiem, mogą ponownie uruchomić build()metodę w oparciu o wywołane zdarzenia.

Poniższy schemat pomoże.

disclaimer: - nad trzepotaniem zacząłem pracować od zeszłego tygodnia :)

Bezstanowy i stanowy widget ma swój własny cykl życia tworzenia i aktualizowania interfejsu użytkownika. jednak możesz użyć bezstanowego lub stanowego do renderowania interfejsu użytkownika, ale praktycznie stanowe są bardziej przydatne, gdy interfejs użytkownika jest całkowicie lub częściowo zależny od danych zewnętrznych (jak - renderowanie listy za pomocą interfejsu API), podczas gdy używanie bezstanowego widgetu do renderowania statycznego interfejsu użytkownika, jak każdy ekran wejściowy, jest dobra praktyka.

Podczas pisania aplikacji często tworzysz nowe widżety, które są podklasami StatelessWidget lub StatefulWidget

Oto kilka różnic między StatelessWidgeti StatefulWidgetwidżetami:

Widget bezstanowy:

1. Widżet, który ma niezmienny stan.
2. Widgety bezstanowe to widżety statyczne.
3. Nie są zależne od żadnych zmian danych ani zmian zachowania.
4. Widżety bezstanowe nie mają stanu, zostaną wyrenderowane raz i nie będą się aktualizować, ale będą aktualizowane tylko wtedy, gdy zmienią się dane zewnętrzne.
5. Na przykład Text, Icon, RaisedButtonsą bezpaństwowe wzory.

Stateful Widget:

1. Widżet, który ma zmienny stan.
2. Stateful Widgets to dynamiczne widżety.
3. Można je aktualizować w czasie wykonywania na podstawie działań użytkownika lub zmian danych.
4. Widżety stanowe mają stan wewnętrzny i mogą być ponownie renderowane, jeśli zmienią się dane wejściowe lub stan widgetu ulegnie zmianie.
5. Na przykład Checkbox, Radio Button, Slidersą stanowa Widgety

W prostych słowach:

Jak wiemy, każdy widżet to widok w trzepotaniu. Który ma swoje własne klasy. Kiedy używamy tych klas, tworzymy z nich obiekt. Podajemy wartości ich różnym zmiennym / właściwościom. Dawny. Tworzymy widżet Tekst, abyśmy mogli nadać mu ciąg, kolor, rozmiar czcionki, rodzinę czcionek. Więc dając to, definiujemy jego właściwości podczas jego tworzenia. Do tego momentu widżety bezstanowe i stanowe są takie same, ale

Kiedy chcemy zmieniać / aktualizować jego właściwości (powiedzmy String lub Color) później i znowu, to powinien być widget Stateful.

A kiedy nie chcemy zmieniać jego właściwości po pierwszym zdefiniowaniu, jest to widget bezstanowy.

oznacza to, że zależy nam na danych, które widżet przechowuje / kontroluje / pokazuje.

Zatem bezstanowe to dane mniej, a stanowe to pełne dane.

Teraz, jeśli zdefiniujesz klasę, która jest bezstanowa, oznacza to, że ta klasa nie przejmuje się / ma zmienne w niej lub powiedz, że dane są w swojej własnej klasie, tj. Na poziomie klasy, ale może mieć w sobie inny widget / klasę, która dba o dane, tj. Jest Stanowa . Więc nie ma to na siebie żadnego wpływu.

Proszę mnie poprawić, jeśli się mylę.

Co to są widżety stanowe i bezstanowe?

Widget bezstanowy: widget bezstanowy jest kompilowany tylko wtedy, gdy zawiera zmiany nadrzędne.

Stateful Widgets: Pełne widgety stanu przechowują stan widżetu i można je odbudować, gdy stan się zmieni.