‫Ben tornato.
‫Ora è finalmente giunto il momento di utilizzare la griglia e hai visto come utilizzare il pannello tecnico prima e il pannello rack
‫e quelli al giorno ben impilati e avvolgere le cose.
‫E ora esamineremo Grid, che ci consente di posizionare le cose in una griglia, e inizieremo
‫semplicemente usando due volte per creare una griglia.
‫E prima di tutto, ciò di cui abbiamo bisogno è una colonna e una definizione di rollio in modo da poter andare avanti e all'interno della
‫nostra griglia.
‫Quindi vai al tuo file Zemel e poi all'interno della griglia, crea una definizione di colonna di punti della griglia e qui puoi definire le
‫tue diverse colonne.
‫Quindi, prima di tutto, hai bisogno delle definizioni di colonna, plurale, e poi puoi andare avanti e creare
‫le tue definizioni di colonna individuali.
‫Ad esempio, puoi andare avanti e crearne uno qui.
‫Lo terrò semplice in una riga proprio così.
‫E quello che voglio definire qui è semplicemente la larghezza e la larghezza che potrei, diciamo,
‫metterla a 100 e ora creiamo un'altra colonna, che sarà anche larga 100.
‫Ora, non è abbastanza.
‫Abbiamo anche bisogno di avere file, tranne per il fatto che vogliamo avere solo una stanza.
‫Quindi iniziamo con una sola riga.
‫E prima creerò un pulsante.
‫E questo pulsante dirà qualcosa del tipo, ciao, e dovrebbe essere nella griglia, quella
‫colonna zero.
‫Ora creo un secondo pulsante, che dovrebbe essere la griglia, quella colonna.
‫Ora, se osserviamo il nostro design ora, possiamo vedere che abbiamo i nostri due pulsanti.
‫Ciao.
‫Eseguiamo il nostro codice solo per vedere come appare.
‫A proposito, ci sono solo 100 pixel di larghezza, come puoi vedere qui.
‫Quindi la larghezza è limitata a 100 pixel.
‫Quindi, se aggiungi un valore totale qui, questo lo utilizzerà semplicemente come pixel nella larghezza.
‫Come puoi vedere qui, questa è la larghezza di una colonna.
‫E, naturalmente, potremmo dire che possiamo inserire facilmente alcune colonne in più.
‫Bene, possiamo farlo e lo faremo più tardi.
‫Ma prima di farlo, vorrei mostrarti qualcosa di molto importante.
‫Quindi, se trascino il mio Zemel qui ora, è effettivamente utile perché vedremo direttamente la differenza nella nostra interfaccia
‫utente.
‫E voglio cambiare la larghezza da 100 ad auto.
‫E come puoi vedere cosa fa auto, prende automaticamente solo la larghezza necessaria per adattarsi a
‫tutto il contenuto che c'è all'interno dell'elemento.
‫Quindi, nel nostro caso, il pulsante ha un testo chiamato Ciao, ed è quanto spazio in alto ha bisogno
‫o richiede.
‫Ed è anche quanto sarà largo il nostro bottone.
‫E come puoi vedere per la definizione della prima colonna, quindi la prima definizione
‫della colonna dove c'è il nostro pulsante con ce n'è uno, ecco come è cambiato il pulsante o questo è il pulsante.
‫Come puoi vedere ora, è cambiato in cinquantanove virgola cinque pixel.
‫Se aggiungo altro testo, altro testo, puoi vedere che lo sta ampliando a centocinquantatre virgola
‫cinque pixel.
‫Quindi puoi facilmente andare avanti e usare l'auto se vuoi che tutto si adatti correttamente in base a quanto spazio ha
‫effettivamente bisogno.
‫Ma cosa succede se voglio rendere le colonne esattamente della stessa larghezza?
‫Bene, ovviamente potrei usare i valori interi qui o i valori fissi qui, ma posso anche usare la stella.
‫E quello che Star farà è che se tutti loro, tutti loro hanno una stella, dirà semplicemente, OK, occupa
‫tutto lo spazio.
‫E in questo caso è solo lo spazio disponibile che ha questa specifica colonna, ed è esattamente uguale
‫alle altre.
‫Quindi ora c'è un'attesa.
‫Quindi questo ha un peso di uno e anche quello ha un peso di uno.
‫Quindi hanno lo stesso peso, il che significa che sono uguali solo con se vogliamo cambiarlo, diciamo
‫che voglio fare questo secondo qui, il secondo pulsante raddoppia la larghezza del primo che posso usare doppia
‫stella.
‫Quindi ora questo sarà largo il doppio del primo.
‫Se, ad esempio, voglio avere tre quinte a sinistra e due quinte a destra come larghezza, posso
‫semplicemente utilizzare questo approccio, come puoi vedere qui.
‫Quindi tre volte la stella e due volte per iniziare.
‫Quindi cosa fa effettivamente sommare tutto e quindi prende solo il conto multiplo di ciò che viene detto qui.
‫Quindi diciamo che abbiamo tre più due.
‫Quindi quello che fa, dice, OK, ora sono cinque in totale.
‫Unità che sono disponibili e prenderò tre quinti di quelle unità e potrei anche andare avanti e fare qualcosa come 100
‫così puoi vedere che questo prende 100 e questo non ne prenderà uno e ne prende solo due.
‫Quindi è così che puoi giocare con la larghezza e lo stesso vale per le altezze.
‫Quindi ora andiamo avanti e creiamo una definizione di rollio.
‫È così bello che le definizioni di ruolo e qui possiamo andare avanti e creare le nostre definizioni.
‫Quindi anche il primo e lo manterrò semplice, come in una riga e questo ha bisogno di un'altezza.
‫Quindi dirò solo, OK, voglio avere l'altezza della stella.
‫E ora usiamo di nuovo la stessa cosa per la seconda riga.
‫E come puoi vedere ora abbiamo due righe.
‫Quindi uno qui e il secondo in basso.
‫E come puoi vedere, la seconda riga non ha ancora alcun contenuto.
‫Quindi ora cambiamo questo, diciamo, prima di tutto, mettendo questo pulsante qui in fondo.
‫Destra.
‫E come possiamo farlo?
‫Bene, usiamo semplicemente griglia, punto, riga e diciamo che è reale.
‫Ora, potresti chiederti, perché è quello?
‫Perché non va troppo bene?
‫Come probabilmente già saprai, in programmazione iniziamo a contare da zero.
‫Quindi la prima riga è zero, la seconda è uno.
‫Quindi ora in alto c'è la seconda riga, che è la prima riga.
‫Ora, andiamo avanti e creiamo altri due pulsanti e forse anche cambiamo i loro nomi con
‫qualcosa che abbia più da dire sulle loro informazioni effettive.
‫Quindi lo metterò nella colonna zero nella riga uno e quella, in realtà, la
‫rimetterò a zero uno.
‫E quello ne aggiungerà uno.
‫E in realtà quella sarà la colonna uno e la riga zero in questo modo.
‫Quindi ora abbiamo tutti i pulsanti e quello sarà uno.
‫Uno sarà da pulsante a pulsante tre e pulsante quattro.
‫Grande.
‫Quindi ora, se iniziamo, vedrai che, beh, conta anche per i Whitesell.
‫Quindi uno, due, tre, quattro.
‫Va bene.
‫Ora, una piccola sfida per te, perché hai visto come utilizzare grandi colonne e righe.
‫Per favore, vai avanti e crea una griglia tre volte tre qui con otto pulsanti.
‫Quindi uno, due, otto dovrebbero essere i pulsanti e la nona posizione.
‫Quindi la posizione in basso a destra o l'elemento della griglia dovrebbe essere un blocco di testo.
‫Quindi per favore pubblica un video e prova a farlo.
‫Va bene, spero che tu l'abbia provato, quindi quello che farò è aggiungere un'altra colonna aggiungendo una definizione di
‫colonna qui, e sarà uguale per larghezza e uguale per l'altezza.
‫Sarà di uguale altezza.
‫E ora, come puoi vedere, i pulsanti sembrano un po' strani, ma è solo perché non ho ancora rimpicciolito.
‫Quindi ora possiamo vederlo correttamente.
‫Ora abbiamo i nostri pulsanti con zero uno e così via.
‫Quindi copierò quel pulsante qui e posizionerò anche una colonna.
‫Quindi Rosero e colonna due.
‫Ora, ovviamente, potresti sostenere che ha più senso iniziare con la riga e poi entrare
‫nella colonna mentre puoi farlo.
‫Ma nel mio caso è il contrario.
‫Alla fine, ciò che conta è che li usi entrambi correttamente.
‫Ora abbiamo i tre pulsanti in alto.
‫Ora andiamo avanti e creiamo la seconda riga o finalizziamo la seconda riga.
‫E questa è anche la colonna.
‫E lo copierò altre tre volte, in realtà.
‫Due volte sono sufficienti.
‫E quello sarà riga per posizionare zero e riga per posizionare uno o colonna uno.
‫Ora, ovviamente, dobbiamo cambiare i valori.
‫Quindi uno, due, tre, quattro, cinque, sei, sette e otto.
‫E come ho detto in basso a sinistra, vorrei avere un blocco di testo.
‫Quindi il blocco di testo ha lo stesso approccio con le grane.
‫Devi avere una colonna e una riga.
‫Quindi dirò solo che questa sarà la colonna due e la riga della griglia.
‫Anche due.
‫Quindi ora siamo in basso, a sinistra o in basso proprio ora, possiamo uscire e dargli del testo
‫e dirò solo qualcosa.
‫Scrivo ora, potresti dire, oh, non mi piace.
‫Il testo è in alto a sinistra.
‫Mentre puoi facilmente cambiarlo con un ..
‫Inserisci qualcosa come l'allineamento orizzontale e usa il centro qui.
‫Quindi ora è centrata orizzontalmente.
‫Ingrandiamo così puoi vedere.
‫Va bene.
‫Ne basta uno per centrarlo anche in verticale.
‫Uso semplicemente l'allineamento verticale e anche qui uso il centro.
‫Quindi ora, come vedi, il pulsante è centrato perfettamente e possiamo anche andare avanti e cambiare la dimensione del
‫carattere solo perché possiamo.
‫E facciamolo un po' più grande, tipo 32.
‫E ora possiamo vedere che abbiamo una griglia tre volte tre con otto pulsanti e un testo.
‫Ora puoi andare avanti e allineare tutti i diversi tipi di elementi nella tua finestra qui e la tua finestra principale nella
‫tua griglia.
‫Quindi questa è la bellezza dell'uso delle griglie.
‫E come hai visto, puoi impilare le cose.
‫Potresti creare un pannello impilato con più griglie.
‫E inoltre, hai un testo in mezzo, qualcosa del genere.
‫Quindi non sei limitato a usare un elemento qui.
‫Come puoi vedere, potremmo andare avanti e diciamo metterlo in un pannello impilato in questo modo.
‫Quindi trascinerò la griglia.
‫Come puoi vedere ora, si lamenta perché la finestra principale di Zemel conosce solo la prima.
‫Quindi vedrà il pannello impilato solo se ora controlliamo il nostro aspetto.
‫In realtà, fermiamolo così possiamo vedere come dice markup invertito.
‫Quindi, se prendiamo l'intera griglia all'interno del nostro pannello stack, come puoi vedere, è lì e la prende.
‫Quindi in fondo c'è molto spazio.
‫Quindi qui potremmo aggiungere un altro pulsante.
‫Solo così puoi vedere che questo è possibile e questo sarà qui per avere un'altezza di cento.
‫E ora, come puoi vedere, è tutto accatastato lassù in alto.
‫E anche se abbiamo questa altezza che sono tutti della stessa altezza, questo testo aveva bisogno di così tanto spazio
‫che lo ignora.
‫Quindi la dimensione del carattere è troppo grande.
‫Quindi, se torniamo a 16, è ancora troppo grande.
‫Se andiamo, diciamo, a 12.
‫Ora sembra più simile.
‫Quindi, ogni volta che usi definizioni reali per questa storia, devi stare attento.
‫Se un elemento ha bisogno di più spazio di quello che c'è, traboccherà.
‫Va bene.
‫Quindi sono due griglie.
‫Tornerò alla bellissima griglia standard che avevamo lì.
‫E generalmente quello che consiglio sempre dopo aver visto qualcosa del genere e dopo aver imparato qualcosa del genere,
‫per favore vai avanti e giocaci un po'.
‫Basta giocare con alcuni diversi tipi di elementi.
‫Ne hai già visti alcuni e in seguito esamineremo molti più controlli.
‫Quindi quelli che abbiamo usato finora sono principalmente pulsanti, giusto.
‫E blocchi di testo.
‫Ma useremo diversi bellissimi controlli nei video futuri.
‫Quindi ci vediamo lì.