Раскрытие принципа интерфейса состояния виджета

Flutter

0x00 Компоненты без сохранения состояния и компоненты с отслеживанием состояния

Виджет — это базовый элемент управления при разработке интерфейса fltter, как и статус uiview в ios, так называемый виджет «все есть».

Виджет делится на statelessWidget и statefulWidget, в чем разница между ними. Одним словом, statelesswidget используется для отображения представлений без сохранения состояния, а statefulwidget — для отображения интерактивных динамических представлений.

На данный момент сделан основной вывод, так как же состояние реализует обновление состояния?

Оригинальный адрес публикацииflutterdev.top

0x01 Парадигма программирования пользовательского интерфейса

В разработке для iOS и Android используется императивная парадигма программирования, в то время как во флаттере, интерфейсе VUE и разработке апплетов используется декларативное программирование.

такие как иос

UILable * lable  = [UILable new];
label.text = "hello world";

Это императивный стиль, который непосредственно выполняет точное и эффективное управление назначением свойств в элементе управления.

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


class BgChangeView extends StatefulWidget {
  @override
  _BgChangeViewState createState() => _BgChangeViewState();
  Color color = Colors.red;
}

class _BgChangeViewState extends State<BgChangeView> {
  int count = 10;

  void _incrementCounter() {
    setState(() {
      count = count>255 ? 0 :count + 10;
      widget.color = Color.fromARGB(count, 0x00, 0xff, 0xff);
      print("state refresh count ${count}");

    });
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      child: RaisedButton(onPressed: _incrementCounter,
        color: widget.color,
      ),
    );
  }
}

flutterdev.top

Назначьте цвет для кнопки повышения, цвет обновляется в состоянии, таким образом обновляя цвет фона кнопки повышения.

Как реализован 0x02

состояние представляет собой состояние представления.Когда setState запускает уничтожение и реконструкцию текущего представления и его подпредставлений, оно восстанавливается в порядке от родительского представления к подпредставлению, сверху вниз.

flutterdev.top

Угадайте реализацию внутреннего состояния

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

ПС: спасибо@VadasikНапоминаем, что назначение не является точным, проверьте, что исходный код setate не является операцией прямого назначения, удалите некоторые аномальные суждения, такие как обновление, было ли оно заброшено, нужно напрямую добавить старый элемент к грязным элементам и затем создайте новый элемент, стек вызовов, setstate->_element.markNeedsBuild();-->owner.scheduleBuildFor(this); Основной код выглядит следующим образом:

    if (!_scheduledFlushDirtyElements && onBuildScheduled != null) {
      _scheduledFlushDirtyElements = true;
      onBuildScheduled();
    }
    _dirtyElements.add(element);
    element._inDirtyList = true;

Конечно, производительность этой части будет оптимизирована внутри движка флаттера, после каждой перестройки пространство, используемое ранее примененным виджетом или рандер-объектом, не будет очищаться и освобождаться одно за другим.滑动压缩способ очистки. Как показано ниже

code4fluttter

  • Flutter делит область памяти на две части: активное пространство и неактивное пространство.
  • Когда пользователь использует приложение, флаттер постоянно применяется к пространству памяти в активном пространстве.
  • Пока не будет заполнено место для приобретения
  • Проверьте активные объекты в активном пространстве и отметьте активные объекты вместе с объектами, от которых они зависят.
  • Перемещайте активный объект в неактивную область, когда приложение бездействует, в это время среди активных объектов нет неактивной области.
  • Меняйте состояния между неактивными и активными областями

Справочная статья

Категории