1 00:00:02,560 --> 00:00:08,680 Per centrare il contenuto nel mezzo, possiamo usare una tecnica che ho già trattato in 2 00:00:08,710 --> 00:00:11,500 precedenza, styling e lì specificamente, flexbox. 3 00:00:11,500 --> 00:00:17,470 Quindi nel nostro modale abbiamo quella vista o nel nostro modale abbiamo quella vista, quella è la nostra vista 4 00:00:17,500 --> 00:00:19,400 radice, è l'unico elemento nel 5 00:00:19,420 --> 00:00:25,090 modale e quindi questa vista ovviamente ha altri elementi figlio ma è l'unico figlio diretto del nostro modale. 6 00:00:25,180 --> 00:00:29,310 Lì, abbiamo lo stile del contenitore di input che applichiamo e lì, attualmente impostiamo una 7 00:00:29,350 --> 00:00:30,490 direzione flessibile di riga. 8 00:00:30,490 --> 00:00:35,170 Ora ovviamente potremmo lasciarlo, ma direi in modale se lo presentiamo a schermo intero come 9 00:00:35,620 --> 00:00:41,230 questo, sto davvero bene con un orientamento verticale in modo da avere l'input e, al di sotto, il pulsante. 10 00:00:41,610 --> 00:00:48,250 Quindi lo cambierò di nuovo in colonna o poiché questo è il valore predefinito, elimina semplicemente questa direzione flessibile 11 00:00:48,250 --> 00:00:52,580 e ora voglio centrare questo in orizzontale e in verticale sebbene e 12 00:00:52,810 --> 00:00:59,480 per questo, possiamo impostare giustificare il contenuto al centro qui e allineare gli elementi al centro ma che da 13 00:00:59,680 --> 00:01:01,690 solo non farà il trucco. 14 00:01:01,780 --> 00:01:05,710 Puoi vedere se apri il modale, è ancora completamente in alto 15 00:01:05,800 --> 00:01:07,920 e il motivo è che 16 00:01:07,930 --> 00:01:14,080 il nostro contenitore di input, quindi quella vista a cui stiamo assegnando questo stile, per impostazione predefinita non 17 00:01:14,080 --> 00:01:16,720 occupa tutto lo spazio disponibile può entrare nella 18 00:01:16,720 --> 00:01:22,450 vista circostante, quindi in questo caso nel modale. Il modale prende teoricamente l'intera altezza e larghezza dello schermo, 19 00:01:22,480 --> 00:01:25,480 ma la vista semplicemente non occupa tutto lo spazio disponibile per 20 00:01:25,480 --> 00:01:26,560 impostazione predefinita, è 21 00:01:26,560 --> 00:01:28,630 così che funziona, questa è l'impostazione predefinita. 22 00:01:28,630 --> 00:01:31,900 Prende solo lo spazio necessario ai suoi figli, quindi l'inserimento 23 00:01:31,900 --> 00:01:33,590 di testo e il pulsante. 24 00:01:33,730 --> 00:01:38,830 Quindi la vista ha essenzialmente l'altezza dell'input di testo e del 25 00:01:38,980 --> 00:01:47,420 pulsante combinati e quindi anche la larghezza del figlio più ampio in questo caso, quindi dell'input di testo qui 26 00:01:47,420 --> 00:01:51,940 e comunque qui, Android non si è aggiornato correttamente, 27 00:01:51,940 --> 00:02:02,010 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 28 00:02:02,010 --> 00:02:04,320 che applichi alla vista, in questo caso il 29 00:02:04,320 --> 00:02:11,670 nostro stile del contenitore di input qui e impostare la flessibilità su uno qui. Flex è una proprietà che viene utilizzata insieme a flexbox 30 00:02:12,120 --> 00:02:18,270 e, come hai appreso in precedenza in questo modulo, in questa lezione extra su flexbox, flex ti 31 00:02:18,480 --> 00:02:25,140 consente di controllare quanto spazio occupano i tuoi diversi oggetti all'interno di un flexbox e se è l'unico 32 00:02:25,140 --> 00:02:26,430 elemento, questo garantisce 33 00:02:26,430 --> 00:02:29,970 semplicemente che questo contenitore occupi tutto lo spazio disponibile. 34 00:02:29,970 --> 00:02:34,980 Puoi anche impostare questo su flex due, il valore esatto non ha importanza qui se è l'unico 35 00:02:34,980 --> 00:02:39,570 figlio ma devi impostare flex per assicurarti che questo occupi tutto lo spazio disponibile. 36 00:02:39,600 --> 00:02:44,160 Se non lo fai, occuperà tanto spazio quanto i suoi elementi figlio, se imposti 37 00:02:44,280 --> 00:02:48,850 la flessione, occuperà tanto spazio quanto il suo elemento genitore gli dà, quindi come l'elemento 38 00:02:48,900 --> 00:02:50,720 genitore di quella vista, il 39 00:02:50,730 --> 00:02:52,990 modale in questo caso dà la vista. 40 00:02:53,340 --> 00:03:00,650 Quindi con Flex One aggiunto qui, se ora lo salvi, su iOS, vedi ora che è ben centrato e per 41 00:03:00,670 --> 00:03:05,860 vederlo anche su Android, quello che puoi fare è aprire lo switcher attività, chiudere 42 00:03:06,070 --> 00:03:08,210 qui l'app e premere un 43 00:03:08,320 --> 00:03:11,890 qui per riavviare questa app su Android, non piace 44 00:03:11,890 --> 00:03:19,970 il modale come sembra e ora qui, lo vedi anche. Ora una piccola regolazione è un po 'di spazio tra il 45 00:03:20,000 --> 00:03:22,140 pulsante e l'input che voglio avere 46 00:03:22,250 --> 00:03:30,530 e per questo, andrò all'input e aggiungerò un margine inferiore di 10 qui, ma con questo, sono abbastanza contento di questo di nuovo, 47 00:03:30,530 --> 00:03:35,380 sfortunatamente Android ha davvero dei problemi qui con il mio modale, quindi chiudiamolo e 48 00:03:39,120 --> 00:03:40,430 vediamo se va 49 00:03:40,440 --> 00:03:42,000 bene, sì, va bene. 50 00:03:42,000 --> 00:03:47,430 Ora voglio assicurarmi che quando facciamo clic su Aggiungi qui, in realtà chiudiamo il modale.