利用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
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
其实这个问题是我强行给自己制造的,如果我用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