Flutter 中 Provider 基本使用

最新推荐文章于 2024-06-22 18:42:34 发布

Leonardo_Fibonacci

最新推荐文章于 2024-06-22 18:42:34 发布

阅读量660

点赞数

分类专栏： Flutter 相关文章标签： flutter

本文链接：https://blog.csdn.net/github_36850997/article/details/130091039

版权

Flutter 相关专栏收录该内容

39 篇文章 5 订阅

订阅专栏

文章介绍了Flutter中Provider库的使用，包括如何安装、创建ChangeNotifier类来管理状态，以及如何在Widget中获取和更新数据。Consumer组件用于实现局部刷新，减少不必要的构建。Selector则允许对数据进行转换并控制Widget的重建。此外，提到了Selector和Consumer的不同变体用于处理多个provider的情况。

摘要由CSDN通过智能技术生成

前言：

Provider.of<XXX>(context).数据
Provider.of<XXX>(context).方法

ChangeNotifier：这个是真正数据（状态）存放的地方。我们自己创建的provider 是混入ChangeNotifier 的。

一安装

在pub.dev 上搜索provider

二在main中设置

三使用

1 > 创建一个count_provider 类

import 'package:flutter/foundation.dart';

// 实现基于ChangeNotifier的类 内部维护一个计数
// 当计数有变化的时候，同时感知所有的监听者
class CountProvider with ChangeNotifier {
  int _count = 0;
  int get count => _count;
  void increment() {
    _count++;
    // 这里一定要通知变化
    notifyListeners();
  }

  void reset() {
    _count = 0;
    notifyListeners();
  }
}

2> 在 Widget build(BuildContext context) 中获取provider ,需要传入context

_countProvider = Provider.of<CountProvider>(context);

3>可以调用操作数据

this._countProvider.increment();

this._countProvider.reset();

4 在依赖数据的widget 使用数据数据怎会

// 现获取

_countProvider = Provider.of<CountProvider>(context);

// 再去使用

Text("${this._countProvider.count}"),

四什么是Consumer?

使用Consumer 的话，Widget build 方法不会多次build，改变只需要改变的，实现了局部刷新。

class _ProviderSonWidgetState extends State<ProviderSonWidget> {
  // var _countProvider;
  @override
  Widget build(BuildContext context) {
    print("计数改变了,ProviderSonWidgetState 调用了build");
    // _countProvider = Provider.of<CountProvider>(context);
    return Consumer<CountProvider>(
      builder: (context, cntProvider, child) {
        return Container(
          child: Text("${cntProvider.count}"),
        );
      },
    );
  }
}

Consumer 这里的builder 方法会被多次的调用，其实这样很不好，因为其内部本身不依赖provider的数据，只是改变了provider的数据，所以没有必要重新

      // 这里的按钮点击之后 子组件进行加1操作
      floatingActionButton: Consumer<CountProvider>(
        builder: (context, cntPorvider, child) {
          print("Consumer->builder被调用了");
          return FloatingActionButton(
            onPressed: () {
              // 调用加+1操作
              cntPorvider.increment();
            },
            child: Icon(Icons.add),
          );

另外还有 Consumer2 Consumer3 Consumer4 Consumer5 Consumer6

是什么意思呢

意思是当你Builder里面的代码依赖多个provider 提供的数据时候，可以选择对应的Consumer

class Consumer3<A, B, C> extends SingleChildStatelessWidget

    return Consumer2<CountProvider, UserInfoProvider>(
      builder: (context, cntProvider, userProvider, child) {
        return Container(
          child: Text("${cntProvider.count}---${userProvider.getUsername()}"),
        );
      },
    );

五 Selector

Selector 也有多个 Selector2 Selector3 Selector4 Selector5 Selector6

使用selector 第一个作用可以对原有的数据进行转换第二个作用可以设置要不要重新构建，执行builder 方法

// 这里的按钮点击之后 子组件进行加1操作
        floatingActionButton: Selector<CountProvider, CountProvider>(
          // 这里如果return false 的话，下面的builder 就不会再次的执行 
          shouldRebuild: (previous, next) => false,
          builder: (context, cntPorvider, child) {
            print("Consumer->builder被调用了111");
            return FloatingActionButton(
              onPressed: () {
                // 调用加+1操作
                cntPorvider.increment();
              },
              child: Icon(Icons.add),
            );
          },
          selector: (ctx, cntPorvider) {
            return cntPorvider;
          },
        )