flutter 如何处理不需要的widget构建?

inkz8wg9  于 2023-06-07  发布在  Flutter
关注(0)|答案(6)|浏览(433)

由于各种原因,有时我的小部件的build方法会被再次调用。
我知道这是因为父母更新了。但这会导致不期望的效果。导致问题的典型情况是以这种方式使用FutureBuilder

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

在本例中,如果再次调用 build 方法,它将触发另一个HTTP请求。这是不期望的。
考虑到这一点,如何处理不需要的构建?有没有什么方法可以阻止构建调用?

bqujaahr

bqujaahr1#

  • build* 方法的设计方式应该是 * 纯粹/没有副作用 *。这是因为许多外部因素可以触发新的小部件构建,例如:
  • 路由弹出/推送
  • 屏幕大小调整,通常是由于键盘外观或方向的变化
  • 父微件重新创建了其子微件
  • 小部件依赖的InheritedWidget(Class.of(context)模式)更改
    这意味着build方法不应该 * 触发http调用或修改任何状态
  • 这与问题有什么关系?*

你面临的问题是你的构建方法有副作用/不纯,使得无关的构建调用很麻烦。
不应该阻止构建调用,而应该使构建方法纯净,以便可以在任何时候调用它而不会产生影响。
在您的示例中,您将小部件转换为StatefulWidget,然后将HTTP调用提取到StateinitState

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

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

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

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

我已经知道了。我来这里是因为我真的想优化重建
也可以使一个小部件能够重建,而不必强迫它的孩子也进行构建。
当小部件的示例保持不变时; Flutter故意不会重建孩子。这意味着您可以缓存部件树的一部分,以防止不必要的重建。
最简单的方法是使用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收到新值通知时,即使StreamBuilder/Column重新构建,subtree也不会重新构建。这是因为,由于闭包,MyWidget的示例没有改变。
这种模式在动画中被大量使用。典型的使用是AnimatedBuilder和所有转换,如AlignTransition
您也可以将subtree存储到类的字段中,但不太推荐,因为它破坏了热重载特性。

f5emj3cl

f5emj3cl2#

您可以通过以下方式阻止不需要的构建调用

1.为UI的单个小部分创建子Statefull类
1.使用Provider库,因此使用它可以停止不需要的构建方法调用

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

plicqrtu

plicqrtu3#

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

tyu7yeag4#

避免不必要的重新构建的最简单的方法之一是,通常是调用setState()来更新特定的Widget而不是刷新整个页面,将这部分代码剪切并将其 Package 为另一个Stateful类中的独立Widget
例如,在下面的代码中,父页面的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)
    );
  }
}
gz5pxeao

gz5pxeao5#

我只是想分享我的经验,不必要的部件建设主要是由于上下文,但我发现了一种方法,是非常有效的

  • 路由弹出/推送

所以需要使用Navigator.pushReplacement(),这样前一页的上下文就与下一页没有关系
1.使用Navigator.pushReplacement()从第一页导航到第二页
1.在第二页中,我们需要再次使用Navigator.pushReplacement()在appBar中添加-

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

通过这种方式我们可以优化我们的应用

xzv2uavs

xzv2uavs6#

你可以这样做:

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();
       });
    }

  }

相关问题