如何处理不需要的小部件构建？

Question

由于各种原因,有时会build再次调用我的小部件的方法.

我知道这是因为父母更新了.但这会导致不良影响.导致问题的典型情况是使用FutureBuilder这种方式:

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

在此示例中,如果再次调用构建方法,则会触发另一个http请求.这是不受欢迎的.

考虑到这一点,如何处理不需要的构建？有什么方法可以阻止构建调用？

Answer 1

该构建方法的设计是这样一种方式,它应该是纯/无副作用.这是因为许多外部因素可以触发新的小部件构建,例如:

• 路由弹出/推送,用于输入/输出动画
• 屏幕调整大小,通常是由于键盘外观或方向更改
• 父窗口小部件重新创建其子项
• 窗口小部件依赖于(Class.of(context)模式)更改的InheritedWidget

这意味着该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
      },
    );
  }
}

• 也可以制作一个能够重建的小部件,而不必强迫其子代进行构建.

当小部件的实例保持不变时; 有目的地颤动不会重建孩子.这意味着您可以缓存窗口小部件树的部分以防止不必要的重建.

最简单的方法是使用dart 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到你班级的一个领域,虽然不太推荐,因为它打破了热重载.

Answer 2

您可以使用这些方式防止不需要的构建调用

1) 为 UI 的各个小部分创建子 Statefull 类

2) 使用Provider库，所以使用它你可以停止不需要的构建方法调用

在下面这些情况下构建方法调用

• 调用initState 后
  
• 调用didUpdateWidget 后
  
• 当setState()被调用时。
  
• 当键盘打开时
  
• 当屏幕方向改变时
  
• 父小部件构建然后子小部件也重建
  

Answer 3

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,
  ),
);

Answer 4

我只是想分享我的不需要的小部件构建的经验，主要是由于上下文，但我找到了一种非常有效的方法

• 路由弹出/推送

所以你需要使用 Navigator.pushReplacement() 使得上一个页面的上下文与即将到来的页面没有关系

1. 使用 Navigator.pushReplacement() 从第一页导航到第二页
2. 在第二页中，我们再次需要使用 Navigator.pushReplacement() 在 appBar 中我们添加 -

   leading: IconButton(
           icon: Icon(Icons.arrow_back),
           onPressed: () {
             Navigator.pushReplacement(
               context,
               RightToLeft(page: MyHomePage()),
             );
           },
         )
   

这样我们就可以优化我们的应用程序

Answer 5

避免不需要的 re Build s的最简单方法之一，通常是setState()为了更新一个特定的 Widget 而不是刷新整个页面而导致的不必要的 re Build，是剪切那部分代码并将其作为独立的包装Widget在另一个Stateful类中。
例如在下面的代码中，Build通过按 FAB 按钮反复调用父页面的方法：

import 'package:flutter/material.dart';

void main() {
  runApp(TestApp());
}

class TestApp extends StatefulWidget {

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

class _TestAppState extends State<TestApp> {

  int c = 0;

  @override
  Widget build(BuildContext context) {

    print('build is called');

    return MaterialApp(home: Scaffold(
      appBar: AppBar(
        title: Text('my test app'),
      ),
      body: Center(child:Text('this is a test page')),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          setState(() {
            c++;
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.wb_incandescent_outlined, color: (c % 2) == 0 ? Colors.white : Colors.black)
      )
    ));
  }
}

但是如果将 FloatingActionButton 小部件分离到另一个具有自己生命周期的类中，则setState()方法不会导致父类Build方法重新运行：

import 'package:flutter/material.dart';
import 'package:flutter_app_mohsen/widgets/my_widget.dart';

void main() {
  runApp(TestApp());
}

class TestApp extends StatefulWidget {

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

class _TestAppState extends State<TestApp> {

  int c = 0;

  @override
  Widget build(BuildContext context) {

    print('build is called');

    return MaterialApp(home: Scaffold(
      appBar: AppBar(
        title: Text('my test app'),
      ),
      body: Center(child:Text('this is a test page')),
      floatingActionButton: MyWidget(number: c)
    ));
  }
}

和 MyWidget 类：

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {

  int number;
  MyWidget({this.number});

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

class _MyWidgetState extends State<MyWidget> {

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
        onPressed: (){
          setState(() {
            widget.number++;
          });
        },
        tooltip: 'Increment',
        child: Icon(Icons.wb_incandescent_outlined, color: (widget.number % 2) == 0 ? Colors.white : Colors.black)
    );
  }
}

Answer 6

你可以这样做：

  class Example extends StatefulWidget {
      @override
      _ExampleState createState() => _ExampleState();
    }
    
    class _ExampleState extends State<Example> {
      Future<int> future;
    
      @override
      void initState() {
        future = httpCall();
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return FutureBuilder(
          future: future,
          builder: (context, snapshot) {
            // create some layout here
          },
        );
      }
    
    
     void refresh(){
      setState((){
       future = httpCall();
       });
    }

  }