为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 Flutter 87: 初识状态管理 Bloc (二)

Flutter 87: 初识状态管理 Bloc (二)

标签：
Android

      小菜前两天刚学习了基本的 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 用于相应状态的 Widget，bloc 为当前提供的范围仅限于单个 Widget 且无法通过父级 BlocProvider 和当前级访问的 Bloc 时才使用；而 condition 为可选的过度细粒度，包括两个参数，之前的状态和当前的状态，返回值为 Boolean 类型，true 为更新状态重建 Widget，false 时不重新构建；

@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

      BlocProvider 为 Bloc 的供应者，创建 Bloc 并供应给其子控件树；

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

      简单了解源码可知，BlocProvider 通过 create 创建一个 Bloc；通过 child 设置用来响应状态的变更的 Widget；lazy 为是否懒创建(延迟创建)，小菜理解的为是否在使用时再进行创建，默认为 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

      BlocListener 与 BlocBuilder 应用有相似之处；其中 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. child 为 BlocListener 提供的 Widget 用来响应状态的变更；
  2. bloc 与 BlocBuilder 对应的 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 共同使用的场景，对各方面理解还不到位，如有错误请多多指导！

来源： 阿策小和尚

点击查看更多内容
发表于 2020.05.08 18:39， 共 2324 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
1人点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

老菜和尚

移动开发工程师
手记
篇
粉丝
166
获赞与收藏
165

关注作者，订阅最新文章

相关文章推荐

阅读免费教程

感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消