利用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 地址
网友评论