Parametri dei contenuti

Una volta implementati, i contenuti della maggior parte dei componenti non sono statici, ma cambiano in base ai dati forniti a un componente. Per riflettere questo aspetto nel tuo progetto, puoi utilizzare i parametri dei contenuti. I parametri dei contenuti consentono di specificare quale parte di un progetto contiene dati, senza hardcoded sui dati effettivi.

Aggiungere un parametro dei contenuti

1. Nel file Figma, seleziona il componente e apri il plug-in Relay for Figma (Plugin > Relay per Figma).

   

2. Nella finestra di Figma principale, seleziona il livello Titolo con ⌘ + clic su Mac o Ctrl + clic su Windows e Linux. Poi, nel plug-in, fai clic su + accanto a "Parametri" e seleziona text-content per aggiungere un parametro per il livello.

   

3. Per modificare il nome del parametro dei contenuti testuali del titolo, inseriscilo in Nome. Per questo tutorial, inserisci Titolo.

   

   Oltre a modificare il nome, puoi selezionare diversi tipi di proprietà o aggiungere una descrizione per generare un commento nel codice. Collabora con i tuoi sviluppatori per trovare lo schema di denominazione più adatto. I nomi dei parametri del contenuto si traducono nei nomi dei parametri nell'elemento componibile generato.

Salva la versione denominata

Ora contrassegniamo questa versione come pronta per essere importata nel codice.

1. Apri il plug-in Figma Relay, se non è già aperto.
2. Fai clic su Condividi con lo sviluppatore.

3. Nella schermata Condividi con lo sviluppatore, inserisci un nome e una descrizione per la versione.

   Titolo di esempio: Hello World Card V3

   Descrizione di esempio: parametri aggiunti

Aggiorna il componente in Android Studio

Aggiorniamo il componente in Android Studio.

1. In Android Studio, assicurati che la finestra dello strumento Progetto sia in visualizzazione Android. Fai clic con il tasto destro del mouse su app/ui-packages/hello_card/ e fai clic su Aggiorna pacchetto UI.

   

2. Fai clic su per creare di nuovo il progetto.

   

   Se apri app/java/com/example/hellofigma/hellocard/HelloCard.kt, noterai che è stato aggiunto un parametro: title. Il nome del parametro è il nome del parametro del contenuto specificato in Figma:

   

3. Apri app/java/com/example/hellofigma/MainActivity.kt.

4. Modifica una riga nella classe MainActivity per aggiungere un valore al parametro title:

   class MainActivity : ComponentActivity() {
       override fun onCreate(savedInstanceState: Bundle?) {
           super.onCreate(savedInstanceState)
           setContent {
               HelloFigmaTheme {
                   // A surface container using the 'background' color from the theme
                   Surface(color = MaterialTheme.colors.background) {
                       HelloCard(title="Balloon World!") // Change this line
                   }
               }
           }
       }
   }
   

5. Più in basso nello stesso file, nell'anteprima del componibile, modifica una riga:

   @Preview(showBackground = true)
   @Composable
   fun DefaultPreview() {
       HelloFigmaTheme {
           HelloCard(title="Balloon World!") // Change this line
       }
   }
   

6. Crea di nuovo il progetto e osserva il componente aggiornato nell'anteprima. Tieni presente che il nuovo valore parametro è ora visibile.

   

7. Esegui l'app per vedere gli stessi aggiornamenti nell'emulatore.

   Evviva! Hai appreso le nozioni di base del flusso di lavoro di inoltro.

Passaggio successivo

Il tutorial di base è terminato. Hai già visto molte delle funzionalità del flusso di lavoro di inoltro, ma sono disponibili molte altre caratteristiche. Se vuoi imparare a usare funzionalità come i gestori dell'interazione, lavorare con componenti che hanno più varianti di Figma e altro ancora, vai al tutorial avanzato.