Как бороться с нежелательной сборкой виджетов?

По разным причинам иногда buildметод моих виджетов вызывается повторно.

Я знаю, что это происходит из-за обновления родителей. Но это вызывает нежелательные эффекты. Типичная ситуация, когда это вызывает проблемы, при использовании FutureBuilderэтого способа:

@override
Widget build(BuildContext context) {
  return FutureBuilder(
    future: httpCall(),
    builder: (context, snapshot) {
      // create some layout here
    },
  );
}

В этом примере, если бы метод сборки был вызван снова, он инициировал бы другой HTTP-запрос. Что нежелательно.

Учитывая это, как бороться с нежелательной сборкой? Есть ли способ предотвратить вызов сборки?

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

• Маршрут поп / толчок
• Изменение размера экрана, обычно из-за изменения внешнего вида клавиатуры или ориентации
• Родительский виджет воссоздал своего дочернего элемента
• InheritedWidget, от которого зависит виджет ( Class.of(context)шаблон)

Это означает, что buildметод не должен запускать http-вызов или изменять какое-либо состояние .

Как это связано с вопросом?

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

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

В случае вашего примера вы должны преобразовать свой виджет в, а StatefulWidgetзатем извлечь этот HTTP-вызов в initStateсвой State:

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  Future<int> future;

  @override
  void initState() {
    future = Future.value(42);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: future,
      builder: (context, snapshot) {
        // create some layout here
      },
    );
  }
}

Я это уже знаю. Я пришел сюда, потому что очень хочу оптимизировать перестройки

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

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

Самый простой способ - использовать constконструкторы дротиков :

@override
Widget build(BuildContext context) {
  return const DecoratedBox(
    decoration: BoxDecoration(),
    child: Text("Hello World"),
  );
}

Благодаря этому constключевому слову экземпляр DecoratedBoxостанется прежним, даже если сборка вызывалась сотни раз.

Но вы можете добиться того же результата вручную:

@override
Widget build(BuildContext context) {
  final subtree = MyWidget(
    child: Text("Hello World")
  );

  return StreamBuilder<String>(
    stream: stream,
    initialData: "Foo",
    builder: (context, snapshot) {
      return Column(
        children: <Widget>[
          Text(snapshot.data),
          subtree,
        ],
      );
    },
  );
}

В этом примере, когда StreamBuilder получает уведомление о новых значениях, subtreeон не будет перестраиваться, даже если StreamBuilder / Column это сделает. Это происходит потому, что благодаря закрытию экземпляр MyWidgetне изменился.

Этот паттерн часто используется в анимации. Типичное использование - AnimatedBuilderи все переходы, такие как AlignTransition.

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

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

1) Создайте дочерний класс Statefull для отдельной небольшой части пользовательского интерфейса

2) Используйте библиотеку Provider , чтобы с ее помощью можно было остановить вызов нежелательного метода сборки.

В приведенных ниже ситуациях вызов метода сборки

• После вызова initState
  
• После вызова didUpdateWidget
  
• когда вызывается setState () .
  
• когда клавиатура открыта
  
• когда ориентация экрана изменилась
  
• Родительский виджет создается, затем дочерний виджет также перестраивается
  

Flutter также имеет ValueListenableBuilder<T> class . Это позволяет вам перестроить только некоторые из виджетов, необходимых для вашей цели, и пропустить дорогие виджеты.

вы можете увидеть документы здесь ValueListenableBuilder flutter docs
или просто пример кода ниже:

  return Scaffold(
  appBar: AppBar(
    title: Text(widget.title)
  ),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text('You have pushed the button this many times:'),
        ValueListenableBuilder(
          builder: (BuildContext context, int value, Widget child) {
            // This builder will only get called when the _counter
            // is updated.
            return Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Text('$value'),
                child,
              ],
            );
          },
          valueListenable: _counter,
          // The child parameter is most helpful if the child is
          // expensive to build and does not depend on the value from
          // the notifier.
          child: goodJob,
        )
      ],
    ),
  ),
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.plus_one),
    onPressed: () => _counter.value += 1,
  ),
);