TLDR: Всі віджети повинні мати в Key keyякості додаткового параметра або їх конструктора.
Keyце те, що використовується механізмом флаттера на етапі розпізнавання того, який віджет у списку змінено.
Це корисно , коли у вас є список ( Column, Rowнезалежно) віджетів одного і того ж типу , що потенційно може отримати видалені / вставленим.
Скажімо, у вас це є (код не працює, але ви зрозуміли):
AnimatedList(
children: [
Card(child: Text("foo")),
Card(child: Text("bar")),
Card(child: Text("42")),
]
)
Потенційно ви можете видалити будь-який з цих віджетів окремо, провевши пальцем.
Справа в тому, що в нашому списку є анімація, коли дитину вилучають. Тож давайте знімемо «бар».
AnimatedList(
children: [
Card(child: Text("foo")),
Card(child: Text("42")),
]
)
Проблема: без цього Key, трепет не зможе дізнатися, чи Rowзник другий елемент вашого . Або якщо це останнє, що зникло, а друге змінило дитину.
Отже, без цього у Keyвас може бути помилка, коли анімація виходу буде відтворюватися на останньому елементі!
Ось де Key відбувається.
Якщо ми знову почнемо наш приклад, використовуючи ключ, ми отримаємо таке:
AnimatedList(
children: [
Card(key: ObjectKey("foo"), child: Text("foo")),
Card(key: ObjectKey("bar"), child: Text("bar")),
Card(key: ObjectKey("42"), child: Text("42")),
]
)
зверніть увагу, що ключовим є не дочірній індекс, а щось унікальне для елемента.
З цього моменту, якщо ми знову видалимо "бар", будемо мати
AnimatedList(
children: [
Card(key: ObjectKey("foo"), child: Text("foo")),
Card(key: ObjectKey("42"), child: Text("42")),
]
)
Завдяки keyприсутності, мерехтливий двигун тепер точно знає, який віджет було видалено. І тепер наша анімація відпустки буде правильно грати на "стовпчику" замість "42".