由于各种原因，我的小部件的build方法有时会再次调用。
我知道这是因为父项已更新。但这会导致不良影响。一般会在以下情况下出现问题：
在使用FutureBuilder时，它会引起典型问题：
@override
Widget build(BuildContext context) {
return FutureBuilder(
future: httpCall(),
builder: (context, snapshot) {
// create some layout here
},
);
}
在这个例子中，如果再次调用build方法，它会触发另一个HTTP请求，这是不期望的。
考虑到这一点，如何处理不需要的构建？有没有办法防止构建调用？
Class.of(context)模式）发生变化这意味着build方法不应触发HTTP调用或修改任何状态。
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
},
);
}
}
@override
Widget build(BuildContext context) {
return const DecoratedBox(
decoration: BoxDecoration(),
child: Text("Hello World"),
);
}
@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,
],
);
},
);
}
subtree也不会重建。
这是因为，由于闭包的存在，MyWidget的实例没有改变。AnimatedBuilder和所有的过渡效果，比如AlignTransition。subtree存储在类的字段中，尽管不推荐这样做，因为它会破坏热重载功能。subtree 存储在类字段中会破坏热重载？ - Michel FeinsteinStreamBuilder 时遇到的问题是，当键盘弹出时屏幕会发生变化，因此路由必须重建。这样 StreamBuilder 就会重新构建，创建一个新的 StreamBuilder 并订阅该 stream。 当 StreamBuilder 订阅 stream 时，snapshot.connectionState 将变为 ConnectionState.waiting，这将导致我的代码返回一个 CircularProgressIndicator，然后当有数据时，snapshot.connectionState 将更改，我的代码将返回不同的部件，这将导致屏幕闪烁显示不同的内容。 - Michel FeinsteinStatefulWidget，在 initState() 中订阅 stream，并使用 setState() 将 currentWidget 设置为 stream 发送的新数据，将 currentWidget 传递给 build() 方法。是否有更好的解决方案？ - Michel FeinsteinFutureBuilder的实际应用场景。 - TheGeekZn以下是防止不必要的构建方法调用的方法：
为单个小部分的UI创建子Statefull类。
使用Provider库，通过使用它，您可以停止不需要的构建方法调用。
以下情况会调用build方法：
ValueListenableBuilder<T>类。它允许您仅重建一些对您的目的必要的小部件并跳过昂贵的小部件。
您可以在这里查看ValueListenableBuilder Flutter文档，或者只需查看下面的示例代码： 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,
),
);
避免由于调用 setState() 以仅更新特定Widget而不刷新整个页面而导致的不必要的重建的最简单方法之一是将代码的这部分剪切，并在另一个 Stateful 类中将其包装为独立的 Widget。
例如，在以下代码中，通过按下FAB按钮，将会多次调用父页面的Build方法：
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)
)
));
}
}
但是如果你将悬浮操作按钮(widget)放在另一个具有自己生命周期的类中，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)
);
}
}
我想分享一下我经历过的由于上下文导致widget构建不必要的经验，但我找到了一种非常有效的方式：
所以你需要使用Navigator.pushReplacement()，这样前一页的上下文与下一页没有关系。
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pushReplacement(
context,
RightToLeft(page: MyHomePage()),
);
},
)
通过这种方式，我们可以优化我们的应用程序。
你可以像这样做：
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();
});
}
}
refresh 被调用在哪里？ - Felipe Sales简单的方法是：使用布尔标志来防止调用两次，例如：ValueNotifier...
关注具有值为true或false的布尔值，在确切的时间避免调用build()方法两次。
请参考下面的现有示例代码：
.value与不需要的小部件构建之间的关系，或者为什么build方法需要是纯函数。 - Suragch