Упрощенный обзор жизненного цикла виджетов Flutter

Это концепция, которую я некоторое время не мог понять, поэтому я искал и пытался объяснить ее самым простым способом, и я полагаю, что вы, вероятно, пытаетесь сделать то же самое. Если так, то вы попали по адресу. Давайте разберемся в этом.

Виджет без состояния и виджет с состоянием

Виджет без состояния

Эти типы виджетов не меняют своего состояния после создания. Они неизменяемы и в основном используются в пользовательском интерфейсе для отображения информации. Они не обновляют свое состояние, поэтому после их создания они не могут быть изменены. В этом типе виджетов контекст сборки вызывается только один раз.

В моем понимании виджеты без состояния — это строительные блоки, а мы все знаем строительные блоки. После того, как строительный блок был уложен на другой, его нельзя изменить, пока он не будет разрушен и уложен снова, но на этот раз по-другому.

Когда часть пользовательского интерфейса, которую мы описываем, не зависит от других виджетов, могут быть полезны виджеты без состояния. Виджеты типа текст, иконки, кнопки с иконками и поднятые кнопки являются примерами виджетов без состояния.

Виджет с состоянием

Эти виджеты отличаются от виджетов без состояния. Они динамичны тем, что могут неоднократно менять свое состояние и в любой момент могут быть перерисованы заново.

Виджеты с состоянием можно комбинировать, а состояние виджета можно отслеживать с помощью объекта состояния. Объект state отслеживает такие переменные, как конфигурация виджетов и свойства виджета; эти переменные в виджете можно изменить с помощью функции setstate, которая затем обновляет приложение.

Объект state живет дольше, поэтому у него больше методов жизненного цикла. Как люди проходят через различные стадии жизни и умирают, так и виджеты с состоянием, но одно из отличий заключается в том, что мы можем использовать эти стадии в виджете, если хотим, чтобы в разное время происходили разные вещи. Это все равно, что пройти определенный этап в своей жизни и сделать несколько изменений.

Методы жизненного цикла виджета

Методы перечислены для того, чтобы показать, что происходит с виджетом с момента его создания до момента его удаления.

  • initState
  • Создать
  • didChangeDependencies
  • didUpdateWidget
  • setState
  • деактивировать
  • Удалить

initState

Это первый метод, который вызывается, когда мы создаем виджет с состоянием и вставляем его в дерево виджетов. Этот метод можно использовать для управления HTTP-запросами, подписки на потоки или любой другой объект, который, как мы знаем, изменит данные виджета.

Синтаксис выглядит следующим образом;

@override
 void initState() {
//TODO: implement initState
   super.initState();
 }
Войти в полноэкранный режим Выйти из полноэкранного режима

Судя по документации, super.initState должен находиться в начале вызова.

Сборка

Это вторая точка жизненного цикла, и этот метод вызывается после init state. Он описывает область пользовательского интерфейса, которую должен представлять виджет, и может вызываться в различных ситуациях, например, при вызове initState. вызове didUpdateWidget. получении вызова setState или при изменении зависимости объекта state, он также может использоваться для вызова deactivate и повторной установки объекта state в дерево в другом месте.

Синтаксис выглядит следующим образом;

@override
 Widget build(BuildContext context) {
   return Scaffold();
 }
Войти в полноэкранный режим Выйти из полноэкранного режима

didChangeDependencies

Это происходит после initState в жизненном цикле, и оно срабатывает, если изменяется зависимый объект виджета.

Метод build всегда вызывается после этого метода, и фреймворк будет вызывать этот метод, чтобы сообщить ему об изменении, и его можно вызывать несколько раз.

Синтаксис выглядит следующим образом;

@override
 void didChangeDependencies() {
//TODO: implement didChangeDependencies
   super.didChangeDependencies();
 }
Войти в полноэкранный режим Выйти из полноэкранного режима

В документации не указано, должен ли вызов происходить после или до super.didChangeDependencies

didUpdateWidget

Функция didUpdateWidget вызывается, если родительскому виджету необходимо перестроить виджет из-за изменения его конфигурации. Примером может служить ситуация, когда в конструктор передается переменная, а затем она обновляется. Фреймворк предоставляет старый виджет в качестве точки сравнения между ним и новым виджетом. Затем Flutter вызовет метод build(), и если вам нужно сравнить новый виджет с предыдущим, используйте этот метод.

Любые дополнительные вызовы setState после использования этого метода не нужны, потому что Flutter всегда вызывает build().

Синтаксис выглядит следующим образом;

@override
void didUpdateWidget(ProductSquare oldWidget) {
//TODO: implement didUpdateWidget
   super.didUpdateWidget(oldWidget);
}
Войти в полноэкранный режим Выйти из полноэкранного режима

В документации указано, что super.didUpdateWidget также должен быть в начале вызова

деактивировать

Этот метод вызывается, когда виджет удаляется из дерева виджетов, но он может быть снова вставлен до завершения изменений текущего кадра, когда состояние перемещается из одной точки дерева в другую.

Не следует путать его с методом dispose, поскольку метод deactivate может удалить виджет и вставить его позже в дерево виджетов, а метод dispose удаляет его полностью.

Синтаксис выглядит следующим образом;

@override
 void deactivate() {
//TODO: implement deactivate
   super.deactivate();
 }
Вход в полноэкранный режим Выход из полноэкранного режима

Согласно документации, super.deactivate происходит после вызова

Dispose

Метод Dispose вызывается, когда объект состояния полностью удален из дерева. Он является противоположностью initState; с помощью этого метода можно отменить все анимации, потоки и т.д.

Эта функция вызывается, когда объект окончательно удаляется из дерева. Вы должны установить здесь всю свою логику утилизации. Эта функция вызывается фреймворком, когда данный объект State никогда не будет перестроен. Объект State считается немонтированным, а атрибут mounted равен false, когда фреймворк вызывает dispose.

Синтаксис выглядит следующим образом;

@override
 void dispose() {
//TODO: implement dispose
   super.dispose();
 }
Вход в полноэкранный режим Выйти из полноэкранного режима

Это то же самое, что и deactivate, где super.dispose идет последним.

ПРИМЕЧАТЕЛЬНЫЕ УПОМИНАНИЯ

конструктор

При создании stateful-виджета Flutter выполняет функцию конструктора, а затем вызывает метод createState(). Когда мы рассматриваем stateful-виджет, функция конструктора выполняется первой. Но жизненный цикл объекта State виджета stateful начинается с вызова метода createState().

create

Framework мгновенно вызывает createState, когда ему говорят создать StatefulWidget (), и объекты State создаются с помощью этого метода. Все изменяемое состояние для данного виджета содержится в этом объекте. StatefulWidget должен использовать этот метод, хотя этот шаг не обозначен как реальный этап жизненного цикла, он очень важен для понимания того, что происходит за кулисами.

Синтаксис выглядит следующим образом;

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}
Вход в полноэкранный режим Выход из полноэкранного режима

Разница между stateless и stateful

Виджет stateless обновляется только при инициализации, а виджет stateless изменяется динамически, RaisedButtons, Text, icons и могут быть реализованы в виджете stateless, checkboxes, radio buttons и sliders могут быть реализованы в виджете stateful.

У виджета без состояния нет функции setState(). Он будет отображен один раз и не будет обновляться, но виджет stateful имеет внутреннюю функцию setState() и может повторно отображаться при изменении входных данных. Виджет stateless является статическим виджетом, в то время как виджеты stateful являются динамическими, виджет stateless не может обновляться во время выполнения, что не относится к виджету stateless, так как он может обновляться во время выполнения на основе действий пользователя.

ЗАКЛЮЧЕНИЕ

Эта тема была одним из часто задаваемых вопросов рекрутерами на собеседованиях, и в этой статье мы рассмотрели различные жизненные циклы виджета flutter и объяснили их. Вы также можете попробовать использовать эти методы при создании своих приложений и в своем проекте flutter. Надеюсь, эта статья дала вам достаточно информации о жизненном цикле виджета.

В наших будущих статьях мы будем рассматривать виджеты flutter более подробно и постараемся объяснить их понятными для вас фрагментами.
Если я что-то упустил или вы считаете, что нужно добавить в эту статью, пожалуйста, оставьте комментарий ниже. Спасибо, что читаете.😊

Оцените статью
devanswers.ru
Добавить комментарий