前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter —— 状态管理 | Provide

Flutter —— 状态管理 | Provide

原创
作者头像
CatEatFish
修改2020-07-09 14:23:46
1.4K0
修改2020-07-09 14:23:46
举报
文章被收录于专栏:干活分享干活分享

接着上一篇的 ScopedModel 来讲解 Provide。

有关Provide的题外话,Provide 是 ScopedModel 的进阶或者说是兄弟,为何这么说呢?因为这两个插件的内容重叠的太多,所以对于这两个插件存在争议。

有兴趣想要了解更多的可以看看。 Provide争议

Provide 介绍

It is designed as a replacement for ScopedModel that allows for more flexible handling of data types and data.

它被设计为ScopedModel的替代品,允许更灵活地处理数据类型和数据。

可以理解为在ScopedModel的基础上再次封装了一下,使用起来更加方便。

有需要的可以先了解一下 Flutter —— 状态管理 | ScopedModel

Provide 使用

第一步 创建model
代码语言:txt
复制
///为了更好的理解,我创建了两个model
import 'package:flutter/material.dart';
//model1
class Counter with ChangeNotifier {
  int _value;
  int get value => _value;
  Counter(this._value);
  void increment() {
    _value++;
    notifyListeners();
  }
}
//model2
import 'package:flutter/material.dart';

class PersionModel with ChangeNotifier {
  List<String> persionNames = ['小明', '小红'];
  PersionModel();

  List<String> get getPersionNameList => persionNames;

  void addName(String name) {
    persionNames.insert(0, name);
    notifyListeners();
  }
}
第二步 将需要传递的model加入到providers中
代码语言:txt
复制
void main() {
  //1.创建 model
  var counter =Counter(0);
  var persionNameModel=PersionModel();
  //2.创建 Providers
  var providers=Providers();
  providers
  //3.将创建的 modle 加入到 providers 中
    ..provide(Provider.value(counter))
    ..provide(Provider.value(persionNameModel));
  runApp(
  //4.通过 ProviderNode 将树包裹
    ProviderNode(child:  MyApp(), providers: providers)
     );
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstPage(),
    );
  }
}
第三步 构建小部件

方法一:通过 provide 构建小部件

方法二:StreamBuilder<Model>构建小部件

二者区别在于StreamBuilder可以操作stream流,做一些简单的操作。

代码语言:txt
复制
///方法一: 通过 provide 构建小部件
Provide<Modle>(
  builder: (context, child, modle) {
    return Text('小部件' + modle.value);
  },
),
代码语言:txt
复制
///方法二: StreamBuilder<Model>构建小部件
StreamBuilder<Counter>(
            initialData:Provide.value<Counter>(context) ,
            stream: Provide.stream<Counter>(context).where((Counter counter)=> counter.value % 2 ==0),
            builder: (context,snapshot){
              return Text(
                '通过StreamBuilder构建Widget->${snapshot.data.value}',
              );
            },
          ),
代码语言:txt
复制
class FirstPage extends StatefulWidget {
  @override
  FirstPageState createState() => new FirstPageState();
}

class FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('第一个界面'),
      ),
      body: Column(
        children: <Widget>[
        //通过Provide构建一个 Text 小部件
          Provide<PersionModel>(
            builder: (context, child, persionNameModel) {
              return Text('取第一个人的名字' + persionNameModel.getPersionNameList[0]);
            },
          ),
          Provide<Counter>(
            builder: (context, child, counter) {
              return Text('当前数值' + counter.value.toString());
            },
          ),
        //通过StreamBuilder构建一个 Text 小部件
          StreamBuilder<Counter>(
           initialData: Provide.value<Counter>(context),
           //可以操作的 stream 流
           stream: Provide.stream<Counter>(context)
               .where((Counter counter) => counter.value % 2 == 0),
           builder: (context, snapshot) {
             return Text(
               '通过StreamBuilder构建Widget->${snapshot.data.value}',
             );
           },
         ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            Navigator.of(context)
                .push(MaterialPageRoute(builder: (context) => SecondPage()));
          }),
    );
  }
}

至此就可以使用 Provide 了,另外还需要修改数据的方法,接下来继续走。

第四步 获取与调用 Model 中的方法
代码语言:txt
复制
1.获取 model 的方法  Provide.value<Model>(context)
2.调用 model 中的数据 Provide.value<Model>(context).方法名
///例如在 SecondPage 界面中
floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            ///value值加一
            Provide.value<Counter>(context).increment();

            ///往人名集合中添加人名
            Provide.value<PersionModel>(context).addName(
                '小紫' + Provide.value<Counter>(context).value.toString());
          }),
Provide 特性

1.provide可以构建 Stream 流,通过流我们可以做一系列的变换,这是Provide的一大亮点。

2.Provide 可以添加多个Model

Provide 源码分析

代码语言:txt
复制
内容点1:
providers
   ..provide(Provider.value(counter));
(1) Provider.value(counter)=>返回 Provider 对象

(2) providers.provide()=>
  //将provide添加进map集合
  Map<Type, Provider<dynamic>> _providersForScope(scope) =>
      _providers[scope ?? defaultScope] ??= {};

(3) ProviderNode(child:  MyApp(), providers: providers)
ProviderNode创建一个小部件,返回
_InheritedProviders(
       child: child,
       providers: providers,
       parent: _InheritedProviders.of(context));

同样_InheritedProviders继承了InheritedWidget,通过InheritedWidget向下传递数据

内容点2:如何构建小部件,并且刷新数据
Provide<PersionModel>(
            builder: (context, child, persionNameModel) {
              return Text('取第一个人的名字' + persionNameModel.getPersionNameList[0]);
            },
          ),

class Provide<T> extends StatelessWidget {
  /// Called whenever there is a change.
  final ValueBuilder<T> builder;

  /// The part of the widget tree not rebuilt on change.
  final Widget child;

  /// The scope from which the type is requested
  final ProviderScope scope;

  /// Constructor.
  const Provide({@required this.builder, this.child, this.scope});

  /// 返回model
  static T value<T>(BuildContext context, {ProviderScope scope}) {
    final provider = _InheritedProviders.of(context).getValue<T>(scope: scope);
    assert(provider != null);

    return provider.get(context);
  }

  ///返回一个stream
  static Stream<T> stream<T>(BuildContext context, {ProviderScope scope}) {
    final provider = _InheritedProviders.of(context).getValue<T>(scope: scope);
    assert(provider != null);

    return provider.stream(context);
  }

  @override
  Widget build(BuildContext context) {
    /// 从map集合中获取provider
    final provider = _InheritedProviders.of(context).getValue<T>(scope: scope);
    /// 返回model
    final value = provider.get(context);
    final listenable = _getListenable(provider, value);
    ///关键字is的意思 类型匹配 类似 java 的 instance of
    if (provider is Listenable) {
      return ListeningBuilder(
        listenable: listenable,
        child: child,
        builder: (buildContext, child) =>
            builder(buildContext, child, provider.get(context)),
      );
    } else if (value is Listenable) {
    /// value 就是我们定义的model ,model with ChangeNotifier
    /// ChangeNotifier implements Listenable
      return ListeningBuilder(
        listenable: listenable,
        child: child,
        builder: (buildContext, child) => builder(buildContext, child, value),
      );
    }

    throw ArgumentError('Either the type or the provider of it must'
        ' implement listenable. To get a non-listenable value, use the static'
        ' Provide.value<T>.');
  }
}
对于ListeningBuilder,有这么一段话
/// Widget that rebuilds part of the widget tree whenever
/// the [listenable] changes.
当listenable 发生改变时,widget 会rebuild 重新构建widget

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Provide 介绍
  • Provide 使用
  • Provide 源码分析
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档