Per centrare il contenuto nel mezzo, possiamo usare una tecnica che ho già trattato in
precedenza, styling e lì specificamente, flexbox.
Quindi nel nostro modale abbiamo quella vista o nel nostro modale abbiamo quella vista, quella è la nostra vista
radice, è l'unico elemento nel
modale e quindi questa vista ovviamente ha altri elementi figlio ma è l'unico figlio diretto del nostro modale.
Lì, abbiamo lo stile del contenitore di input che applichiamo e lì, attualmente impostiamo una
direzione flessibile di riga.
Ora ovviamente potremmo lasciarlo, ma direi in modale se lo presentiamo a schermo intero come
questo, sto davvero bene con un orientamento verticale in modo da avere l'input e, al di sotto, il pulsante.
Quindi lo cambierò di nuovo in colonna o poiché questo è il valore predefinito, elimina semplicemente questa direzione flessibile
e ora voglio centrare questo in orizzontale e in verticale sebbene e
per questo, possiamo impostare giustificare il contenuto al centro qui e allineare gli elementi al centro ma che da
solo non farà il trucco.
Puoi vedere se apri il modale, è ancora completamente in alto
e il motivo è che
il nostro contenitore di input, quindi quella vista a cui stiamo assegnando questo stile, per impostazione predefinita non
occupa tutto lo spazio disponibile può entrare nella
vista circostante, quindi in questo caso nel modale. Il modale prende teoricamente l'intera altezza e larghezza dello schermo,
ma la vista semplicemente non occupa tutto lo spazio disponibile per
impostazione predefinita, è
così che funziona, questa è l'impostazione predefinita.
Prende solo lo spazio necessario ai suoi figli, quindi l'inserimento
di testo e il pulsante.
Quindi la vista ha essenzialmente l'altezza dell'input di testo e del
pulsante combinati e quindi anche la larghezza del figlio più ampio in questo caso, quindi dell'input di testo qui
e comunque qui, Android non si è aggiornato correttamente,
ecco perché vedi questo strano output qui, puoi ignorarlo per ora. Quindi, per fare in modo che la vista occupi tutto lo spazio disponibile qui, puoi semplicemente andare allo stile
che applichi alla vista, in questo caso il
nostro stile del contenitore di input qui e impostare la flessibilità su uno qui. Flex è una proprietà che viene utilizzata insieme a flexbox
e, come hai appreso in precedenza in questo modulo, in questa lezione extra su flexbox, flex ti
consente di controllare quanto spazio occupano i tuoi diversi oggetti all'interno di un flexbox e se è l'unico
elemento, questo garantisce
semplicemente che questo contenitore occupi tutto lo spazio disponibile.
Puoi anche impostare questo su flex due, il valore esatto non ha importanza qui se è l'unico
figlio ma devi impostare flex per assicurarti che questo occupi tutto lo spazio disponibile.
Se non lo fai, occuperà tanto spazio quanto i suoi elementi figlio, se imposti
la flessione, occuperà tanto spazio quanto il suo elemento genitore gli dà, quindi come l'elemento
genitore di quella vista, il
modale in questo caso dà la vista.
Quindi con Flex One aggiunto qui, se ora lo salvi, su iOS, vedi ora che è ben centrato e per
vederlo anche su Android, quello che puoi fare è aprire lo switcher attività, chiudere
qui l'app e premere un
qui per riavviare questa app su Android, non piace
il modale come sembra e ora qui, lo vedi anche. Ora una piccola regolazione è un po 'di spazio tra il
pulsante e l'input che voglio avere
e per questo, andrò all'input e aggiungerò un margine inferiore di 10 qui, ma con questo, sono abbastanza contento di questo di nuovo,
sfortunatamente Android ha davvero dei problemi qui con il mio modale, quindi chiudiamolo e
vediamo se va
bene, sì, va bene.
Ora voglio assicurarmi che quando facciamo clic su Aggiungi qui, in realtà chiudiamo il modale.