Flutter: как правильно использовать унаследованный виджет?

Проблема исходит из вашей неверной цитаты.

Как вы сказали, InheritedWidgets, как и другие виджеты, неизменяемы. Поэтому они не обновляются. Они созданы заново.

Дело в том, что InheritedWidget - это простой виджет, который ничего не делает, кроме хранения данных. В нем нет никакой логики обновления или чего-то еще. Но, как и любые другие виджеты, он связан с Element. И угадай что? Эта вещь изменчива, и flutter будет использовать ее повторно, когда это возможно!

Исправленная цитата будет:

InheritedWidget, когда на него ссылаются таким образом, заставит потребителя перестраивать, когда InheritedWidget, связанный с InheritedElement, изменяется.

Есть отличный разговор о том, как виджеты / элементы / renderbox соединяются вместе. Но вкратце они такие (слева - типичный виджет, в середине - «элементы», а справа - «блоки рендеринга»):

Дело в том, что когда вы создаете новый виджет; flutter сравнит его со старым. Повторно используйте его Element, который указывает на RenderBox. И измените свойства RenderBox.

Хорошо, но как это отвечает на мой вопрос?

При создании экземпляра InheritedWidget и последующем вызове context.inheritedWidgetOfExactType (или MyClass.of, что в основном то же самое); подразумевается, что он будет слушать Element, связанный с вашим InheritedWidget. И всякий раз, когда этот Element получает новый виджет, он принудительно обновляет все виджеты, которые вызывали предыдущий метод.

Короче говоря, когда вы заменяете существующий InheritedWidget новым; flutter увидит, что он изменился. И уведомит связанные виджеты о потенциальной модификации.

Если вы все поняли, значит, вы уже догадались о решении:

Оберните свой InheritedWidget в StatefulWidget, который будет создавать новый InheritedWidget всякий раз, когда что-то изменится!

Конечный результат в реальном коде будет:

class MyInherited extends StatefulWidget {
  static MyInheritedData of(BuildContext context) =>
      context.inheritFromWidgetOfExactType(MyInheritedData) as MyInheritedData;

  const MyInherited({Key key, this.child}) : super(key: key);

  final Widget child;

  @override
  _MyInheritedState createState() => _MyInheritedState();
}

class _MyInheritedState extends State<MyInherited> {
  String myField;

  void onMyFieldChange(String newValue) {
    setState(() {
      myField = newValue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MyInheritedData(
      myField: myField,
      onMyFieldChange: onMyFieldChange,
      child: widget.child,
    );
  }
}

class MyInheritedData extends InheritedWidget {
  final String myField;
  final ValueChanged<String> onMyFieldChange;

  MyInheritedData({
    Key key,
    this.myField,
    this.onMyFieldChange,
    Widget child,
  }) : super(key: key, child: child);

  static MyInheritedData of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyInheritedData>();
  }

  @override
  bool updateShouldNotify(MyInheritedData oldWidget) {
    return oldWidget.myField != myField ||
        oldWidget.onMyFieldChange != onMyFieldChange;
  }
}

Но разве создание нового InheritedWidget не приведет к перестройке всего дерева?

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

И в большинстве случаев (при наличии унаследованного виджета в корне вашего приложения) унаследованный виджет является константой. Так что никакой ненужной перестройки.

TL; DR

Не используйте тяжелые вычисления внутри метода updateShouldNotify и используйте const вместо new при создании виджета.

Прежде всего, мы должны понять, что такое объекты Widget, Element и Render.

1. Объекты Render - это то, что фактически отображается на экране. Они изменяемые, содержат логику рисования и макета. Дерево рендеринга очень похоже на объектную модель документа (DOM) в Интернете, и вы можете рассматривать объект рендеринга как узел DOM в этом дереве.
2. Виджет - это описание того, что должно отображаться. Они неизменны и дешевы. Итак, если виджет отвечает на вопрос «Что?» (Декларативный подход), то объект Render отвечает на вопрос «Как?» (Императивный подход). Аналогия из Интернета - это «виртуальный DOM».
3. Element / BuildContext - это прокси между объектами Widget и Render. Он содержит информацию о положении виджета в дереве * и о том, как обновить объект Render при изменении соответствующего виджета.

Теперь мы готовы перейти к InheritedWidget и методу BuildContext inheritFromWidgetOfExactType.

В качестве примера я рекомендую рассмотреть этот пример из документации Flutter о InheritedWidget:

class FrogColor extends InheritedWidget {
  const FrogColor({
    Key key,
    @required this.color,
    @required Widget child,
  })  : assert(color != null),
        assert(child != null),
        super(key: key, child: child);

  final Color color;

  static FrogColor of(BuildContext context) {
    return context.inheritFromWidgetOfExactType(FrogColor);
  }

  @override
  bool updateShouldNotify(FrogColor old) {
    return color != old.color;
  }
}

InheritedWidget - просто виджет, реализующий в нашем случае один важный метод - updateShouldNotify. updateShouldNotify - функция, которая принимает один параметр oldWidget и возвращает логическое значение: true или false.

Как и любой виджет, InheritedWidget имеет соответствующий объект Element. Это InheritedElement. InheritedElement вызывает updateShouldNotify виджета каждый раз, когда мы создаем новый виджет (вызываем setState для предка). Когда updateShouldNotify возвращает true, InheritedElement выполняет итерацию по зависимостям (?) И вызывает для него метод didChangeDependencies.

Откуда InheritedElement получает зависимости? Здесь мы должны взглянуть на метод inheritFromWidgetOfExactType.

inheritFromWidgetOfExactType - этот метод, определенный в BuildContext, и каждый элемент реализует интерфейс BuildContext (Element == BuildContext). Итак, у каждого элемента есть этот метод.

Давайте посмотрим на код inheritFromWidgetOfExactType:

final InheritedElement ancestor = _inheritedWidgets == null ? null : _inheritedWidgets[targetType];
if (ancestor != null) {
  assert(ancestor is InheritedElement);
  return inheritFromElement(ancestor, aspect: aspect);
}

Здесь мы пытаемся найти предка в _inheritedWidgets, сопоставленного по типу. Если предок найден, мы вызываем inheritFromElement.

Код для inheritFromElement:

  InheritedWidget inheritFromElement(InheritedElement ancestor, { Object aspect }) {
    assert(ancestor != null);
    _dependencies ??= HashSet<InheritedElement>();
    _dependencies.add(ancestor);
    ancestor.updateDependencies(this, aspect);
    return ancestor.widget;
  }

1. Мы добавляем предка как зависимость текущего элемента (_dependencies.add (ancestor))
2. Мы добавляем текущий элемент в зависимости предка (ancestor.updateDependencies (this, aspect))
3. Мы возвращаем виджет предка как результат inheritFromWidgetOfExactType (return ancestor.widget)

Итак, теперь мы знаем, где InheritedElement получает свои зависимости.

Теперь давайте посмотрим на метод didChangeDependencies. У каждого элемента есть этот метод:

  void didChangeDependencies() {
    assert(_active); // otherwise markNeedsBuild is a no-op
    assert(_debugCheckOwnerBuildTargetExists('didChangeDependencies'));
    markNeedsBuild();
  }

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

Но как насчет «Все поддерево перестраивается, когда я перестраиваю InheritedWidget?». Здесь мы должны помнить, что виджеты неизменяемы, и если вы создадите новый виджет, Flutter перестроит поддерево. Как это исправить?

1. Кешировать виджеты руками (вручную)
2. Используйте const, потому что const создает единственный экземпляр значения / класса.

Из документов:

[BuildContext.inheritFromWidgetOfExactType] получает ближайший виджет данного типа, который должен быть типом конкретного подкласса InheritedWidget, и регистрирует этот контекст сборки с этим виджетом, так что при изменении этого виджета (или вводе нового виджета этого типа) или виджет уходит), этот контекст сборки перестраивается, чтобы он мог получать новые значения от этого виджета.

Обычно это неявно вызывается из статических методов of (), например Theme.of.

Как отмечалось в OP, экземпляр InheritedWidget не изменяется ... но его можно заменить новым экземпляром в том же месте в дереве виджетов. Когда это произойдет, возможно, потребуется перестроить зарегистрированные виджеты. Метод InheritedWidget.updateShouldNotify делает это определение. (См .: документы)

Итак, как можно заменить экземпляр? Экземпляр InheritedWidget может содержаться в StatefulWidget, который может заменить старый экземпляр новым.

InheritedWidget управляет централизованными данными приложения и передает их дочернему элементу. Подобно тому, как мы можем хранить здесь количество тележек, как описано здесь: