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(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().add(index);
                    },
                  );
                },
              )

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

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

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

class _TsmListViewCheckState extends State {
  ScrollController _controller;

  List list;
  Map map;

  @override
  void initState() {
    _controller = ScrollController();
    list = ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7', '测试8', '测试9'];
    map=HashMap();
    for(int i=0;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 _map;
  final int index;

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

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

这里我隐藏了部分代码,我的思路就是利用map 来保存每个位置的状态,每一个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>{
  TsmListCheckItem(Map  initialState) : super(initialState);
  @override
  Stream> mapEventToState(int index) async*{
    HashMap nextState=Map.from(state);
    nextState[index]=!state[index];
    yield nextState;
  }
  static TsmListCheckItem  forInstance(Map map) {
    TsmListCheckItem item=TsmListCheckItem(map);
    return item;
  }
}

下面我贴一下源码,

class  TsmListCheckItem extends Bloc>{

  TsmListCheckItem(Map  initialState) : super(initialState);

  @override
  Stream>> transformTransitions(Stream>> transitions) {
    return super.transformTransitions(transitions);
  }

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

  static TsmListCheckItem  forInstance(Map map) {
    TsmListCheckItem item=TsmListCheckItem(map);
    return item;
  }

}


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

class _TsmListViewCheckState extends State {
  ScrollController _controller;

  List list;
  Map map;

  @override
  void initState() {
    _controller = ScrollController();
    list = ['测试1', '测试2', '测试3', '测试4', '测试5', '测试6', '测试7', '测试8', '测试9'];
    map=HashMap();
    for(int i=0;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 _map;
  final int index;

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

  @override
  Widget build(BuildContext context) {
    return BlocListener>(
      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>(
                builder: (con, state) {
                  return Checkbox(
                    value: state[index],
                    activeColor: Colors.redAccent,
                    /// 勾选后颜色
                    onChanged: (isSelect) {
                      context.bloc().add(index);
                    },
                  );
                },
              ),
              SizedBox(
                width: 20,
              ),
            ],
          )
        ],
      ),
    );
  }
}

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

最后附上demo 地址

https://github.com/tsm19911014/tsm_flutter

你可能感兴趣的:(Flutter 学习之旅(四十九) Flutter 状态 flutter_bloc学习(三))