Flutter Provider状态管理 - Selector

最新推荐文章于 2024-04-17 00:31:18 发布
最新推荐文章于 2024-04-17 00:31:18 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： 【Flutter点滴知识 】
原文链接：https://blog.csdn.net/u013894711/article/details/102785532
版权

如果你还不了解Consumer，请移步我的上一篇博文，Flutter Provider状态管理-Consumer，此篇文章是基于上一篇的基础来的。

从上一篇中我们知道Consumer可以实现UI页面的局部刷新，摒弃掉传统的setState，让UI的表现上一个台阶。但是我在实际的业务场景使用Consumer却遇到了很多问题。

举个栗子：

一个计数器页面，这不是一个简单的计数器页面，因为它有两个Text，我们分别命名为Text1 和Text2，以及两个Button，分别是Button1和Button2。点击Button1改变Text1的值，改变Button2改变Text2，值的改变都是通过同一个CounterProvider，只不过我们维护了两个数据而已，这时候我们希望的是点击Button1只有Text1会重绘，Text2保持不变，但是实际情况令人寒心。。。

我们用Consumer来获取CounterProvider，只要是值改变了都会通知它的宿主刷新UI。所以点击任何一个Button都会导致Text1和Text2的重绘，下面我们来看一下具体的代码

1.counter_provider.dart
 
import 'package:flutter/material.dart';
 
class CounterProvider with ChangeNotifier {
  int _count = 0;
  int _count1 = 100;
 
  int get value => _count;
 
  int get value1 => _count1;
 
  void increment() {
    _count++;
    notifyListeners();
  }
 
  void increment1() {
    _count1++;
    notifyListeners();
  }
}
增加了变量_count1以及方法increment1()，并提供相应的get方法

2.my_page.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
 
import 'counter_provider.dart';
 
class MyPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyPageState();
}
 
class MyPageState extends State<MyPage> {
  ///初始化CounterProvider
  CounterProvider _counterProvider = new CounterProvider();
 
  @override
  Widget build(BuildContext context) {
    print('页面重绘了。。。。。。。。。。。');
 
    //整个页面使用ChangeNotifier来包裹
    return ChangeNotifierProvider(
      builder: (context) => _counterProvider,
      child:
          //child里面的内容不会因为数据的改变而重绘
          Scaffold(
        appBar: AppBar(
          title: Text('my page'),
        ),
        body: Center(
            child:
                //使用Cousumer来获取Provider
                Column(
          children: <Widget>[
            //使用Consumer来获取CounterProvider，为Text提供数据
            Consumer(builder: (BuildContext context,
                CounterProvider counterProvider, Widget child) {
              print('Text1重绘了。。。。。。');
 
              return Text(
                //获取数据
                'Text1 : ${counterProvider.value}',
                style: TextStyle(fontSize: 20),
              );
            }),
            //使用Consumer来获取CounterProvider，为Text提供数据
            Consumer(builder: (BuildContext context,
                CounterProvider counterProvider, Widget child) {
              print('Text2重绘了。。。。。。');
 
              return Text(
                //获取数据
                'Text2 : ${counterProvider.value1}',
                style: TextStyle(fontSize: 20),
              );
            }),
            RaisedButton(
              onPressed: () {
                print('Button 1被点击了。。。。。。。。。。');
                _counterProvider.increment();
              },
              child: Text('Button1'),
            ),
            RaisedButton(
              onPressed: () {
                print('Button 2被点击了。。。。。。。。。。');
                _counterProvider.increment1();
              },
              child: Text('Button2'),
            )
          ],
        )),
      ),
    );
  }
}
Text1和Text2都由两个Consumer分别包裹，我们希望的效果是：

点击Button1引起Text1的重绘，Text2中的print语句不执行
点击Button2引起Text2的重绘，Text1中的print语句不执行
我们来看一下实际的情况：

点击button1时

点击button2时

无论是点击那个Button都会引起Text1和Text2的重绘，这明显与我们使用Provider的初衷是违背的。而在实际的使用场景中，这种情况会带来比预想更差的UI表现。

Provider的设计者毫无疑问也发现了这个问题，所以推出了Selector来解决这类问题。

下面我们来改造计数器demo，将Consumer替换成Selector。国际惯例，先瞅一眼Selector的构造方法：

Selector({
    Key key,
    //当父widget请求更新或者selector的返回值与之前的返回值不一样时会调用builder
    @required ValueWidgetBuilder<S> builder,
    //selector返回具体的值，返回的值必须继承自==而且不能为null
    @required S Function(BuildContext, A) selector,
    Widget child,
  })  : assert(selector != null),
        super(
          key: key,
          builder: builder,
          selector: (context) => selector(context, Provider.of(context)),
          child: child,
        );
Selector控制的粒度比Consumer更细，Consumer是监听一个Provider中所有数据的变化，Selector则是监听某一个/多个值的变化。具体的代码：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
 
import 'counter_provider.dart';
 
class MyPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyPageState();
}
 
class MyPageState extends State<MyPage> {
  ///初始化CounterProvider
  CounterProvider _counterProvider = new CounterProvider();
 
  @override
  Widget build(BuildContext context) {
    print('页面重绘了。。。。。。。。。。。');
    
    //整个页面使用ChangeNotifier来包裹
    return ChangeNotifierProvider(
      builder: (context) => _counterProvider,
      child:
      //child里面的内容不会因为数据的改变而重绘
      Scaffold(
        appBar: AppBar(
          title: Text('my page'),
        ),
        body: Center(
            child:
            //使用Cousumer来获取Provider
            Column(
              children: <Widget>[
                //用Selector替换Consumer
                Selector(
                    builder: (BuildContext context, int data, Widget child) {
                      print('Text 1 重绘了。。。。。。。。。。');
                      return Text(
                        //获取数据
                          'Text1 : ${data.toString()}',
                          style: TextStyle(fontSize: 20));
                    }, selector:
                    (BuildContext context, CounterProvider counterProvider) {
                      //这个地方返回具体的值，对应builder中的data
                  return counterProvider.value;
                }),
                Selector(
                    builder: (BuildContext context, int data, Widget child) {
                      print('Text 2 重绘了。。。。。。。。。。');
                      return Text(
                        //获取数据
                        'Text2 : ${data.toString()}',
                        style: TextStyle(fontSize: 20),
                      );
                    },
                    selector: (BuildContext context,
                        CounterProvider counterProvider) {
                      return counterProvider.value1;
                    }),
                RaisedButton(
                  onPressed: () {
                    print('Button 1被点击了。。。。。。。。。。');
                    _counterProvider.increment();
                  },
                  child: Text('Button1'),
                ),
                RaisedButton(
                  onPressed: () {
                    print('Button 2被点击了。。。。。。。。。。');
                    _counterProvider.increment1();
                  },
                  child: Text('Button2'),
                )
              ],
            )),
      ),
    );
  }
}
经过上面代码的改造，我们再来看一下点击Button的效果，可以很明显看到点击Button1只会导致Text1的绘制，点击Button2置灰导致Text2的绘制，至此，Consumer留下的坑完美解决！！

思考：
依然沿用之前的代码，Scaffold中body的child是一个center组件，如果我们用Consumer包裹住Center会是什么效果？点击按钮还能像上面那样局部更新不影响其它组件嘛？伪代码如下所示

//用Consumer把selector包裹起来，Consumer和两个Selector都用的是CounterModel
Consumer(builder: (_, counterProvider, _) {
      return Column(
        children: <Widget>[
          Selector(builder: (_, value, _) {
            return Text(value);
          }, selector: (_, counterProvider) {
            return counterProvider.value;
          },),
          Selector(builder: (_, value1, _) {
            return Text(value1);
          }, selector: (_, counterProvider) {
            return counterProvider.value1;
          },),
        ],
      )
    });
答案是否定的，因为Selector和Consumer都是用的CounterProvider，如果Selector监听的值发生变化，那么Cousumer页能监听到，所以会触发Consumer包裹的组件整体重绘。

 

再来一个问题：

要是我把Consumer换成Selector呢，并且用Button3去控制最外层Selector监听的值，伪代码如下：

//selector中还包含了两个子selector
Selector(
      builder: (_, value2, _) {
        return Column(
          children: <Widget>[
            //这个Text使用了value2
            Text(value2),
            Selector(
              builder: (_, value, _) {
                return Text(value);
              },
              selector: (_, counterProvider) {
                return counterProvider.value;
              },
            ),
            Selector(
              builder: (_, value1, _) {
                return Text(value1);
              },
              selector: (_, counterProvider) {
                return counterProvider.value1;
              },
            ),
          ],
        );
      },
      selector: (_, counterProvider) {
        return counterProvider.value2;
      },
    );
先看一下结果

我们看到点击Button1的时候只有Text1重绘

点击Button2的时候只有Text2重绘，

点击Button3的时候会导致最外层Selector包裹的内容整体重绘，由于Text1和Text2也属于它的child，所以重绘也是必然的

 

所以我们在使用Selector的时候也小心一些，包裹的粒度尽可能的小，Consumer更应该如此。至于在实际项目中如何使用就看各位看官的选择了。

 

好了，差不多就是这些，如果有问题希望大家提出来交流，共同学习！有错误之处欢迎指正
————————————————
版权声明：本文为CSDN博主「autonomousjack」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u013894711/article/details/102785532

barnett_y
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter Sex Selector | City Selector
02-08
Flutter 移动应用从底部弹出对话框选择性别和选择城市
Flutter Provider Selector
卓原的进化之旅
06-24 1189
Selector 源码: class Selector<A, S> extends Selector0<S> { /// {@macro provider.selector} Selector({ Key? key, required ValueWidgetBuilder<S> builder, required S Function(BuildContext, A) selector, ShouldRebuild<S>
Flutter Provider Selector数据更新问题优化_provider list update
最新发布
2401_84164649的博客
04-17 790
这个属性，里面有两个值，一个是收到更新通知之后新的数据，一个还是缓存的数据，通过判断这两个值来决定是否刷新，默认。(img-mUQ1JNTi-1713285007805)]我们对其进行一下封装，首先定义一个类来进行承载数据，传入的泛型就会。资料的朋友，可以添加V获取：vip204888 （备注鸿蒙）**就刷新，我们可以通过这个属性来做一些处理进行优化。这虽然能够解决问题，但是非常麻烦，并且效率不高。,通过它来判断数据是否有更新便可以了。比如我们需要监听的对象是。修改数据，然后刷新UI。
Flutter状态管理：Provider4 Selector
大灰狼的小绵羊哥哥的博客
07-14 3917
前言 实在是抱歉，最近项目太忙，所以更新的太慢了。废话不多说，我们开始吧。 Selector 读文档 其实我本来是没有计划说说Selector的，但有朋友想让我介绍一下，所以先从Selector开始。 总得来说，Selector和Consumer是等价的，也是通过Provider.of获取数据的，不同的是，Selector正如他的名字一样，他会过滤掉一些不必要的数据更新从而阻止重新构建，也就是说Selector只会更新符合条件的数据。 我们先看一下Selector的定义： class Sel
Flutter中的Provider(二)局部刷新-Selector
Mr_Tony的专栏
12-20 1820
在Flutter中提供了几种局部刷新的方式，这里简单演示一下Selector的使用，代码如下: /// Provider的局部刷新 /// 上次的通用版本在数值改变的时候会触发整个Provider包裹的builder: (context, child)函数，在性能上会有一点问题 /// 通过Provider提供的局部刷新功能可以减少这个性能损耗，简单示例代码如下: import 'package:flutter/material.dart'; import 'package:provider/provid
Flutter provider状态管理框架
10-24
Flutter provider状态管理框架
flutter file-selector
09-25
Flutter的file_selector插件可以帮助开发者在移动应用中方便地选择文件。 要使用file_selector插件，首先需要将插件的依赖项添加到pubspec.yaml文件中，并运行flutter pub get命令获取插件的最新版本。 在插件使用...
flutter-mvvm-provider-demo
02-03
flutter-mvvm-provider-demo
flutter-embedded-linux:Flutter的嵌入式Linux嵌入式
03-12
Flutter的嵌入式Linux嵌入式 创建该项目是为了开发的非官方嵌入式Linux嵌入。 该嵌入程序着重于嵌入式Linux系统用例。 它还基于Windows的Flutter桌面实现，并且具有一些独特的功能可在嵌入式系统中使用。 目的与...
Flutter版本管理器-FVM window版
11-22
Flutter版本管理器FVM 指定存放flutte sdk路径 fvm config --cache-path <flutter sdk path> 安装指定的sdk版本 fvm install 3.3.8 设置全局sdk版本 fvm global 3.3.8 项目单独设置sdk版本 fvm use 3.3.8
flutter_account_selector:Flutter软件包，提供了帮助小部件，用于从给定列表中选择单个或多个帐户用户
04-14
account_selector Flutter软件包，提供帮助小部件，用于从列表中选择单个或多个帐户/用户 支持的Dart版本 Dart SDK版本> = 2.1.0 演示屏幕截图 演示Gif 安装 添加包裹 dependencies : account_selector : ^1.0.1 如何使用 将包导入到您的dart文件中 import 'package:account_selector/account.dart' ; import 'package:account_selector/account_selector.dart' ; 创建一个帐户列表以提供给自定义窗口小部件 List < Account> accountList = [ Account ( title : "Bill Gates" , accountImageWi
flutter：Provider中Selector示例
奇乐软件开发踩坑日志
06-04 372
Selector<UserProvider, int>( builder: (BuildContext context, int value, Widget child) { return Text("data $value"); }, selector: (context, model) { return model.count; }, ), UserProvider是
Flutter状态State管理、InheritedWidget、Provider、Selector
qq_27909209的博客
07-15 552
flutter
Flutter Provider Selector数据更新问题优化
Code1994的博客
05-11 1378
在使用Selector的时候，在修改所选对象里面的某个参数之后调用notifyListeners()，界面并不会更新，再比如选择的是个数组，对数组进行操作之后，调用notifyListeners()也是不会更新，造成这个问题的主要原因是由于对象内存地址并没有改变导致的，当内存地址没有改变，就不会更新。 我们为了解决这个问题，一般是重新创建一个对象， 然后把原来的值重新赋值到新的对象上，比如数组： List<String> newList=[]; newList.addAll(list); n.
flutter provider 状态管理（1）
ZhangWes的博客
07-07 412
1.分类及作用 Provider只可以获取值，不能更新值 ListenableProvider可以监听对象/组件，并且可以对组件进行重建 ChangeNotifierProvider 继承ListenableProvider， 可以更新组件，并且可以自动执行ChangeNotifier.dispose，这也是和ListenableProvider的区别 ValueListenableProvider 收听ValueListenable并且仅公开ValueListenable.value S...
Flutter Provider框架实战
菜鸟博客
06-25 386
Provider 框架实际应用
flutter状态管理provider
06-28
### 回答1： Flutter状态管理Provider是一种用于管理Flutter应用程序状态的库。它提供了一种简单的方式来管理应用程序的状态，使得开发者可以更加轻松地构建复杂的应用程序。使用Provider，开发者可以轻松地将状态从一个小部件传递到另一个小部件，而无需手动管理状态。这使得代码更加简洁，易于维护。同时，Provider还提供了一些高级功能，如异步状态管理和依赖注入。总之，Provider是一个非常有用的Flutter状态管理库，可以帮助开发者更加轻松地构建高质量的应用程序。 ### 回答2： Flutter 是一种最快速开发应用程序的框架之一。Flutter 中有很多不同的状态管理工具，其中最受欢迎的是 Provider。Provider 是一个包含了多个 Flutter 应用程序的不同状态或数据的管理工具。Provider 使您可以轻松访问和管理应用程序的各个部分中的数据。 Provider 有两个基本要素：一个是 Provider，另一个是 Consumer。Provider 可以包含任何数据，例如字符串、整数、对象、函数等等。而 Consumer 是能够访问这些数据并显示它们的 Widget。 Provider 可以在整个应用程序中共享数据和状态。如果您需要在应用程序的多个部分中保持数据的同步状态，则可以使用 Provider 来管理这些数据和状态。在使用 Provider 之前，您需要定义一个类并将其继承自 ChangeNotifier。该类将包含数据和状态，并且还需要通过 notifyListeners() 告知侦听数据的 Consumer。 使用 Provider 的好处是封装了状态管理的代码。这样，您不必在应用程序或 Widget 中编写大量的状态管理代码。在使用 Provider 之后，您可以轻松地在应用程序或 Widget 中访问数据和状态。 最后，值得一提的是，Provider 的使用方式很多，您可以使用官方提供的 Provider 包来管理应用程序中的数据和状态，也可以使用其他第三方状态管理工具来实现您的应用程序的功能。在使用任何工具之前，请确保仔细了解它们的优缺点，以便于选择最适合您的应用程序的状态管理工具。 ### 回答3： Flutter是一个非常强大的UI框架，但随着应用规模增大，状态的管理变得越来越复杂，导致代码可读性和可维护性变得很难。Flutter的状态管理解决方案有多种，其中比较常用的就是Provider。 Provider是Flutter中一个状态管理框架，它使用InheritedWidget来传递状态，同时具有透明性、灵活性和便捷性。通过Provider，我们可以在不同Widget之间共享相同的数据，从而保证数据在应用中的一致性。 使用Provider的步骤非常简单，首先需要在我们的Flutter项目中引入Flutter Provider库，然后定义我们需要共享的数据模型，并将其包装在Provider中，最后在UI界面中使用数据。 下面是一篇使用Provider实现商品购物车的例子： 1.定义数据模型 ``` class Product { String title; double price; Product({ required this.title, required this.price, }); } ``` 2.创建Provider ``` class CartModel extends ChangeNotifier { final List<Product> _items = []; List<Product> get items => _items; void add(Product product) { _items.add(product); notifyListeners(); } void remove(Product product) { _items.remove(product); notifyListeners(); } } ``` 3.在Widget树中使用Provider ``` return ChangeNotifierProvider( create: (context) => CartModel(), child: MaterialApp( home: Scaffold( body: Center( child: Consumer<CartModel>( builder: (context, cart, child) { return Text('Cart items: ${cart.items.length}'); }, ), ), ), ), ); ``` 在上面的代码中，我们使用ChangeNotifierProvider包装了CartModel，并将其注册到应用的根节点。Consumer在UI界面中使用CartModel的数据，并提供数据发生变化时的回调闭包。 总的来说，Provider能够在Flutter应用中实现更清晰、安全和高效的状态管理，在开发中能够带来更好的用户体验和开发效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值