文章目录
- 一、演示程序介绍
- 二、使用缓存变量处理重新build的问题
- 三、使用const处理重新build问题
一、演示程序介绍
有时候在开发中会出现多次build的情况,通常没什么问题,但是偶尔会导致数据重新初始化,这样就比较麻烦,所以以下给出几种解决重新build问题的方式。首先来看一个简单的没有处理的代码:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _count = 0;
@override
void initState() {
super.initState();
print('YM---parent----initState');
}
@override
Widget build(BuildContext context) {
print('YM---parent----build');
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: Text('Material App Bar'),
),
body:Column(
children: [
Text('$_count'),
RaisedButton(
onPressed: (){
setState(() {
_count++;
});
},
child: Text('计数'),
),
ChildWidget(),
],
),
),
);
}
}
class ChildWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
print('YM---child----build');
return Container();
}
}
上述代码主要是一个StatefulWidget
里面嵌套一个StatelessWidget
。点击父布局的按钮可以触发父布局里面文本的改变。项目启动效果如下:
YM---parent----initState
YM---parent----build
YM---child----build
点击按钮的效果如下:
YM---parent----build
YM---child----build
可以看到当父布局重新改变内容时候并没有重新调用initState()
函数。因此可以知道initState()
在整个生命周期内只会调用一次。但是重新build的时候导致了子布局重新build了。
二、使用缓存变量处理重新build的问题
上面发现父布局进行build的时候也导致了子布局重新build了,针对以上发现initState()
的特性可以将子布局单独实例化出来,修改后的代码如下:
class _MyAppState extends State<MyApp> {
int _count = 0;
var _childWidget;
@override
void initState() {
super.initState();
print('YM---parent----initState');
_childWidget = ChildWidget();
}
@override
Widget build(BuildContext context) {
print('YM---parent----build');
...
...
_childWidget,
],
...
...
以上特性其实只是利用了缓存进行解决,每次都进行复用(不仅可以对Widget进行复用,线程也是可以的),也可以使用final _childWidget = ChildWidget();
将该变量定义在build()
外面即可以。注意这里(网上有些代码是将代码定义在build()
函数里面,这样是行不通的)。
三、使用const处理重新build问题
上述代码在逻辑简单的程序中使用还可以,但是程序复杂时候,那么会变的难以理解,因此使用const效果会好一点。修改后的代码如下:
class ChildWidget extends StatelessWidget {
const ChildWidget();//注意这里
...
}
@override
Widget build(BuildContext context) {
print('YM---parent----build');
...
...
// _childWidget,
const ChildWidget(),
],
...
...
上述代码在一般情况下是没有问题的,但是如果参数包含了函数就无法使用这种方式了,示例如下:
class ChildWidget extends StatelessWidget {
...
final VoidCallback callback;
const ChildWidget({this.callback});
}
@override
Widget build(BuildContext context) {
print('YM---parent----build');
...
...
// _childWidget,
const ChildWidget(
callback: (){//这里会报错,无法编译
print('Ym----');
},
),
],
...
...
上述代码无法编译,当然如果定义了函数式参数,但是在使用时候没有传入,还是可以正常使用的。虽然这种方式无法使用了,方式一还是没有问题的。