TLDR: Alle Widgets sollte eine haben Key key
als optionale Parameter oder deren Konstruktor.
Key
wird von der Flatter-Engine verwendet, um zu erkennen, welches Widget in einer Liste geändert wurde.
Dies ist nützlich, wenn Sie eine Liste ( Column
, Row
was auch immer) von Widgets desselben Typs haben , die möglicherweise entfernt / eingefügt werden können.
Angenommen, Sie haben dies (Code funktioniert nicht, aber Sie haben die Idee):
AnimatedList(
children: [
Card(child: Text("foo")),
Card(child: Text("bar")),
Card(child: Text("42")),
]
)
Möglicherweise können Sie jedes dieser Widgets einzeln mit einem Wisch entfernen.
Die Sache ist, unsere Liste hat eine Animation, wenn ein Kind entfernt wird. Entfernen wir also "bar".
AnimatedList(
children: [
Card(child: Text("foo")),
Card(child: Text("42")),
]
)
Das Problem: Ohne Key
kann Flattern nicht wissen, ob das zweite Element von Ihnen Row
verschwunden ist. Oder wenn es der letzte ist, der verschwunden ist und der zweite sein Kind verändert hat.
Ohne Key
könnten Sie möglicherweise einen Fehler haben, bei dem Ihre Urlaubsanimation stattdessen auf dem letzten Element abgespielt wird!
Hier Key
findet statt.
Wenn wir unser Beispiel erneut mit dem Schlüssel beginnen, haben wir Folgendes:
AnimatedList(
children: [
Card(key: ObjectKey("foo"), child: Text("foo")),
Card(key: ObjectKey("bar"), child: Text("bar")),
Card(key: ObjectKey("42"), child: Text("42")),
]
)
Beachten Sie, dass der Schlüssel nicht der untergeordnete Index ist, sondern etwas Einzigartiges für das Element.
Wenn wir ab diesem Punkt "bar" wieder entfernen, haben wir
AnimatedList(
children: [
Card(key: ObjectKey("foo"), child: Text("foo")),
Card(key: ObjectKey("42"), child: Text("42")),
]
)
Dank key
der Anwesenheit weiß die Flatter-Engine jetzt genau, welches Widget entfernt wurde. Und jetzt wird unsere Urlaubsanimation korrekt auf "bar" statt auf "42" abgespielt.