专栏首页阿策小和尚【Flutter 专题】87 初识状态管理 Bloc (二)

【Flutter 专题】87 初识状态管理 Bloc (二)

和尚前两天刚学习了基本的 Bloc 状态管理,其中 UI 通过 setState() 方式更新数据,今天进一步了解进阶版的 FlutterBloc 状态管理;

FlutterBloc

FlutterBloc 可以更便利的实现 Bloc,主要是为了与 Bloc 共同使用而构建的;同样需要提前了解几个概念;和尚继续以上一节中的 Demo 进行扩展,添加了 Number 的递增和递减;

BlocBuilder

BlocBuilder 和尚理解为 Bloc 构造器,主要用于构建 Widget 以响应新的状态,相较于 StreamBuilder 更便捷;可替代和尚上一节使用的 setState()

const BlocBuilder({
    Key key,
    @required this.builder,
    B bloc,
    BlocBuilderCondition<S> condition,
})

分析源码可知,builder 用于相应状态的 Widgetbloc 为当前提供的范围仅限于单个 Widget 且无法通过父级 BlocProvider 和当前级访问的 Bloc 时才使用;而 condition 为可选的过度细粒度,包括两个参数,之前的状态和当前的状态,返回值为 Boolean 类型,true 为更新状态重建 Widgetfalse 时不重新构建;

@override
Widget build(BuildContext context) {
  return BlocBuilder<NumberBloc, int>(
      bloc: _numBloc,
      condition: (previousState, state) {
        print('BlocPage.condition->$previousState==$state');
        return state <= 30 ? true : false;
      },
      builder: (context, count) {
        return Scaffold(
            appBar: AppBar(title: Text('Bloc Page')),
            body: Center(
                child: Column( mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                  Text('当 Number > 30 时,不进行变更', style: TextStyle(fontSize: 20.0, color: Colors.blue)),
                  SizedBox(height: 20.0),
                  Text('当前 Number = ${_numBloc.state}', style: TextStyle(fontSize: 20.0, color: Colors.blue))
                ])),
            floatingActionButton: Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  FloatingActionButton(
                      heroTag: 'addTag', child: Icon(Icons.add),
                      onPressed: () => _numBloc.add(NumberEvent.addEvent)),
                  SizedBox(height: 20.0),
                  FloatingActionButton(
                      heroTag: 'removeTag', child: Icon(Icons.remove),
                      onPressed: () => _numBloc.add(NumberEvent.removeEvent))
                ]));
      });
}

BlocProvider

BlocProviderBloc 的供应者,创建 Bloc 并供应给其子控件树;

BlocProvider({
    Key key,
    @required Create<T> create,
    Widget child,
    bool lazy,
})

简单了解源码可知,BlocProvider 通过 create 创建一个 Bloc;通过 child 设置用来响应状态的变更的 Widgetlazy 为是否懒创建(延迟创建),和尚理解的为是否在使用时再进行创建,默认为 true

class _BlocPageState extends State<BlocPage> {

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
        create: (BuildContext context) => NumberBloc(),
        child: BlocBuilder<NumberBloc, int>(
            condition: (previousState, state) {
          print('BlocPage.condition->$previousState==$state');
          return state <= 30 ? true : false;
        }, builder: (context, count) {
          return Scaffold(
              appBar: AppBar(title: Text('Bloc Page')),
              body: Center(
                  child: Column( mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                    Text('当 Number > 30 时,不进行变更', style: TextStyle(fontSize: 20.0, color: Colors.blue)),
                    SizedBox(height: 20.0),
                    Text('当前 Number = ${BlocProvider.of<NumberBloc>(context).state}', style: TextStyle(fontSize: 20.0, color: Colors.blue))
                  ])),
              floatingActionButton: Column(
                  crossAxisAlignment: CrossAxisAlignment.end,
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    FloatingActionButton(
                        heroTag: 'addTag', child: Icon(Icons.add),
                        onPressed: () => BlocProvider.of<NumberBloc>(context).add(NumberEvent.addEvent)),
                    SizedBox(height: 20.0),
                    FloatingActionButton(
                        heroTag: 'removeTag', child: Icon(Icons.remove),
                        onPressed: () => BlocProvider.of<NumberBloc>(context).add(NumberEvent.removeEvent))
                  ]));
        }));
  }
}

BlocListener

BlocListenerBlocBuilder 应用有相似之处;其中 listener 用于监听状态变更,可在此做出相应的业务处理;

class BlocListener<B extends Bloc<dynamic, S>, S> extends BlocListenerBase<B, S> with BlocListenerSingleChildWidget {
  final Widget child;
  const BlocListener({
    Key key,
    @required BlocWidgetListener<S> listener,
    B bloc,
    BlocListenerCondition<S> condition,
    this.child,
  })
}

简单分析源码可得:

  1. childBlocListener 提供的 Widget 用来响应状态的变更;
  2. blocBlocBuilder 对应的 bloc 用法相同,如果省略了 bloc 参数,BlocListener 将使用 BlocProvider 和当前函数自动执行查找 BuildContext
  3. condition 为可选的过度细粒度,包括两个参数,之前的状态和当前的状态,返回值为 Boolean 类型,true 为进行 listener 的监听,false 时过滤掉 listener 的监听;此时的过滤与 BlocBuilder 中的 condition 过滤无关;
  4. listener 在每次状态变更时调用,其中包括上下文环境和当前状态两个参数;
@override
Widget build(BuildContext context) {
  return BlocListener<NumberBloc, int>(
      bloc: _numBloc,
      listener: (context, count) {
        print('BlocPage.listene->$count');
      },
      condition: (previousState, state) {
        print('BlocPage.BlocListener.condition->$previousState==$state');
        return state <= 20 ? true : false;
      },
      child: BlocBuilder<NumberBloc, int>(
          bloc: _numBloc,
          condition: (previousState, state) {
            print('BlocPage.condition->$previousState==$state');
            return state <= 30 ? true : false;
          },
          builder: (context, count) {
            return Scaffold(
                appBar: AppBar(title: Text('Bloc Page')),
                body: Center(
                    child: Column( mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                      Text('当 Number > 20 时,BlocListener 过滤 listener 监听,与 BlocBuilder 中过滤的状态无关', style: TextStyle(fontSize: 20.0, color: Colors.red)),
                      SizedBox(height: 20.0),
                      Text('当 Number > 30 时,Number 不进行变更', style: TextStyle(fontSize: 20.0, color: Colors.green)),
                      SizedBox(height: 20.0),
                      Text('当前 Number = ${_numBloc.state}', style: TextStyle(fontSize: 20.0, color: Colors.blue))
                    ])),
                floatingActionButton: Column( crossAxisAlignment: CrossAxisAlignment.end, mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      FloatingActionButton(
                          heroTag: 'addTag', child: Icon(Icons.add),
                          onPressed: () => _numBloc.add(NumberEvent.addEvent)),
                      SizedBox(height: 20.0),
                      FloatingActionButton(
                          heroTag: 'removeTag', child: Icon(Icons.remove),
                          onPressed: () => _numBloc.add(NumberEvent.removeEvent))
                    ]));
          }));
}

TestCode

和尚在测试过程中遇到一些小问题,仅简单记录一下,以防忘记;

Q1: There are multiple heroes that share the same tag within a subtree.

和尚在扩展上一节的 Demo 时,点击进入页面时会黑屏,提示如下错误;

A1: 在 FloatingActionButton 中添加 heroTag 区分

以前在学习 Hero Animation 时,在同一个 Page 页面不能用两个相同的 heroTag,和尚这次忽略了 FloatingActionButton 中也应用了 Hero 动画,需要区分一下即可;

floatingActionButton: Column(
    crossAxisAlignment: CrossAxisAlignment.end, mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      FloatingActionButton(
          heroTag: 'addTag', child: Icon(Icons.add),
          onPressed: () => _numBloc.add(NumberEvent.addEvent)),
      FloatingActionButton(
          heroTag: 'removeTag', child: Icon(Icons.remove),
          onPressed: () => _numBloc.add(NumberEvent.removeEvent))
    ]));

Q2: BlocProvider.of() called with a context that does not contain a Bloc of type …

和尚在刚开始尝试 BlocProvider.of(context) 方式获取 Bloc 时报如下错误;

A2: 在 build() 外创建或通过如下方式创建,并建议与 BlocBuilder 成对设置

// build() 方法外创建
NumberBloc _numBloc;
@override
void initState() {
  super.initState();
  _numBloc = NumberBloc();
}

// BlocProvider create() 创建
BlocProvider(
  create: (BuildContext context) => NumberBloc(),
  child: ....
);

和尚刚接触 FlutterBloc 很多高级用法还没涉及到,下一节会尝试多种 Bloc 共同使用的场景,对各方面理解还不到位,如有错误请多多指导!

本文分享自微信公众号 - 阿策小和尚(gh_8297e718c166),作者:阿策小和尚

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【Flutter 专题】66 图解基本约束 Box (一)

    和尚在学习过程中,为了调整或适配 Widget 大小时,会设置 Widget 或嵌套使用一些约束 Widget;和尚针对性学习一下这一系列的约束 B...

    阿策
  • 【Flutter 专题】100 何为 Flutter Widgets ?

    和尚学习 Flutter 有一段时间了,其中 Flutter 的核心思想是 Everything is Widget;但是什么是 Widget 它与...

    阿策
  • 【Flutter 专题】52 图解可折叠状态栏

    和尚以前在学习滑动冲突时曾用过 Sliver 系列的 Widget,和尚这次尝试用 SliverAppBar 来处理;

    阿策
  • 个性化推荐系统那些绕不开的经典问题

    在恰到好处的时候,用户邂逅到心仪的事物,想必正是一件美好之事。推荐系统就是那个促成美好的丘比特。

    IT派
  • js获取URL中的参数

    一般网页开发中会使用url进行传参,有的采用java的方式或其他的方式,下面我来介绍一下如何通过js来获取url中的参数。请看代码:

    无邪Z
  • 给我一面国旗@微信官方

    “请给我一面国旗 ? ”@微信官方 昨天刚吃完饭 小N就发现微信好友的头像上 突然都多了一面五星红旗 ? 像这个样子: ? 再打开朋友圈的时候 画风变成了清一...

    腾讯NEXT学位
  • Kali Linux Web渗透测试手册(第二版) - 3.9 - WebScarab的使用

    thr0cyte,Gr33k,花花,MrTools,R1ght0us,7089bAt

    用户1631416
  • GDC2011: Fast and Efficient Facial Rigging

    逍遥剑客
  • 你以为自己真的了解用户画像?其实猫腻可多了

    作者 CDA 数据分析师 背景 刘路老师之前主要是做政府数据分析,目前主要服务企业。他认为政府和企业的数据分析没有本质区别,都是有目的的进行收集、整理、加工...

    CDA数据分析师
  • 英特尔主题馆再度启航!携顶级硬件参展2018ChinaJoy

    由ChinaJoy主办方汉威信恒与中国VR/AR娱乐产业联盟(VREIA)联合主办的第三届国际智能娱乐硬件展览会(eSmart)将于2018年8月3日—8月6日...

    VRPinea

扫码关注云+社区

领取腾讯云代金券