Flutter: объяснение состояния установки и инициализации состояния

При разработке приложений с помощью Flutter управление состоянием виджетов имеет решающее значение для создания интерактивных и динамических пользовательских интерфейсов. Два распространенных метода обработки состояния во Flutter — это установка состояния и инициализация состояния. В этой статье мы рассмотрим различия между этими двумя подходами и предоставим примеры кода, иллюстрирующие их использование. Итак, приступим!

Настройка состояния:
Настройка состояния относится к процессу обновления значения переменной состояния в виджете Flutter. Обычно это делается в ответ на взаимодействие с пользователем или асинхронные события. Самый распространенный метод установки состояния во Flutter — использование функции setState().

Пример:

import 'package:flutter/material.dart';
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
  int counter = 0;
  void incrementCounter() {
    setState(() {
      counter++;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Counter: $counter'),
            RaisedButton(
              onPressed: incrementCounter,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

В приведенном выше примере функция incrementCounterвызывается, когда пользователь нажимает кнопку «Увеличить». Внутри обратного вызова setState()переменная counterувеличивается, вызывая перестройку виджета и обновление пользовательского интерфейса.

Инициализация состояния.
Инициализация состояния — это процесс определения начального значения переменной состояния при первом создании виджета. Обычно это делается в конструкторе виджета или в методе initState().

Пример:

import 'package:flutter/material.dart';
class MyWidget extends StatefulWidget {
  final String initialText;
  MyWidget({this.initialText});
  @override
  _MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
  String text;
  @override
  void initState() {
    super.initState();
    text = widget.initialText ?? 'Default Text';
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(text),
      ),
    );
  }
}

В приведенном выше примере класс MyWidgetпринимает необязательный параметр initialText. В методе initState()мы инициализируем переменную textзначением, переданным через конструктор. Если значение не указано, мы устанавливаем текст по умолчанию. Инициализированное состояние затем используется для отображения текста в пользовательском интерфейсе.

Во Flutter установка состояния и состояние инициализации — это два разных подхода к управлению состоянием ваших виджетов. Установка состояния включает обновление значения переменной состояния в ответ на события, тогда как инициализация состояния означает определение начального значения переменной состояния при создании виджета. Поняв и эффективно внедрив эти методы, вы сможете создавать адаптивные и удобные для пользователя приложения Flutter.