Vi sto sfidando in questa sfida di codifica.
Dobbiamo creare un'applicazione che contenga tre Composable, ovvero un indicatore di avanzamento lineare.
Il secondo, componibile, è un pulsante che consente all'utente di aumentare l'avanzamento quando viene cliccato.
Il terzo componibile è il testo che visualizza l'avanzamento.
Tutti questi componibili dovrebbero essere stateless.
Mettete in pausa il video e riflettete.
Scrivere il proprio codice.
Spero che troviate la soluzione.
Inizio quindi con la creazione della prima funzione componibile, l'indicatore di progresso lineare.
Ha preso come parametro un progresso di tipo float.
E all'interno di questa funzione componibile devo creare un indicatore di avanzamento lineare.
Il progresso equivale al progresso Quindi sto creando il primo composable stateless.
Poiché questa funzione non memorizza alcuno stato, riceve l'avanzamento nel parametro.
Il secondo elemento da creare è il pulsante.
Quindi qui la funzione componibile aumenta il pulsante di avanzamento.
All'interno dei parametri dobbiamo specificare l'onclick, che è un parametro di
tipo espressione lambda che non prende parametri e non restituisce nulla.
Ho bisogno di creare un pulsante e di specificare il parametro onclick come parametro onclick.
Poi devo specificare un testo.
Aumentare i progressi.
Di nuovo, ragazzi, questa è un'altra funzione compostabile senza stato.
La terza cosa da creare è un testo che mostri l'avanzamento.
Quindi, allo stesso modo, creerò una nuova funzione denominata progress text
che riceverà un progress di tipo float e un testo componibile.
Il progresso è un galleggiante.
Ok, questi sono i nostri Composables stateless.
Ora saliamo nel contenuto del set.
E qui dobbiamo prestare attenzione.
Per prima cosa è necessario creare una variabile progress di tipo float e utilizzare by.
Ricordiamo lo stato mutabile di e imposterò lo stato iniziale a 0,0 f.
Questo è il galleggiante.
Ok, allora devo creare una colonna per visualizzare questi componibili in modo verticale.
Disposizione verticale per questa colonna come disposizione del punto centrale.
Nei prossimi video impareremo a conoscere la disposizione verticale e l'allineamento orizzontale.
All'inizio chiameremo la funzione lineare dell'indicatore di avanzamento che abbiamo creato e passeremo l'avanzamento.
La variabile di avanzamento che abbiamo creato prima del secondo componibile è il pulsante di avanzamento dell'aumento.
Simulare l'aggiornamento dei progressi.
In questo caso l'avanzamento è aumentato di 0,1 f, pari al 10% se l'avanzamento è superiore a 1,0 F.
Allora cosa dobbiamo fare per ripristinare
i progressi? È molto semplice.
Il terzo componibile è Display progress, che è un testo che
abbiamo creato in precedenza e che si chiama testo progress.
E a questo testo di avanzamento dobbiamo passare la variabile di avanzamento.
Ok.
Ora eseguiamo la nostra applicazione.
Eccoci qua.
Questa è la nostra applicazione.
Abbiamo il pulsante.
Abbiamo il testo e questo indicatore di progresso lineare.
Ora aumentate il progresso.
Si può notare che l'avanzamento sta aumentando e il testo visualizza 0,1.
Aumentate ancora e ancora il progresso del 60%, 70%, 80%, 90% e 100.
Quindi al 100 verrà resettato e i progressi saranno azzerati.
Congratulazioni ragazzi.
Siamo riusciti a creare questa applicazione.
Combinando i composable, gli indicatori di progresso, il concetto
di stateless e la funzionalità degli eventi click.