Chiavi per liste stabili e veloci

Per impostazione predefinita, Compose identifica ogni riga in base alla sua posizione nella lista. L'elemento zero è l'elemento zero, l'elemento uno è l'elemento uno, e così via.

Quando inserisce o rimuove una riga, ogni elemento sottostante cambia posizione. Compose pensa quindi che quelle righe siano diverse e le ricostruisce inutilmente.

Le righe ricostruite perdono il proprio stato e le animazioni. Un elemento rimosso può far sfarfallare l'intera lista mentre Compose riorganizza tutto ciò che si trova sotto.

Una key è un valore stabile e univoco che identifica ogni elemento in base alla sua identità, non alla posizione. In questo modo Compose segue gli elementi anche quando si spostano.

La key migliore è un vero unique id proveniente dai dati, come un ID del database. Rimane invariata indipendentemente dalla posizione dell'elemento.

Ogni key nella lista deve essere diversa. Le key duplicate generano un errore a runtime, quindi non utilizzi mai come key un valore che due righe potrebbero condividere.

Usare l'index come key vanifica lo scopo, perché gli indici cambiano proprio come le posizioni. Lo utilizzi solo quando non dispone davvero di un ID.

Con key stabili, lo stato memorizzato di una riga la segue. Una casella di controllo rimane selezionata anche dopo l'eliminazione degli elementi sovrastanti.

Le key stabili consentono a Compose di animare gli elementi mentre si spostano, compaiono o scompaiono. Senza di esse, non può distinguere uno spostamento da una ricostruzione.

Anche il builder itemsIndexed accetta una lambda per la key. Continua a ricevere l'indice, oltre a un'identità stabile per ogni riga.

Per qualsiasi lista che può cambiare, aggiungere le key richiede uno sforzo minimo e offre grandi vantaggi: stato corretto, animazioni fluide e meno ricostruzioni.

Le key danno agli elementi un'identità che va oltre la posizione. Utilizzi un vero id univoco, mantenga le key univoche e stato e animazioni funzioneranno correttamente. ✨