时间戳

首页 > 解决方案 > 使用 Provider 避免在颤动中重建所有小部件树

flutter - 使用 Provider 避免在颤动中重建所有小部件树

问题描述

据我了解，提供者的好处之一是通过调用构建函数来避免重建小部件树，但是当我用这个简单的例子实际尝试它时：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:providerexamplelast/counterWidget.dart';

void main() => runApp(ChangeNotifierProvider<Provider1>(
  create: (_) => Provider1(),
  child:   MaterialApp(
    home: Counter(),
  ),
));

int n =0;
class Counter extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("${n++}");
var counter = Provider.of<Provider1>(context);
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: ()=> counter.counter(),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("1"),
            SizedBox(height: 5,),
            countText(),
            SizedBox(height: 5,),
            Text("3"),
            SizedBox(height: 5,),
            Text("4"),

          ],
        ),
      ),
    );
  }
}

Widget countText(){
  return Builder(
    builder: (context){
      var count = Provider.of<Provider1>(context);
      return Text("${count.c}");
    },
  );
}

通过使用这部分：

print("${n++}");

我注意到，每当我按下按钮并从提供商那里调用（计数器）功能时，（构建）功能就会被调用？

所以这里的问题只是（无状态）小部件，它如何再次重建？如果它不能解决这个问题，为什么我需要使用 Provider 呢？

编辑：我听说过这种方式：

var counter = Provider.of<Provider1>(context, listen: false);

那么它解决了这个问题吗？如何？

标签： flutterstateproviderstatefullisten

解决方案

var counter = Provider.of<Provider1>(context, listen: false);

这Provider是 Flutter 的一种状态管理机制，在底层，Provider 会跟踪小部件内部所做的更改。Provider无论是Stateless小部件还是小部件都没有关系，Stateful如果有任何变化，它都会重建小部件。

listen: false告诉Provider即使数据被修改也不重建小部件。

推荐阅读