Flutter中如何限制widget重新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----');
              },
   			),
          ],
   ...
   ...

上述代码无法编译，当然如果定义了函数式参数，但是在使用时候没有传入，还是可以正常使用的。虽然这种方式无法使用了，方式一还是没有问题的。