在 Flutter 中对多个小部件使用相同的密钥

Question

Hello StackOverFlow people,

I am trying to use Keys in Flutter and I am doing well, however, there is something I am really missing, as we know using keys in Flutter is often less usage and rare, and when using keys, it should be unique to that widget and not repeatable, nonetheless, I found I can repeat the same key and use it twice, I can use it more than once, and the code below will explain what I mean. Any help will be appreciated. Thanks

This code does not allow me to use the same key more than once

 return Scaffold(
  appBar: AppBar(title: const Text("Local Key Example"),),
  body: Column(
     children: [
       Text("One", key: ValueKey(1),),
       Text("Two", key: ValueKey(2),),
       Text("Three", key: ValueKey(1),)
    ],
  ),
);

But, this code will allow me to have two widgets with the same key and run with no Errors

class _LocalKeyPageState extends State<LocalKeyPage> {
  List<Widget> myWidget=[
         const Text('First', key: ValueKey(1),),
        const Text("Second", key: ValueKey(2),),
        const Text("Third", key: ValueKey(3),),
        const Text("Fourth", key: ValueKey(2),),  ];
  @override
  Widget build(BuildContext context) {
   return Scaffold(
    appBar: AppBar(title: const Text("Local Key Example"),),
    body: Column(
     children: myWidget.map((e) {
       if( e.key== ValueKey(2))
       { return Container(child: e, color: Colors.purple[300], width: 150,height: 50,);}
      return  Container(child: e,margin: EdgeInsets.all(10), color: Colors.amber,width: 200,height: 100,);
    }).toList(),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: (){
      setState(() {
        myWidget.removeWhere((element)

      {return element.key == ValueKey(2);});
      });
    },
    child: Icon(Icons.delete_forever),
  ),
);

 }
 }

Answer 1

documentation:

Keys must be unique amongst the Elements with the same parent.

• in your first example, the parent is Column , the the children is all the Text widget.

---

• in your second example, you wrap the Text with Container . And now the parent of the Text is the Container .

But the children of Column , now is the Container , which is the Key is different by default. Thats the reason, its run without error.

---

• if you remove the Container

Column(
 children: myWidget.map((e) {
    if (e.key == ValueKey(2)) {
      return e;      
    }

this one will throw error like the first example.