美文网首页
构造函数中{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