Flutter 学习之旅(四十九) Flutter 状态 flutter_bloc学习(三)

利用flutter_bloc 完成listview 中checkbox 的勾选,我在写的过程中发现这个里面的坑还是有很多的,先上一下效果图


GIF 2020-11-2 14-59-32.gif

在写这个demo 的过程中我一共找到了自己好几处运用flutter_bloc的错误之处的地方,
第一个问题,

  BlocProvider.of() called with a context that does not contain a Cubit of type $T.
  No ancestor could be found starting from the context that was passed to BlocProvider.of<$T>().
  This can happen if the context you used comes from a widget above the BlocProvider.
  The context used was: $context

这个问题就是利用BlocProvider.of<C>(this)的方法时找不到这个provider ,这其中的原因有2个,其中一个是在child 的context 并没有provider 的依赖,

BlocProvider(
                create: (_) => TsmListCheckItem.forInstance(map),
                child:_TsmItemWidget(list[index], index,map),
              );
            }

即在上面中的child 直接使用BlocBuilder,并没有使用StatelessWidget 来包裹,
第二个问题就是我所遇到的,在使用BlocBuilder 中,没有指定 cubit 的类型,

///错误写法
BlocBuilder(
                builder: (con, state) {
                  return Checkbox(
                    value: state[index],
                    activeColor: Colors.redAccent,
                    /// 勾选后颜色
                    onChanged: (isSelect) {
                      context.bloc<TsmListCheckItem>().add(index);
                    },
                  );
                },
              )

上面就是我的错误写法, 正确写法在这里应该指定provider的类型,否则provider.of 是肯定找不到类型的,

///正确的写法
BlocBuilder<TsmListCheckItem, Map<int, bool>>(///给blocBuilder 指定类型,
                builder: (con, state) {
                  return Checkbox(
                    value: state[index],
                    activeColor: Colors.redAccent,
                    /// 勾选后颜色
                    onChanged: (isSelect) {
                      context.bloc<TsmListCheckItem>().add(index);
                    },
                  );
                },
              )

2,第二个问题就非常有意思了, 那就是我利用BlocProvider 包裹listview 的item,每次更改后的状态在滑出屏幕再滑回后又变成初始化的状态了,下面我上一下我修改过后的代码

class _TsmListViewCheckState extends State<TsmListViewCheckPage> {
  ScrollController _controller;

  List<String> list;
  Map<int,bool> map;

  @override
  void initState() {
    _controller = ScrollController();
    list = ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7', '测试8', '测试9'];
    map=HashMap();
    for(int i=0;i<list.length;i++){
      map.putIfAbsent(i, () => false);
    }
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('ListView 勾选'),
          centerTitle: true,
        ),
        body:ListView.builder(
            itemCount: list.length,
            physics: BouncingScrollPhysics(),
            controller: _controller,
            itemBuilder: (con, index) {
             return  BlocProvider(
                create: (_) => TsmListCheckItem.forInstance(map),
                child:_TsmItemWidget(list[index], index,map),
              );
            })
        );
  }
}

class _TsmItemWidget extends StatelessWidget {
  final String _tag;
  final Map<int,bool> _map;
  final int index;

  _TsmItemWidget(this._tag, this.index,this._map);

  @override
  Widget build(BuildContext context) {
    return BlocListener<TsmListCheckItem, Map<int, bool>>(
      listener: (con,state){
        _map[index]=!_map[index];
      },
      child: Column(
        children: [
         ....
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ...
              BlocBuilder<TsmListCheckItem, Map<int, bool>>(
                builder: (con, state) {
                  return Checkbox(
                    value: state[index],
                    activeColor: Colors.redAccent,
                    /// 勾选后颜色
                    onChanged: (isSelect) {
                      context.bloc<TsmListCheckItem>().add(index);
                    },
                  );
                },
              ),
             ....
            ],
          )
        ],
      ),
    );
  }
}

这里我隐藏了部分代码,我的思路就是利用map<int,bool> 来保存每个位置的状态,每一个item 提供一个provider , 在每次勾选的时候改变这个map 的index 的bool类型的值,我在写的过程中发现 BlocProvider 中的 create 的 TsmListCheckItem.forInstance(map) 这个方法会调用多次,也就是说如果外部这个map的类型不跟着勾选后的结果变更的话,就会导致在调用 BlocProvider 中的 create 的方法的时候,让状态变成最开始的默认值,所以这里我增加了一层BlocListener ,在每次勾选后改变外部这个map的值,这样可以在后续调用TsmListCheckItem.forInstance(map) 的方法的时候,状态也是改变后的状态,这个问题我查了好久, 相信如果大家好好体会的话还是非常有帮助的,

其实这个问题是我强行给自己制造的,如果我用BlocProvider 包裹的是LsitView,而不是LsitView 的Item ,那么上面那种重复创建的问题就不会存在了,最开始的写法也是这么写的,这里这是为了把问题展示出来才修改到Iitem 上的,

最后一个问题,就是在mapEventToState 的时候不能对这个state修改,而是必须要重新new ,原因就是在接下来会遇到 state==nextState 这个判断,如果对state做修改的话,这个判断就会一直相等,从而无法生成新的状态

class  TsmListCheckItem extends Bloc<int,Map<int,bool>>{
  TsmListCheckItem(Map<int,bool>  initialState) : super(initialState);
  @override
  Stream<Map<int,bool>> mapEventToState(int index) async*{
    HashMap<int ,bool> nextState=Map.from(state);
    nextState[index]=!state[index];
    yield nextState;
  }
  static TsmListCheckItem  forInstance(Map<int,bool> map) {
    TsmListCheckItem item=TsmListCheckItem(map);
    return item;
  }
}

下面我贴一下源码,

class  TsmListCheckItem extends Bloc<int,Map<int,bool>>{

  TsmListCheckItem(Map<int,bool>  initialState) : super(initialState);

  @override
  Stream<Transition<int, Map<int, bool>>> transformTransitions(Stream<Transition<int, Map<int, bool>>> transitions) {
    return super.transformTransitions(transitions);
  }

  @override
  Stream<Map<int,bool>> mapEventToState(int index) async*{
    HashMap<int ,bool> nextState=Map.from(state);
    nextState[index]=!state[index];
    yield nextState;
  }

  static TsmListCheckItem  forInstance(Map<int,bool> map) {
    TsmListCheckItem item=TsmListCheckItem(map);
    return item;
  }

}


class TsmListViewCheckPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _TsmListViewCheckState();
}

class _TsmListViewCheckState extends State<TsmListViewCheckPage> {
  ScrollController _controller;

  List<String> list;
  Map<int,bool> map;

  @override
  void initState() {
    _controller = ScrollController();
    list = ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7', '测试8', '测试9'];
    map=HashMap();
    for(int i=0;i<list.length;i++){
      map.putIfAbsent(i, () => false);
    }
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('ListView 勾选'),
          centerTitle: true,
        ),
        body:ListView.builder(
            itemCount: list.length,
            physics: BouncingScrollPhysics(),
            controller: _controller,
            itemBuilder: (con, index) {
             return  BlocProvider(
                create: (_) => TsmListCheckItem.forInstance(map),
                child:_TsmItemWidget(list[index], index,map),
              );
            })
        );
  }
}

class _TsmItemWidget extends StatelessWidget {
  final String _tag;
  final Map<int,bool> _map;
  final int index;

  _TsmItemWidget(this._tag, this.index,this._map);

  @override
  Widget build(BuildContext context) {
    return BlocListener<TsmListCheckItem, Map<int, bool>>(
      listener: (con,state){
        _map[index]=!_map[index];
      },
      child: Column(
        children: [
          Stack(
            children: [
              Positioned(
                child: Container(
                  padding: const EdgeInsets.fromLTRB(22, 10, 22, 10),
                  child: ClipRRect(
                    child: Image(
                      image: AssetImage('images/hor.jpg'),
                      width: double.infinity,
                      fit: BoxFit.fitWidth,
                    ),
                    borderRadius: BorderRadius.all(Radius.circular(6)),
                  ),
                ),
              ),
              Positioned(
                top: 10,
                left: 22,
                child: Container(
                  padding: const EdgeInsets.fromLTRB(5, 3, 5, 3),
                  decoration: BoxDecoration(
                      color: Colors.redAccent,
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(6),
                          bottomRight: Radius.circular(6))),
                  child: Text(_tag),
                ),
              )
            ],
          ),
          SizedBox(
            height: 10,
          ),
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SizedBox(
                width: 20,
              ),
              Expanded(
                flex: 1,
                child: Text(_tag * 12),
              ),
              SizedBox(
                width: 10,
              ),
              Text(index.toString()),
              BlocBuilder<TsmListCheckItem, Map<int, bool>>(
                builder: (con, state) {
                  return Checkbox(
                    value: state[index],
                    activeColor: Colors.redAccent,
                    /// 勾选后颜色
                    onChanged: (isSelect) {
                      context.bloc<TsmListCheckItem>().add(index);
                    },
                  );
                },
              ),
              SizedBox(
                width: 20,
              ),
            ],
          )
        ],
      ),
    );
  }
}

我学习flutter的整个过程都记录在里面了
https://www.jianshu.com/c/36554cb4c804

最后附上demo 地址

https://github.com/tsm19911014/tsm_flutter

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,242评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,769评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,484评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,133评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,007评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,080评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,496评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,190评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,464评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,205评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,567评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2赞 335