Привет, если вы на пути изучения Flutter/Dart или вам просто интересно почитать про путь изучения, подписывайтесь на мой канал в telegram, буду рад вас видеть! А сегодня поговорим про управление состояниями во Flutter!
В Flutter все является виджетами. Виджет - это в основном компонент на экране, такой как Text, Image, какой-либо List или даже экран. Ниже приведены изображения некоторых часто используемых виджетов.
Более того, у виджета также есть свое состояние, которое на самом деле является данными, используемыми при создании виджета, например, текстовый виджет может содержать строковые данные в своем состоянии, чтобы показать эту строку на экране.
Flutter использует приведенное ниже уравнение fig(c) для отображения виджета на экране приложения. Где f - функция построения виджета, которая определяет, как будет выглядеть виджет, state - текущее состояние виджета, а UI - фактический вывод виджета на экран.
Однако, как только вы определите виджет и он будет создан, вы не сможете изменить внешний вид виджета fig(d). Например, вы не можете динамически изменять строку в Text виджете, поскольку виджеты являются Immutable (неизменяемыми).
Хотя виджеты неизменяемы fix(d), но состояние виджета mutable (изменчиво) fix(e), эти типы виджетов называются Stateful виджетами, и поскольку Flutter является декларативной структурой, всякий раз, когда состояние виджета изменяется, виджет снова отображается в новом состоянии. Таким образом, изменение состояния виджета косвенно совпадает с динамическим изменением виджета.
У Flutter есть два типа виджетов: Stateful виджет с сохранением состояния, рассмотренный выше, и Stateless виджет без сохранения состояния.
Stateful виджет - это виджет, состояние которого изменяемо, таким образом, вы можете динамически изменять внешний вид виджета, изменяя состояние виджета. Изменение состояния виджета fig(f).
setState()
В Stateful виджете всякий раз, когда в состоянии происходит какое-либо изменение, мы вызываем метод setState(), доступный внутри виджета. Вызов setState сообщает фреймворку, что состояние виджета обновлено, и виджет должен быть перестроен, следовательно, он перестраивается с новым состоянием, см. fig(f).
Flutter использует приведенное ниже уравнение для рендеринга виджета, и если есть какое-то изменение в состоянии виджета, то снова он использует то же уравнение и ту же функцию сборки, которая определяет, как будет выглядеть виджет, но с новым значением состояния для отображения обновленного пользовательского интерфейса на экране.
С другой стороны, Stateless виджет - это виджет, состояние которого является неизменяемым, таким образом, вы не можете каким-либо образом динамически изменять внешний вид виджета. Итак, они используются, когда у нас есть статический виджет.
Типы состояний
Теперь, если мы создаем Stateful виджет, его состояние доступно только самому виджету. однако иногда важно иметь общее состояние между разными виджетами, чтобы разные виджеты могли использовать одни и те же данные о состоянии одновременно.
Давайте рассмотрим краткий сценарий. Скажем, если мы создаем приложение cart, в котором пользователь может выбирать товары из приложения и добавлять их в корзину, и как только он завершит свои покупки, он сможет перейти к экрану оформления заказа, чтобы узнать и оплатить счет.
Теперь, как вы можете видеть на fig(h), корзина, представляющая собой список выбранных товаров, находится в состоянии виджета экрана корзины, локального для виджета. Теперь эта корзина, которая находится в состоянии виджета экрана корзины, недоступна в виджете экрана оформления заказа, однако нам также нужна корзина на экране оформления заказа для расчета и выставления счета.
Чтобы решить эту проблему, мы повышаем состояние до виджета, который является виджетом-предком всех виджетов, использующих это общее состояние, fig(i). Этот метод называется Lifting the state up.
Состояние, которое является локальным для виджета или определяется в самом виджете, называется Ephemeral State (эфемерным состоянием), а состояние, которое является общим для разных виджетов, называется Global State (глобальным состоянием) или App State (состоянием приложения).
Итак, управление состоянием - это решение о том, какое состояние виджета должно быть изменяемым (Stateful виджет), а какое должно быть неизменяемым (Stateless виджет). Вызвать setState всякий раз, когда происходит изменение состояния виджета, и продумывание куда поместить состояние, либо в сам виджет, либо в общий виджет-предок.
Это основы управления State, которые вы должны изучить и внедрить, чтобы овладеть искусством управления состояния, потому что каждое продвинутое решение управлением state, такое как Provider, BLoC или Redux, реализует за кулисами одно и то же, что мы обсуждали выше.
Если вы хотите изучить реализацию State Management на базовом уровне или немного продвинуться, то вы можете перейти на YouTube-канал Easy Approach, который в основном посвящен разработке Flutter и содержит более 100 видеороликов о Flutter.
