Flutter状态管理:Provider4 入门教程(一)

背景

很久之前,在我们的QQ群里有位朋友一直想让我出个[Provider](https://github.com/rrousselGit/provider)教程,但是我一直没有允诺。因为我觉得如果写入门级的教程,已经有官方文档了,已经有人写了,如果要深入一些呢,我又不会。但最近不太一样了,因为要水文了。

状态管理

说到Flutter,我们很难回避状态管理。对于React的开发者来说,状态管理并不陌生;但对于我们这种纯原生开发者来说,还是有些陌生的。
Flutter是声明式的,这意味着Flutter是通过更新UI来反映当前app的状态:

简单来说,在Flutter中,如果我们想更新我们的控件,最基本的方式应该是setState()了。如果说我们一个页面里的组件不多,直接使用setState()并没有什么问题,但是实际工作中,我们的页面布局还是足够复杂的。

一种情况是我们在一个页面中:

如果我们把所有的Widget都写到一个类里,这个类一定会是个200多斤的胖子,而且很容易陷入{{{{}}}}旋涡。这时我们会想到Widget进行拆分,但这个时候如果仅仅依靠setState(),你会发现这将十分痛苦,因为setState()的作用域仅限于当作Widget,也就是说如果你仅仅在最底层的Widget里调用setState并不会更新顶层的Widget,这就意味你要通过回调实现,而且在这个过程中你会发现一些Widget类里的变量又必须是不可变的,这又会引起其他的麻烦事,不谈。

而通常来说,实际开发中,很可能有跨页面共享数据的可能:

上图为大家展示了一个物车功能,当用户点击Add时,会将商品添加到购物车,点击购物车时,我们可以看到刚刚的商品。想想如果不使用状态管理,我们应该如何实现呢?

说了这么多,无非就是想说使用状态管理的更要性。简单来说就是如何方便快捷地在Widget之间共享数据并将数据展示在页面上。

Flutter的状态管理方式包括但不限于ProviderBlocRedux以及Fish-Redux

  • Bloc准确地来说是一种理念,也是我使用的第一个状态管理,现在也有对应的实现库,一般来说是基于响应式编程的。
  • Redux对于React开发者来说并不陌生,毕竟Flutter这块也是借鉴了React
  • Fish-Redux脱胎于Redux,阿里出品,总体来说比较复杂,适合中大型项目。现在社会也有生成Fish-Redux模板代码的工具
  • ProviderGoogle推荐的状态管理,也是我使用的第二种状态管理,相对来说比较简单省心。

接下来,我将简单地介绍一下Provider的使用。

初识Provider

Provider其实是对InheritedWidget的封装。相比于直接使用InheritedWidget,使用Provider有很多好处,比如说简化资源的分配与处置,支持懒加载等等。

Provider 为我们提供了一些不同类型的Provider。要查看所有类型的provider可以点击这里

namedescription
Provider最基础的provider。它携带一个值并将这个值暴露,无论这个值是什么。
ListenableProviderListenable对象而创建的providerListenableProvider会监听对象的变化,只要ListenableProvider的listner被调用,ListenableProvider就会重新构建依赖于该provider的控件。
ChangeNotifierProviderChangeNotifierProvider是一种特殊的ListenableProvider,它基于ChangeNotifier,并且在有需要的时候,它会自动调用ChangeNotifier.dispose
ValueListenableProvider监听ValueListenable并只会暴露ValueListenable.value.
StreamProvider监听一个Stream 并且对外暴露最新提交的值。
FutureProvider携带一个 Future,当Future完成时,它会更新依赖于它的控件。

鉴于本人才疏学浅,本文并不会逐一讲述如何使用各种Provider,所以本文挑选了我用的最多的ChangeNotifierProvider来讲解,希望可以抛砖引玉。

创建一个Proivder

一般来说创建Provider有两种方式:

  • 默认构造方法
  • .value构造方法

当我们要新创建一个对象,我们要使用默认构造方法而不是使用.value构造方法,因为如果我们通过.value创建一个对象可能会引起内存泄漏或产生一些意想不到的问题。
这里简单解释一下为什么不能使用value创建一个对象,英文好的可以看StackOverflow原文。因为Flutter中的build方法应该是纯净无副作用的,很多外部因素会触发rebuild,比如说:

  • 路由的pop/push
  • 屏幕大小重新调整,通常来说是因为键盘变化或者屏幕方向变化
  • 父控件重绘子控件
  • 依赖于InheritedWidget的控件(Class.of(context) 部分)发生了变化

所以说,使用.value创建对象的问题在于会使得build变得不纯粹或者说具有副作用,会使来自外部的build调用变得很麻烦。
这个问题到此为止,喜欢研究的朋友可以自行探索。

  • 使用Providercreate中创建对象。
Provider(
  create: (_) => MyModel(),
  child: ...
)
  • 不要 使用Provider.value创建对象。
ChangeNotifierProvider.value(
 value: MyModel(),
 child: ...
)
  • 不要 从可以随时间变化而变化的变量中创建对象。
    因为在这种情况中,即使引用的变量发生了变化,我们创建的对象也不会被更新。
int count;
Provider(
  create: (_) => MyModel(count),
  child: ...
)

If you want to pass variables that can change over time to your object, consider using ProxyProvider:
如果想将随时间变化而变化的变量传递到我们的对象中,可以考虑使用ProxyProvider

int count;
ProxyProvider0(
  update: (_, __) => MyModel(count),
  child: ...
)

笔记:当使用Providercreate/update回调时,我们要注意的是,默认情况下,create/update的调用是懒式调用的。这就意味着,只有我们Provider中的数据至少被请求一次,create/update才会被调用。如果我们想做一些预处理,我们可以使用lazy参数来禁止这一特性:

MyProvider(
  create: (_) => Something(),
  lazy: false,
)

读取Provider中的数据

最简单的读取数据的方式是使用BuildContext的扩展方法:

  • context.watch(), 该方法会使用对应的控件监听T的变化。
  • context.read(), 该方法直接返回T,并不会监听的变化。
  • context.select<T, R>(R cb(T value)), 该方法会使对应的控件只监听一小部分T的变,从名字上看我们就知道这是一个筛选器。

当然了我们也可以使用静态方法Provider.of<T>(context),它和watch/read的行为很像,这也是在上面扩展方法出现之前,我们获取数据的方式。

These methods will look up in the widget tree starting from the widget associated with the BuildContext passed, and will return the nearest variable of type T found (or throw if nothing is found).

It’s worth noting that this operation is O(1). It doesn’t involve actually walking in the widget tree.
这些方法会从控件树中进行查找,并且是从与传递过来的BuildContext相关的控件开始,最终返会找到并返回与类型T的最近变量(如果未找到,则抛出)。

值得注意的是,这个操作的复杂度为O(1)。 实际上,这并不会在控件树中游走。

说到现在,无非还是对文档的翻译,现在让我们走码上任吧~~~

Show me the code

故事还是要从Flutter的计数器说起,因为新创建的Flutter项目模板就是这个计数器了,现在我们要用ChangeNotifierProvider来简单改造一下这个项目。

  • MyHomePageStatefulWidget改成StatelessWidget
  • 使用ChangeNotifierProvider来更新页面

第一个版本

首先,我们要创建一个ChangeNotifier

class MyChangeNotifier extends ChangeNotifier {
  int _counter = 0;
  int get counter => _counter;
  incrementCounter() {
    _counter++;
    notifyListeners();//要更新UI记得调用这个方法
  }
}

当前我们点击FloatingActionButton时会调用MyChangeNotifierincrementCounter方法,要注意的是当我们处理完业务时,如果需要更新UI需要调用notifyListeners来通知Provider更新UI。

接下来我们实现我们的UI。

首先,我们要创建MyHomePage, UI布局直接使用的是example里的布局,不同的是我们使用的是StatelessWidget。然后我们通过BuildContext取出MyChangeNotifier实例。要注意到,当我们点击FloatingActionButton,我们并没有调用setState(废话,StatelessWidget也不能setState),但我们的UI依然会被更新。代码如下:

class MyHomePage extends StatelessWidget {
  final String title;
  MyHomePage({Key key, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    MyChangeNotifier notifier =
        Provider.of(context); //通过Provider.of(context)获取MyChangeNotifier
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${context.watch<MyChangeNotifier>().counter}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: notifier.incrementCounter,//点击时我们期望输出点击次数
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

现在我们要用ChangeNotifierProvider包裹MyHomePage,这样可以保证在MyHomePage中可以通过BuildContext取到MyChangeNotifier实例。

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'Flutter Demo',
     theme: ThemeData(
       primarySwatch: Colors.blue,
       visualDensity: VisualDensity.adaptivePlatformDensity,
     ),
     home: ChangeNotifierProvider(
         create: (_) => MyChangeNotifier(),
         child: MyHomePage(title: 'Flutter Demo Home Page')),
   );
 }
}

到此为止,代码已经写完了,运行下,效果是不是和example一模一样呢?

当然了,我们可以直接在MyChangeNotifier中直接定义一个字段叫outputMessage,然后直接在MyHomePage中直接给Text赋值。

Text(
    context.watch<MyChangeNotifier>().outputMessage,
    style: Theme.of(context).textTheme.headline4,
    ),

第二个版本

现在看来,我们已经学会了ChangeNotifierProvider的基本用法,那么我们现在要对上面的代码简单改造一下。

  • ChangeNotifierProvider移动到MyHomePage

很简单了,代码如下:


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
class MyHomePage extends StatelessWidget {
  final String title;
  final MyChangeNotifier notifier = MyChangeNotifier();
  MyHomePage({Key key, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => notifier,
      child: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '${context.watch<MyChangeNotifier>().counter}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: notifier.incrementCounter,//点击时我们期望输出点击次数
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

当我们高高兴兴的运行上面的代码时却遇到了一些问题:
Simulator Screen Shot – iPhone 11 Pro Max – 2020-06-02 at 19.18.24.png

当我第一次遇到这个错误的时候,我不由自主的说了一句以F开头以U结尾的话。但是话说了也不能不解决问题,这个时候,我们可能需要Consumer

Consumer的使用

Consumer本身没有魔法,也没有什么花里胡哨的实现。只不过是在一个新的控件中使用Provider.of,然后将这个控件的build方法委托给lamda里的builder。这个builder会被调用多次。就是这么简单。

Consumer的设计初衷有两个

  • 当我们的BuildContext中不存在指定的Provider时,Consumer允许我们从Provider中的获取数据。
  • 通过提供更多细小的重绘达到性能的优化。

我们现在遇到的就是第一种情况,至于第二种情况,读者们可自行探讨。
所以,我们可以通过加一个Consumer来解决上面的ProviderNotFoundException问题:


class MyHomePage extends StatelessWidget {
  final String title;
  final MyChangeNotifier notifier = MyChangeNotifier();
  MyHomePage({Key key, this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => notifier,
      child: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Consumer<MyChangeNotifier>(
          builder: (_, localNotifier, __) => Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '${localNotifier.counter}',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: notifier.incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

再次运行,是不是很完美?

暂时性总结

时间有限,本来想一口气写完,但是互联网时代不玩玩饥饿营销怎么好意思说自己混过互联网。。。

作为Provider入门第一篇,本文还是十分简单的,毕竟只是改下了一下Flutter example。在接下来的文章中,我会介绍更多的Provider用法与问题,也包含更复杂的demo。

未完待续。。。
期待不期待你说了算。

https://juejin.im/post/5ed3af0f6fb9a047f2298c71

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
后端
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论