Ora nell'elenco che stiamo visualizzando qui, i nostri elementi dell'elenco sono larghi come l'elenco perché stiamo avvolgendo l'elenco in questa vista qui intorno
alla nostra vista di scorrimento, quindi questo
imposta la larghezza per la vista di scorrimento aggiungi che imposta la larghezza per il oggetti lì dentro.
Ora supponiamo che qui abbiamo una larghezza diversa sull'elemento dell'elenco, diciamo che la larghezza di un elemento dell'elenco dovrebbe
essere solo il 60% dell'elenco, quindi
non è il 100% che è l'impostazione predefinita ma solo il 60%. Se lo facciamo e iniziamo, ora vedi che si
trova a sinistra, il che ha senso, il posizionamento predefinito qui se imposti una
larghezza su un elemento che è all'interno di un flexbox e gli elementi dell'elenco sono all'interno di un flexbox perché
la vista di scorrimento internamente usa anche il flexbox alla fine, anche se ci sono alcune differenze rispetto al normale
flexbox e tornerò a quelli ma usa ancora il flexbox e quindi poiché impostiamo una larghezza, l'impostazione
predefinita di allungamento degli elementi figlio lungo l'asse trasversale e l'asse trasversale sarebbe l'asse orizzontale perché per impostazione predefinita abbiamo la colonna
di direzione flessibile, ma lo stiramento predefinito viene sovrascritto perché abbiamo una larghezza sulla nostra voce
di elenco, quindi sui nostri elementi figlio. Ora potremmo comunque voler centrare questi elementi nell'elenco
e per questo, puoi andare alla vista di scorrimento e assegnare uno stile lì, anche se
non
attraverso il puntello di stile che puoi usare ma che non ti consente di modellare nulla ma per
dare uno stile al contenuto in una vista a scorrimento e applicare, ad esempio, le impostazioni flessibili per il
contenuto, è necessario utilizzare lo stile del contenitore del contenuto e questo è solo
qualcosa da memorizzare o da cercare nei documenti ufficiali, ovviamente. Per la vista di scorrimento e per FlatList, hai lo stile del contenitore di contenuti
che usi per controllare il layout all'interno di quella vista di scorrimento.
Ora qui su quello stile del contenitore di contenuti, ora possiamo fare riferimento all'elenco degli stili e, quindi, fammi effettivamente rinominare
questo stile di elenco corrente che stiamo applicando a quella vista di avvolgimento del contenitore dell'elenco perché alla fine
è un contenitore attorno al nostro elenco e questo qui è l'elenco stesso.
In alternativa, avresti potuto nominare questo contenuto dell'elenco ovviamente, ma lo chiamerò semplicemente elenco e
rinominerò l'altra cosa per elencare il contenitore. Pertanto, questo qui verrà rinominato per elencare il contenitore
e ora possiamo aggiungere una nuova proprietà dell'elenco qui al foglio di stile e questo è
ora all'interno della vista di scorrimento, dando uno stile al nostro contenitore o disponendo il contenuto del nostro contenitore per essere
precisi e lì, poiché questo utilizza scatola flessibile internamente, è possibile utilizzare gli elementi di allineamento per controllare l'allineamento lungo l'asse trasversale e
impostarlo al centro e questo dovrebbe ora assicurarsi che gli elementi siano nuovamente centrati nel caso siano più piccoli e questo è
effettivamente ciò che sta accadendo qui.
Quindi, con ciò, sai come controllare e disporre il contenuto all'interno di una vista
di scorrimento o di un elenco in generale. E se volessi controllare anche il flexbox lungo l'asse principale?
Diciamo che il nostro elenco qui in realtà non dovrebbe iniziare proprio sotto questa casella qui con i nostri controlli ma un po 'più
in basso, dovrebbe iniziare nella parte inferiore dello schermo e poi crescere fino in cima e
quindi essere scorrevole solo quando raggiunge il superiore.
Questo può anche essere controllato con il nostro stile di elenco che è lo stile applicato allo stile del contenitore di
contenuti, quindi con questo stile di contenitore di contenuto, puoi controllare anche questo aggiungendo il giustificativo perché
il contenuto giustificato consente di posizionare il contenuto lungo l'asse principale del flexbox e l'asse principale del
flexbox di default è l'asse verticale perché la direzione predefinita è la colonna.
Quindi qui, ora usiamo la fine flessibile invece dell'impostazione predefinita che è l'inizio flessibile e la fine flessibile ora dovrebbe effettivamente spostare
gli elementi alla fine dell'elenco.
Quindi vediamo se
funziona,
eh, non sembra funzionare, giusto?
Il problema qui è che la vista di scorrimento aumenta solo questa vista interna che avvolge alla fine quando vengono
aggiunti nuovi elementi, ora
vogliamo che quella vista interna cresca automaticamente. In una visione normale,
raggiungeremo questo obiettivo aggiungendo uno flessibile.
Quindi proviamo qui in questo elenco di stili che aggiungiamo anche alla vista di scorrimento.
Se lo aggiungiamo qui, ora vedi che si comporta correttamente, inizia qui in basso e ora coltiviamo questo
e speriamo di non
risolverlo troppo presto e vedi, possiamo scorrere. Quindi questo in realtà sta crescendo e funziona esattamente come vogliamo. È scorrevole e generalmente funziona
nel modo desiderato, ma noterai che non puoi davvero farlo scorrere in modo
tale da vedere sempre l'elemento più recente. Puoi scorrere lì ma poi salta indietro e probabilmente
non è quello che vogliamo, su Android, inoltre
non funziona. Lì, se
ora iniziamo a indovinare, vedrai lo stesso
comportamento, beh, se ci arrivassi, l'unica differenza è che si è rotto per un
motivo diverso, non riesco nemmeno a scorrere. Quindi Flex One non fa davvero il lavoro, quello che puoi usare lì è
qualcosa che non abbiamo mai usato prima e che Flex Flex cresce. Ora flex grow si assicura anche che
l'elemento a cui si aggiunge questo cresca e occupi più spazio possibile, proprio come flex
one, la differenza è che flex grow funziona un po 'diversamente internamente, è più
flessibile di flex. Flex dice semplicemente di prendere
tutto lo spazio disponibile in tutte le direzioni che puoi ottenere, flex grow in sostanza indica al contenitore di
essere in grado di crescere, di essere in grado di occupare tutto lo spazio che può ottenere e lo farà, ma mantiene
l'altro
comportamento che ha normalmente, in questo caso della vista di scorrimento, in cui è scorrevole e può
superare anche i confini dello schermo.
Quindi è un po 'più flessibile e probabilmente non ne hai bisogno così spesso in una vista normale ma in
una vista di scorrimento, è esattamente
ciò di cui abbiamo bisogno e lo sto mostrando qui perché questo è un caso speciale che devi solo
sai o su cosa
potresti inciampare e in genere trovi quindi soluzioni su overflow dello stack e così via, qui lo trovi in questo
corso perché è uno scenario che potresti incontrare e quindi, si spera, puoi quindi ricordare questa lezione
e vedere come risolvi questo.
Quindi ho aggiunto flex grow a quella proprietà dell'elenco e ora diamo un altro tentativo. Qui su iOS, se iniziamo a
indovinare i numeri qui, ora vedi che posso effettivamente scorrere in modo tale che l'ultimo elemento sia visibile e posso ancora scorrere in modo
tale che l'elemento più vecchio sia visibile, quindi
ora questo mostra il comportamento che vogliamo, grazie crescere flessibile.
E su Android, sarà lo stesso se iniziamo un gioco
lì, vedi ora posso scorrere anche qui e posso vedere sia le ipotesi più recenti che quelle più vecchie.
Quindi ora funziona nel modo in cui dovrebbe essere qui su Android e iOS e stavo mostrando tutto questo semplicemente in modo che
tu sia a conoscenza di questi schemi, di questo speciale stile contenitore di contenuti sulla vista di scorrimento e volevo anche assicurarmi
che tu eravamo a conoscenza di alcuni dei problemi che potresti incontrare quando inizi a
disegnare lo stile e quando vuoi aggiungere il tuo layout lì, quindi questi sono alcuni trucchi che possono
essere molto utili se incontri quella situazione nella tua app.