In Compose, puoi concatenare più modificatori per cambiare l'aspetto e un'immagine componibile. Queste catene di modificatori possono influire sui vincoli superati ai componibili, che definiscono i limiti di larghezza e altezza.
Questa pagina descrive in che modo i modificatori concatenati influenzano i vincoli e, a loro volta, la misurazione e il posizionamento dei componibili.
Modificatori nell'albero dell'interfaccia utente
Per capire come i modificatori si influenzano a vicenda, è utile vedere in che modo vengono visualizzati nella struttura ad albero dell'interfaccia utente, che viene generata durante la fase di composizione. Per per ulteriori informazioni, consulta la sezione Composizione.
Nell'albero dell'interfaccia utente, puoi visualizzare i modificatori come nodi wrapper per il layout nodi:
![Codice per i componibili e i modificatori e la loro rappresentazione visiva come albero dell'interfaccia utente.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/modifier-wrapping.png?authuser=8&hl=it)
L'aggiunta di più di un modificatore a un componibile crea una catena di modificatori. Quando
Concateni più modificatori, ogni nodo di modifica aggrega il resto della catena
e il nodo di layout al suo interno. Ad esempio, quando concateni una clip
e una
modificatore size
, il nodo del modificatore clip
racchiude il nodo del modificatore size
,
che a sua volta aggrega il nodo di layout Image
.
Nella fase di layout, l'algoritmo che cammina rimane lo stesso, ma vengono visitati anche ciascun nodo di modifica. In questo modo, un modificatore può cambiare la dimensione e il posizionamento del nodo di modifica o layout che aggrega.
Come mostrato nella Figura 2, l'implementazione degli elementi componibili Image
e Text
sono costituiti da una catena di modificatori che aggregano un singolo nodo di layout. La
le implementazioni di Row
e Column
sono semplicemente nodi di layout che descrivono
per illustrare i loro figli.
![La struttura ad albero di prima, ma ora ogni nodo è solo un layout semplice, circondato da numerosi nodi di modificatori.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/composables-modifiers.png?authuser=8&hl=it)
In sintesi:
- I modificatori aggregano un singolo nodo di modifica o layout.
- I nodi di layout possono disporre più nodi figlio.
Le seguenti sezioni descrivono come usare questo modello mentale per ragionare concatenamento dei modificatori e su come questo influisce sulle dimensioni dei componibili.
Vincoli nella fase di layout
La fase di layout segue un algoritmo composto da tre passaggi per trovare ogni layout larghezza, altezza e coordinate x e y del nodo:
- Misura gli elementi secondari: un nodo misura i relativi figli, se presenti.
- Stabilisci la dimensione: in base a queste misurazioni, un nodo decide autonomamente dimensioni.
- Posiziona elementi secondari: ogni nodo figlio viene posizionato rispetto al nodo posizione.
Constraints
aiuta a trovare le dimensioni giuste per i nodi durante i primi due
passaggi dell'algoritmo. I vincoli definiscono i limiti minimo e massimo
la larghezza e l'altezza del nodo. Quando il nodo decide le proprie dimensioni, le dimensioni misurate
devono rientrare in questo intervallo di dimensioni.
Tipi di vincoli
Un vincolo può essere uno dei seguenti:
- Delimitato: il nodo ha larghezza e altezza massime e minime.
![Vincoli limitati di dimensioni diverse all'interno di un container.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/bounded-constraints.png?authuser=8&hl=it)
- Illimitata: il nodo non è vincolato a nessuna dimensione. La larghezza massima e i limiti di altezza sono impostati su infinito.
![I vincoli illimitati con larghezza e altezza impostate su infinito. I vincoli si estendono oltre il container.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/unbounded-constraints.png?authuser=8&hl=it)
- Esatta: il nodo deve seguire un requisito di dimensione esatto. Il minimo e i limiti massimi siano impostati sullo stesso valore.
![Vincoli esatti che si adattano a un esatto requisito di dimensioni all'interno del contenitore.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/exact-constraints.png?authuser=8&hl=it)
- Combinazione: il nodo segue una combinazione dei tipi di vincoli precedenti. Ad esempio, un vincolo potrebbe limitare la larghezza consentendo al contempo altezza massima illimitata oppure imposta una larghezza esatta, ma fornisci un'altezza limitata.
![Due container che mostrano combinazioni di vincoli limitati e illimitati e larghezze e altezze esatte.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/combination-constraints.png?authuser=8&hl=it)
La prossima sezione descrive come questi vincoli vengono passati da un elemento padre a un figlio/a.
Modalità di trasferimento dei vincoli da elementi principali a elementi secondari
Durante il primo passaggio dell'algoritmo descritto in Vincoli nel layout , i vincoli vengono passati dall'elemento padre a quello secondario nell'albero della UI.
Quando un nodo padre misura i propri elementi figlio, fornisce questi vincoli a ciascuno bambino per fargli sapere quanto può essere grande o piccolo. Poi, decide la propria dimensione, inoltre rispetta i vincoli trasmessi i propri genitori.
A livello generale, l'algoritmo funziona nel seguente modo:
- Per decidere le dimensioni che vuole effettivamente occupare, il nodo radice nell'albero dell'interfaccia utente misura gli elementi figlio e inoltra gli stessi vincoli al primo figlio.
- Se il publisher secondario è un modificatore che non influisce sulla misurazione, inoltra al modificatore successivo. I vincoli vengono passati al modificatore catena così com'è, a meno che non venga raggiunto un modificatore che influisce sulla misurazione. La i vincoli vengono ridimensionati di conseguenza.
- Una volta raggiunto un nodo che non ha figli (chiamato anche " nodo"), determina le dimensioni in base ai vincoli trasmessi e restituisce questa dimensione risolta all'elemento principale.
- L'elemento principale adatta i propri vincoli in base alle misurazioni di questo asset secondario e chiama il figlio successivo con questi vincoli regolati.
- Una volta misurati tutti gli elementi secondari di un elemento padre, il nodo padre decide dimensioni proprie e la comunica al proprio genitore.
- In questo modo, l'intero albero viene attraversato in profondità. Infine, tutti i nodi hanno deciso le dimensioni e la fase di misurazione è completata.
Per un esempio approfondito, consulta la sezione Vincoli e ordine dei modificatori. video.
Modificatori che influiscono sui vincoli
Nella sezione precedente hai imparato che alcuni modificatori possono influire sul vincolo dimensioni. Le seguenti sezioni descrivono i modificatori specifici che influiscono i vincoli.
Modificatore size
Il modificatore size
dichiara la dimensione preferita dei contenuti.
Ad esempio, la seguente struttura di UI dovrebbe essere visualizzata in un container di 300dp
.
di 200dp
. I vincoli sono limitati, consentendo larghezze comprese tra 100dp
e
300dp
e altezze comprese tra 100dp
e 200dp
:
![Una parte di un albero dell'interfaccia utente con il modificatore di dimensione che racchiude un nodo di layout e
rappresentazione dei vincoli limitati impostati dal modificatore di dimensione in un container.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier.png?authuser=8&hl=it)
Il modificatore size
adatta i vincoli in entrata in modo che corrispondano al valore trasmesso.
In questo esempio, il valore è 150dp
:
![Come nella Figura 7, tranne per il fatto che il modificatore di dimensione adatta i vincoli in entrata in modo che corrispondano al valore trasmesso.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-2.png?authuser=8&hl=it)
size
regola i vincoli su 150dp
.Se la larghezza e l'altezza sono inferiori al vincolo minimo vincolato, oppure maggiore del limite massimo del vincolo, il modificatore corrisponde al valore i vincoli il più possibile rispettando al contempo i vincoli passati tra:
![Due strutture di UI e le relative rappresentazioni nei container. Nel primo,
il modificatore di dimensione accetta i vincoli in aumento; nella seconda, il modificatore di dimensione si adatta
i vincoli troppo grandi il più vicino possibile, con conseguenti vincoli che riempiono il contenitore.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-3.png?authuser=8&hl=it)
size
rispetta il vincolo superato il più fedelmente
il più possibile.Tieni presente che concatenare più modificatori size
non funziona. Il primo size
il modificatore imposta i vincoli minimo e massimo su un valore fisso. Anche se
il secondo modificatore di dimensione richiede una dimensione maggiore o minore, deve comunque
rispetta esattamente i limiti trasmessi, in modo da non sostituire questi valori:
![Una catena di due modificatori di dimensione nell'albero dell'interfaccia utente e la sua rappresentazione in un container.
che è il risultato del primo valore passato e non del secondo.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-4.png?authuser=8&hl=it)
size
, in cui viene passato il secondo valore
in (50dp
) non sostituisce il primo valore (100dp
).Modificatore requiredSize
Usa il modificatore requiredSize
anziché size
se hai bisogno di
per eseguire l'override dei vincoli in entrata. Il modificatore requiredSize
sostituisce
i vincoli in entrata e passa la dimensione specificata come limiti esatti.
Quando la dimensione viene ritrasmessa nell'albero, il nodo figlio sarà centrato di spazio disponibile:
![Le dimensioni e il modificatore di dimensione richiesto concatenati in un albero dell'interfaccia utente e i valori corrispondenti
rappresentazione in un container. I vincoli del modificatore di dimensione requiredSize sostituiscono il modificatore di dimensione
i vincoli.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/requiredsize-modifier.png?authuser=8&hl=it)
requiredSize
che sostituisce i vincoli in entrata da
il modificatore size
.Modificatori width
e height
Il modificatore size
adatta sia la larghezza che l'altezza dei vincoli. Con
il tasto di modifica width
, puoi impostare una larghezza fissa, ma lasciare incerta l'altezza.
Allo stesso modo, con il tasto di modifica height
puoi impostare un'altezza fissa, ma lascia il valore
larghezza indecisa:
![Due strutture di interfaccia utente, una con il modificatore di larghezza e la rappresentazione del container e l'altra
con il modificatore di altezza e la relativa rappresentazione.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/width-height-modifier.png?authuser=8&hl=it)
width
e height
impostano una larghezza fissa
e altezza, rispettivamente.Modificatore sizeIn
Il modificatore sizeIn
consente di impostare i vincoli minimo e massimo esatti
per larghezza e altezza. Usa il modificatore sizeIn
se hai bisogno di un controllo granulare
rispetto ai vincoli.
![Un albero dell'interfaccia utente con il modificatore sizeIn con larghezze e altezze minime e massime impostate,
e la sua rappresentazione all'interno di un container.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/sizein-modifier.png?authuser=8&hl=it)
sizeIn
con minWidth
, maxWidth
, minHeight
e
maxHeight
impostato.Esempi
Questa sezione mostra e spiega l'output di diversi snippet di codice con concatenati.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .size(50.dp) )
Questo snippet produce il seguente output:
- Il modificatore
fillMaxSize
cambia i vincoli in modo da impostare sia il valore dalla larghezza e dall'altezza minima al valore massimo:300dp
in larghezza e200dp
in altezza. - Anche se il modificatore
size
vuole utilizzare una dimensione di50dp
, deve comunque per rispettare i vincoli minimi in entrata. Di conseguenza, il modificatoresize
restituisce anche i limiti esatti del vincolo di300
per200
, ignorando il valore fornito nel modificatoresize
. Image
segue questi limiti e riporta una dimensione di300
per200
, che viene passato fino in cima all'albero.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) )
Questo snippet produce il seguente output:
- Il modificatore
fillMaxSize
adatta i vincoli per impostare sia il valore minimo larghezza e altezza al valore massimo:300dp
in larghezza e200dp
in altezza. - Il modificatore
wrapContentSize
reimposta i vincoli minimi. Quindi, mentrefillMaxSize
ha generato vincoli fissi,wrapContentSize
lo reimposta di nuovo a vincoli limitati. Il seguente nodo può ora occupare l'intero spazio o essere più piccolo dell'intero spazio. - Il modificatore
size
imposta i vincoli sui limiti minimo e massimo di50
. Image
si risolve in una dimensione di50
per50
e il modificatoresize
la inoltri.- Il modificatore
wrapContentSize
ha una proprietà speciale. Prende la sua secondario e lo pone al centro dei limiti minimi disponibili che erano le abbiamo passate. La dimensione che comunica ai suoi genitori è quindi uguale limiti minimi superati.
Combinando solo tre modificatori, è possibile definire la dimensione dell'elemento al centro dell'elemento principale.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .clip(CircleShape) .padding(10.dp) .size(100.dp) )
Questo snippet produce il seguente output:
- Il modificatore
clip
non modifica i vincoli.- Il modificatore
padding
riduce i vincoli massimi. - Il modificatore
size
imposta tutti i vincoli su100dp
. Image
rispetta questi vincoli e registra una dimensione pari a100
per100dp
.- Il modificatore
padding
aggiunge10dp
su tutte le dimensioni, quindi aumenta il valore riportato larghezza e altezza di20dp
. - Ora nella fase di disegno, il modificatore
clip
agisce su un canvas di120
.120dp
. Quindi, crea una maschera circolare di quella dimensione. - Il modificatore
padding
inserisce quindi i propri contenuti con10dp
su tutte le dimensioni, in modo che riduce le dimensioni del canvas a100
di100dp
. - L'elemento
Image
viene disegnato in quell'area di lavoro. L'immagine viene ritagliata in base cerchio originale di120dp
, quindi l'output è un risultato non arrotondato.
- Il modificatore