文档章节

Flutter 状态管理 flutter_Provide

o
 osc_bkdv2it5
发布于 2019/08/20 14:28
字数 1033
阅读 46
收藏 0

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

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

  • Scoped Model : 最早的状态管理方案,我刚学Flutter的时候就使用的这个,虽然还有公司在用,但是大部分已经选用其它方案了。

  • Redux:现在国内用的最多,因为咸鱼团队一直在用,还出了自己fish redux

  • bloc:个人觉的比Redux简单,而且好用,特别是一个页面里的状态管理,用起来很爽。

  • state:我们首页里已经简单接触,缺点是耦合太强,如果是大型应用,管理起来非常混乱。

  • Provide:是在Google的Github下的一个项目,刚出现不久,所以可以推测他是Google的亲儿子,用起来也是相当的爽。

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

flutter_Provide简介

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

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

首先添加依赖

provide: ^1.0.2

使用Provide

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

制作最基本的页面

快速写一个最基本的页面,并且全部使用了StatelessWidget进行。

import 'package:flutter/material.dart';

class CartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child: Column(
         children: <Widget>[
           Number(),
           MyButton()
         ],
        ),
      )
    );
  }
}

class Number extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top:200),
      child:Text('0')
    );
  }
}

class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child:RaisedButton(
        onPressed: (){},
        child: Text('递增'),
      )
    );
  }
}

创建Provide

这个类似于创建一个state,但是为了跟State区分,我们创建Provide。新建一个provide文件夹,然后再里边新建一个counter.dart 文件.代码如下:

import 'package:flutter/material.dart';

class Counter with ChangeNotifier{ //不用管理听众
  int value = 0;
  increment(){
    value++;
    notifyListeners(); //变化后通知听众,局部刷新Widget
  } 

}

这里混入了ChangeNotifier,意思是可以不用管理听众。现在你可以看到数和操作数据的方法都在Provide中,很清晰的把业务分离出来了。通过notifyListeners可以通知听众刷新。

将状态放入顶层

修改main.dart文件,先引入providecounter

import 'package:provide/provide.dart';
import './provide/counter.dart';

然后进行将providecounter引入程序顶层。

void main(){
  var counter =Counter();
  var providers  =Providers();
  providers
    ..provide(Provider<Counter>.value(counter));
    //..可多个状态, ;在最后
  runApp(ProviderNode(child:MyApp(),providers:providers));
}

ProviderNode封装了InheritWidget,并且提供了 一个providers容器用于放置状态。

获取状态

使用Provide Widget的形式就可以获取状态,比如现在获取数字的状态,代码如下。

class Number extends StatelessWidget {
 
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top:200),
      child: Provide<Counter>( //获取状态值
        builder: (context,child,counter){
          return Text(
            '${counter.value}',
             style: Theme.of(context).textTheme.display1, //大字体
          );
        },
      ),
    );
  }
}

修改状态

直接编写按钮的单击事件,并调用provide里的方法,代码修改如下。

class MyButton extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      child:RaisedButton(
        onPressed: (){ //修改状态
          Provide.value<Counter>(context).increment();
        },
        child: Text('递增'),
      )
    );
  }
}

其它页面读取状态

为了更进一步说明状态是共享的,在“会员中心”页面,我们也显示出这个数字,代码如下:

import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../provide/counter.dart';

class MemberPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:Center(
        child: Provide<Counter>(
        builder: (context,child,counter){
          return Text(
            '${counter.value}',
             style: Theme.of(context).textTheme.display1,
          );
        },
      ),
      )
    );
  }
}

总结:通过本节终结,可以掌握flutter_provide的使用方法,并作了一个最简单的案例。如果你以前使用过其它状态管理方案,你就会知道provide到底有多爽了。所以建议小伙伴使用Provide来进行管理状态。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
flutter Provide 状态管理篇

Provide是Google官方推出的状态管理模式。官方地址为: https://github.com/google/flutter-provide 现在Flutter的状态管理方案很多,redux、bloc、state、Provide。 Scoped Model : 最早的状...

osc_t2w0zvsf
2019/04/29
11
0
flutter 自定义主题切换

定义local_srorage.dart文件  使用Flutter第三方插件shared_preferences实现存储键值对信息  相关sharedpreferences插件可参考: flutter 本地存储 (shared_preferences) import 'dart:c...

osc_t2w0zvsf
2019/04/29
6
0
flutter 状态管理provide

一、引入依赖 二、创建Provide 三、在顶层引入 四、修改状态 五、获取状态

一个yuanbeth
2019/12/30
34
0
Flutter汇总贴

官方仓库:https://pub.dev/ json转dart类生成:https://caijinglong.github.io/json2dart/index_ch.html Fluuter常遇到的问题 Flutter从入门到进阶实战携程网App汇总贴 Flutter教程网 http...

osc_3fzeg1rk
2019/03/20
4
0
Flutter实战视频-移动电商-24.Provide状态管理基础

24.Provide状态管理基础 Flutter | 状态管理特别篇 —— Provide:https://juejin.im/post/5c6d4b52f265da2dc675b407?tdsourcetag=spcqq_aiomsg 点击左侧的导航右侧的导航发生变化,这属于两...

osc_uz0m1ri0
2019/04/12
1
0

没有更多内容

加载失败,请刷新页面

加载更多

未捕获ReferenceError:未定义$? - Uncaught ReferenceError: $ is not defined?

问题: How come this code throws an 此代码如何引发 Uncaught ReferenceError: $ is not defined 未捕获的ReferenceError:未定义$ when it was OK before? 以前什么时候可以? $(document......

javail
42分钟前
12
0
263. Ugly Number

题目: 263. Ugly Number 题目地址:https://leetcode.com/problems/ugly-number/ Write a program to check whether a given number is an ugly number. Ugly numbers are positive numbers......

JiaMing
今天
60
0
HCIA_ARP01

ARP(地址解析协议) eNSP 常用路由器:AR2220 常用交换机:S5700、S3700 常用终端:PC、MCS(主播服务器) 设备连线:Copper(以太网用到的双绞线)、Serial(串口线,2SA接口)、Auto(自动连...

创业789
今天
25
0
如何在Rails 4中使用问题 - How to use concerns in Rails 4

问题: The default Rails 4 project generator now creates the directory "concerns" under controllers and models. 默认的Rails 4项目生成器现在在控制器和模型下创建目录“Concer”。 ......

fyin1314
今天
19
0
【LeetCode】 57 括号生成

题目: 解题思路: https://leetcode-cn.com/problems/generate-parentheses/solution/hui-su-suan-fa-by-liweiwei1419/ 代码: import java.util.ArrayList;import java.util.List;publ......

JaneRoad
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部