Flater-Provide狀態管理

项目的商品类别页面将大量的出现类和类中间的状态变化，这就需要状态管理。现在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作了两个类。也就是估计作了一个不可变的页面，并且用两个类隔离了。然后我们要点击按钮，增加数字数量，也就是把状态打通。

制作最基本的页面

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

import 'package:flutter/material.dart';


class IndexPage 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('递增'),
        )
    );
  }
}

View Code

添加依赖

在pubspec.yaml中添加Provide的依赖。请使用最新版本。

dependencies:
    provide: ^1.0.2

创建Provide

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

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {
  int value =0 ;

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

将状态放入顶层

先引入provide和counter：

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

然后进行将provide和counter引入程序顶层。

void main(){
  var counter = Counter();
  var providers  = Providers();
  providers
    //多個狀態的管理
    //..provide(Provider<Counter>.value(counter))
    ..provide(Provider<Counter>.value(counter));

//runApp(MyApp());
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('递增'),
        )
    );
  }
}

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,
          );
        },
      ),
    );
  }
}

builder有三个参数

context，上下文
child，返回构建的小部件即可
provide，即我们创建的数据对象，名称随意

修改状态

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

//按鈕
class MyButton extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
        child:RaisedButton(
          onPressed: (){
            //調用狀態管理增加的方法
            Provide.value<Counter>(context).increment();
          },
          child: Text('递增'),
        )
    );
  }
}

其他頁面可以直接讀取狀態

//Provide.value(context)的形式
Provide.value<Counter>(context).getValue.toString(),

posted on 2019-12-02 13:51 诉说静风阅读(711) 评论(0) 收藏举报

刷新页面返回顶部