利用flutter_bloc 完成listview 中checkbox 的勾選,我在寫的過程中發(fā)現(xiàn)這個里面的坑還是有很多的,先上一下效果圖
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,每次更改后的狀態(tài)在滑出屏幕再滑回后又變成初始化的狀態(tài)了,下面我上一下我修改過后的代碼
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> 來保存每個位置的狀態(tài),每一個item 提供一個provider , 在每次勾選的時候改變這個map 的index 的bool類型的值,我在寫的過程中發(fā)現(xiàn) BlocProvider 中的 create 的 TsmListCheckItem.forInstance(map) 這個方法會調用多次,也就是說如果外部這個map的類型不跟著勾選后的結果變更的話,就會導致在調用 BlocProvider 中的 create 的方法的時候,讓狀態(tài)變成最開始的默認值,所以這里我增加了一層BlocListener ,在每次勾選后改變外部這個map的值,這樣可以在后續(xù)調用TsmListCheckItem.forInstance(map) 的方法的時候,狀態(tài)也是改變后的狀態(tài),這個問題我查了好久, 相信如果大家好好體會的話還是非常有幫助的,
其實這個問題是我強行給自己制造的,如果我用BlocProvider 包裹的是LsitView,而不是LsitView 的Item ,那么上面那種重復創(chuàng)建的問題就不會存在了,最開始的寫法也是這么寫的,這里這是為了把問題展示出來才修改到Iitem 上的,
最后一個問題,就是在mapEventToState 的時候不能對這個state修改,而是必須要重新new ,原因就是在接下來會遇到 state==nextState 這個判斷,如果對state做修改的話,這個判斷就會一直相等,從而無法生成新的狀態(tài)
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的整個過程都記錄在里面了
http://www.lxweimin.com/c/36554cb4c804
最后附上demo 地址
