由于各种原因，有时build我的小部件的方法会被再次调用。
我知道这是因为父母更新了。但这会导致不良影响。导致问题的典型情况是使用FutureBuilder这种方式时：
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: httpCall(),
builder: (context, snapshot) {
// create some layout here
},
);
}
在这个例子中，如果再次调用build方法，它会触发另一个 HTTP 请求。这是不希望的。
考虑到这一点，如何处理不需要的构建？有什么方法可以防止构建调用？
构建方法的设计方式应该是纯的/没有副作用。这是因为许多外部因素都可以触发新的小部件构建，例如：
Class.of(context)pattern) 变化这意味着该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 故意不会重建孩子。这意味着您可以缓存部分小部件树以防止不必要的重建。
最简单的方法是使用 dartconst构造函数：
@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到你的类的一个字段中，虽然不太推荐，因为它破坏了热重载功能。
您可以使用这些方式防止不需要的构建调用
为 UI 的各个小部分创建子 Statefull 类
使用提供程序库，因此使用它可以停止不需要的构建方法调用
在以下情况下构建方法调用
颤振也有ValueListenableBuilder<T> class 。它允许您仅重建某些必要的小部件并跳过昂贵的小部件。
您可以在此处查看文档ValueListenableBuilder 颤振文档
或以下示例代码：
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,
),
);
避免不需要的 re Build的最简单方法之一通常是通过调用setState()来更新特定的 Widget 而不是刷新整个页面，这是剪切代码的那部分并将其作为独立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)
);
}
}
我只想分享我主要由于上下文而构建不需要的小部件的经验，但我找到了一种非常有效的方法
所以你需要使用 Navigator.pushReplacement() 使得前一页的上下文与即将到来的页面没有关系
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pushReplacement(
context,
RightToLeft(page: MyHomePage()),
);
},
)
通过这种方式，我们可以优化我们的应用程序