web-dev-qa-db-fra.com

Que sont les clés dans la classe de widgets Stateless?

Dans la documentation Flutter, vous trouverez un exemple de code pour une sous-classe de widget sans état, comme indiqué:

class GreenFrog extends StatelessWidget {
  const GreenFrog({ Key key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Container(color: const Color(0xFF2DBD3A));
  }
}

et ça

class Frog extends StatelessWidget {
  const Frog({
    Key key,
    this.color: const Color(0xFF2DBD3A),
    this.child,
  }) : super(key: key);

  final Color color;

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return new Container(color: color, child: child);
  }
}

Qu'est-ce qu'une clé et quand faut-il utiliser ce super constructeur? Il semble que si vous avez votre propre constructeur, vous devez avoir {Key Key} pourquoi? J'ai vu d'autres exemples où le mot-clé super est not utilisé, c'est donc là que réside ma confusion.

dartflutter
48
DanT29

TLDR: tous les widgets devraient avoir un Key key as facultatif paramètre ou leur constructeur. Key est quelque chose utilisé par le moteur de flottement à l'étape de reconnaissance du widget modifié dans une liste.

C'est utile lorsque vous avez une liste (Column, Row, peu importe) de widgets du même type pouvant éventuellement être supprimé/inséré.

Disons que vous avez ceci (le code ne fonctionne pas, mais vous avez l'idée):

AnimatedList(
  children: [
    Card(child: Text("foo")),
    Card(child: Text("bar")),
    Card(child: Text("42")),
  ]
)

Potentiellement, vous pouvez supprimer n'importe lequel de ces widgets individuellement avec un balayage.

Le fait est que notre liste comporte une animation lorsqu'un enfant est supprimé. Supprimons donc "bar".

AnimatedList(
  children: [
    Card(child: Text("foo")),
    Card(child: Text("42")),
  ]
)

Le problème: Sans Key, le flutter ne pourra pas savoir si le deuxième élément de votre Row a disparu. Ou si c'est le dernier qui a disparu et que le second a ses enfants.

Donc, sans Key, vous pourriez potentiellement avoir un bogue dans lequel votre animation partira sera lue sur le dernier élément à la place!

C'est ici que Key a lieu.

Si nous reprenons notre exemple, en utilisant la clé, nous aurions ceci:

AnimatedList(
  children: [
    Card(key: ObjectKey("foo"), child: Text("foo")),
    Card(key: ObjectKey("bar"), child: Text("bar")),
    Card(key: ObjectKey("42"), child: Text("42")),
  ]
)

remarquez comment la clé n'est pas l'index enfant, mais quelque chose d'unique pour l'élément.

À partir de ce moment, si nous supprimons à nouveau "bar", nous aurons

AnimatedList(
  children: [
    Card(key: ObjectKey("foo"), child: Text("foo")),
    Card(key: ObjectKey("42"), child: Text("42")),
  ]
)

Grâce à la présence de key, le moteur de flottement sait désormais quel widget a été supprimé. Et maintenant, notre congé animation jouera correctement sur "bar" au lieu de "42".

74
Rémi Rousselet

La clé est un paramètre facultatif nécessaire pour conserver l'état dans votre arborescence de widgets. Vous devez les utiliser si vous souhaitez déplacer une collection d'éléments dans votre arborescence et en conserver l'état.

La meilleure explication peut être trouvée dans cette vidéo de Google Quand utiliser les touches - Widgets Flutter 101 Ep. 4

3
d0xzen