美文网首页
构造函数中{Key key}的作用

构造函数中{Key key}的作用

作者: 刘铁崧 | 来源:发表于2020-12-04 15:56 被阅读0次

案例:(不使用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

相关文章

网友评论

      本文标题:构造函数中{Key key}的作用

      本文链接:https://www.haomeiwen.com/subject/ugmswktx.html