Ovviamente, questa schermata in questo momento non è così utile e
quindi ora andrò a quel testo che ho usato come un manichino e lo sostituiremo con diciamo che inizia un nuovo gioco,
qualcosa del genere e sotto questo, voglio avere un area di input con una leggera ombra esterna, quindi questo tipico aspetto di una carta
che potresti conoscere da alcune app e siti Web in cui hai una scatola con una leggera ombra
esterna, forse alcuni angoli arrotondati.
Voglio ricrearlo qui, quindi aggiungerò una vista qui, una vista perché di nuovo è un elemento molto flessibile, possiamo applicare molti stili
lì, possiamo aggiungere la nostra ombra e i nostri angoli arrotondati lì e quindi tenere il nostro
contenuto in quella
vista, quindi è ottimo per avere uno stile generale del contenitore e ora all'interno di quella vista,
voglio avere un testo in cui diciamo di selezionare un numero per esempio e dove poi vogliamo anche avere un campo di testo in cui
gli utenti può inserire qualcosa.
Quindi, aggiungerò
un componente di input di testo che è quel componente incorporato in cui gli utenti possono utilizzare la tastiera per inserire
un valore e qui, dovrebbero inserire un numero. Lo configureremo e lo modelleremo in un
secondo, per ora lo lascerò cadere così e sotto quello, voglio avere due pulsanti uno
accanto all'altro
e questo è importante, uno accanto all'altro, non sotto ciascuno altro che ci consente di ripristinare
l'ingresso e sceglierne uno nuovo o confermare quello scelto. Quindi abbiamo bisogno di una vista qui perché ciò ci consente di posizionare gli
elementi uno accanto all'altro mentre questi elementi sono posizionati uno sopra l'altro quindi perché se solo aggiungessi due pulsanti
qui, allora dovrei cambiare la direzione flessibile di queste viste per averli accanto l'uno all'altro, ma anche il testo
e l'inserimento del testo sarebbero seduti uno accanto all'altro.
Quindi ora aggiungerò una vista qui in modo che in questa vista, la vista circostante, questa, questa e questa componente
della vista siano posizionate
una sopra l'altra, quindi sull'asse verticale ma all'interno di questa vista, ora posso anche assicurarmi che gli oggetti lì dentro
si siedono uno accanto all'altro, quindi nell'asse orizzontale ed è quello che voglio qui.
Quindi importerò il pulsante integrato che è uno dei componenti della vista che si adatta automaticamente
alla piattaforma sottostante, più avanti in un modulo separato, imparerai come puoi scoprire manualmente su
quale piattaforma stai correndo per regolare l'aspetto della tua app.
Qui, andremo con il pulsante integrato e daremo al primo un titolo di reset e il secondo, il secondo
pulsante qui un titolo di conferma e poi
qui, onPress al momento non farà nulla, quindi questo è solo un funzione vuota, aggiungendola solo in modo che abbiamo
già il puntello, aggiungeremo la logica
più tardi e per
ora, avremo solo i pulsanti qui.
Ora lo stile mancherà, tuttavia, come ho detto, il pulsante dovrebbe essere seduto uno accanto all'altro.
Quindi darò questa vista qui che contiene i pulsanti uno stile che punta all'oggetto
stili e lì,
diciamo un contenitore di pulsanti, questo nome come
sempre dipende da te e voglio anche dare questa vista che contiene i miei input un stile qui, facendo riferimento all'oggetto
stili e userò il contenitore di input diciamo, questo nome
ovviamente dipende anche da te e questo qui, voglio modellare questo come un titolo speciale,
forse con una dimensione del carattere più grande, quindi qui, assegnerò uno stile di titolo diciamo.
Ora possiamo andare laggiù nel nostro foglio di stile e aggiungere il titolo, aggiungere il contenitore di input e anche il contenitore dei pulsanti e
ora possiamo iniziare ad aggiungere alcuni stili lì. Ora per il titolo, ancora una volta
voglio impostare la dimensione del carattere, quindi imposterò la dimensione
del carattere in questo modo, impostarla per dire 20 e forse aggiungerò anche una spaziatura sull'asse verticale con margine verticale di diciamo 10, 10 come questo e
tenere sempre a mente, il margine verticale sostanzialmente sostituisce il margine inferiore e il margine superiore e ora sul contenitore dei pulsanti e tornerò al contenitore
di input in un secondo, il contenitore dei pulsanti otterrà una direzione flessibile di riga, il valore
predefinito è colonna ma ora voglio
che gli oggetti si trovino uno accanto all'altro, quindi dobbiamo
usare la riga qui.
Voglio impostare una larghezza qui perché se non impostiamo una larghezza sul contenitore dei pulsanti, sarebbe larga
quanto i due pulsanti sono insieme, invece voglio usare la
larghezza del genitore, quindi di questa vista qui e quindi posizionare i pulsanti all'interno di questa vista, quindi
voglio fare
il contrario, non modellare la vista in base ai pulsanti, ma posizionare i pulsanti in base
alla vista.
Quindi darò al contenitore dei pulsanti questa vista e la larghezza esplicita qui e ora per posizionare i pulsanti lì dentro, possiamo
usare
justifyContent per posizionarli lungo l'asse principale che per la riga della direzione flessibile è da sinistra a destra
e lì sceglierò lo spazio in modo che i pulsanti si trovino sul bordo sinistro e destro di questa riga
e distribuiscano tutto lo spazio libero disponibile tra di loro. Anche qui aggiungi anche un po 'di imbottitura orizzontale in modo da
avere una spaziatura a sinistra e a destra all'interno della nostra vista, forse 15 in modo che i pulsanti non si trovino
direttamente sui bordi a sinistra e a destra ma ci sono
alcuni spaziando a sinistra ea destra. Ok, quindi se
salviamo questo, vediamo ciò che non so di te
ma che non sembra così bello, vero?
Ora il problema è che il contenitore di input non ha ancora stili. Il contenitore di input contiene tutti gli input, motivo per
cui gli stili lì sembrano un po 'fuori.
Quindi dovremmo dare uno stile al contenitore di input e lì, voglio aggiungere una larghezza e ora
puoi usare una larghezza hardcoded di diciamo 300 pixel o usare una larghezza e una percentuale.
Ora aggiungerò una larghezza qui di 300 ma aggiungerò anche una larghezza massima dell'80% in modo da avere una larghezza di 300 pixel ma se il dispositivo sarebbe
troppo piccolo, quindi è un po 'di reattività che aggiungo già qui, se il il dispositivo sarebbe troppo
piccolo, ci assicuriamo che la nostra larghezza non superi l'80%. E poi voglio allineare gli elementi al centro,
tenere presente che il contenitore di
input è una vista, quindi utilizza la flexbox, utilizza il valore
predefinito della colonna di direzione della flessione e quindi con l'allineamento del centro dell'articolo, posizioniamo gli oggetti
al centro sul asse trasversale che è da sinistra a
destra, quindi centriamo gli oggetti in orizzontale. Ora con quello, ora sembra molto meglio, non
possiamo davvero vedere l'input
ma questa è la cosa vecchia, giusto?
Dovremo modellarlo in modo che possiamo davvero vederlo. Tuttavia, vediamo i pulsanti e possiamo
vedere che il nostro layout generale e lo stile stanno prendendo forma.
Tuttavia, non sono ancora soddisfatto al 100% dell'aspetto di questo.