flutter provide状态管理

最新推荐文章于 2024-05-12 19:36:55 发布

小小码农dzx

最新推荐文章于 2024-05-12 19:36:55 发布

阅读量511

点赞数 1

CC 4.0 BY-SA版权

分类专栏： flutter 文章标签： flutter provide状态管理

本文链接：https://blog.youkuaiyun.com/qq_36865892/article/details/90379220

flutter 专栏收录该内容

16 篇文章

订阅专栏

博客介绍了Flutter的多种状态管理方案，如Scoped Model、Redux、bloc、state、Provide等，认为Provide是目前最好的方案。还介绍了Provide是Google官方推出的状态管理模式，最后给出了使用flutter_provide的简单实例，包括数据改变、控制、展示类及状态顶层放置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Provide状态管理基础

依赖：
dependencies:
    provide: ^1.0.2
    
引入：
import 'package:provide/provide.dart';

项目的商品类别页面将大量的出现类和类中间的状态变化，这就需要状态管理。现在Flutter的状态管理方案很多，redux、bloc、state、Provide。

Scoped Model : 最早的状态管理方案，我刚学Flutter的时候就使用的这个，虽然还有公司在用，但是大部分已经选用其它方案了。
Redux：现在国内用的最多，因为咸鱼团队一直在用，还出了自己fish redux。
bloc：个人觉的比Redux简单，而且好用，特别是一个页面里的状态管理，用起来很爽。
state：我们首页里已经简单接触，缺点是耦合太强，如果是大型应用，管理起来非常混乱。
Provide：是在Google的Github下的一个项目，刚出现不久，所以可以推测他是Google的亲儿子，用起来也是相当的爽。

所以个人觉的Flutter_provide是目前最好的状态管理方案，那我们就采用这种方案来制作项目。

视频链接地址：https://m.qlchat.com/topic/details?topicId=2000003957012933

flutter_Provide简介

Provide是Google官方推出的状态管理模式。官方地址为：https://github.com/google/flutter-provide

A simple framework for state management in Flutter

个人看来Provide被设计为ScopedModel的代替品，并且允许我们更加灵活地处理数据类型和数据。

使用Provide

这节课就简单用flutter_provide进行一个简单的小实例，例子是这样的，我们在一个页面上增加了Text和一个RaisedButton.并且故意使用了StatelessWidget作了两个类。也就是估计作了一个不可变的页面，并且用两个类隔离了。然后我们要点击按钮，增加数字数量，也就是把状态打通。

使用案例：

数据改变类：

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
  int count = 0;

  increment() {
    count++;
    notifyListeners();
  }
}

控制数据变化类

class one extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Provide<Counter>(builder: (context, child, counter) {
        return Text('${counter.count}');
      }),
    );
  }
}

数据展示类

class second extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        onPressed: () {
          Provide.value<Counter>(context).increment();
        },
        child: Text('递增'),
      ),
    );
  }
}

将状态放入顶层

void main() {
  var counter = Counter();
  var providers = Providers();
  providers..provide(Provider<Counter>.value(counter));
  runApp(ProviderNode(child: MyApp(), providers: providers));
}