案例:(不使用key,删除时state会刷新,element会产生复用,删除时会导致最后一个element删除而不是第一个)
可以通过制定key的方式给element打标签,当修改子widget时会找到指定key的element进行渲染
效果:
代码如下:
final List<String> names = ["第一个","第二个","第三个"];
int _currentSelected = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: names.map((item){
return ListItem(item,key: ValueKey(item));
}).toList(),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.delete),
onPressed: (){
setState(() {
names.removeAt(0);
});
},
),
);
子控件:
class ListItem extends StatefulWidget {
final String name;
const ListItem(this.name,{Key key}) : super(key: key);
@override
_ListItemState createState() => _ListItemState();
}
class _ListItemState extends State<ListItem> {
final rdmColor = Color.fromARGB(255, Random().nextInt(256), Random().nextInt(256), Random().nextInt(256));
@override
Widget build(BuildContext context) {
return Container(
child: Text(widget.name,style: TextStyle(color: Colors.white)),
height: 50,
color: rdmColor,
);
}
}
如果想强制刷新element,可以通过指定随机数的方式
return ListItem(item,key: ValueKey(Random().nextInt(99999)));
或者:
return ListItem(item,key: ValueKey(UniqueKey()));
注:随机数的方式不保证有重复的时候
常用localkey:
ObjectKey、ValueKey、UniqueKey
网友评论