Inhaltsparameter

Bei der Implementierung ist der Inhalt der meisten Komponenten nicht statisch. Er ändert sich je nach den Daten, die einer Komponente bereitgestellt werden. Um dies in Ihren Designs widerzuspiegeln, können Sie Inhaltsparameter verwenden. Mit Inhaltsparametern können Sie angeben, welcher Teil eines Designs Daten enthält, ohne die eigentlichen Daten hartzucodieren.

Inhaltsparameter hinzufügen

1. Wählen Sie in Ihrer Figma-Datei die Komponente aus und öffnen Sie das Relay for Figma-Plug-in (Plugins > Relay for Figma).

   

2. Wählen Sie im Hauptfenster von Figma mit ⌘ + Klick (Mac) oder Ctrl + click (Windows und Linux) die Ebene Title aus. Klicken Sie dann im Plug-in neben „Parameters“ auf + und wählen Sie text-content aus, um einen Parameter für die Ebene hinzuzufügen.

   

3. Wenn Sie den Namen des Parameters für den Titeltextinhalt ändern möchten, geben Sie ihn im Feld Name ein. Geben Sie für diese Anleitung Title ein.

   

   Sie können nicht nur den Namen bearbeiten, sondern auch andere Attributtypen auswählen oder eine Beschreibung hinzufügen, um einen Kommentar im Code zu generieren. Arbeiten Sie mit Ihren Entwicklern zusammen, um das geeignete Benennungsschema zu finden. Die Namen der Inhaltsparameter werden in die Namen der Parameter in der generierten zusammensetzbaren Funktion übersetzt.

Benannte Version speichern

Markieren wir diese Version nun als bereit für den Import in Code.

1. Öffnen Sie das Figma Relay-Plug-in, falls es noch nicht geöffnet ist.
2. Klicken Sie auf Mit Entwickler teilen.

3. Geben Sie auf dem Bildschirm Für Entwickler freigeben einen Namen und eine Beschreibung für die Version ein.

   Beispieltitel: Hello World Card V3

   Beispielbeschreibung: Hinzugefügte Parameter

Komponente in Android Studio aktualisieren

Aktualisieren wir die Komponente in Android Studio.

1. Prüfen Sie in Android Studio, ob sich das Fenster „Project Tool“ in der Android-Ansicht befindet. Klicken Sie dann mit der rechten Maustaste auf app/ui-packages/hello_card/ und wählen Sie Update UI Package (UI-Paket aktualisieren) aus.

   

2. Klicken Sie auf , um Ihr Projekt noch einmal zu erstellen.

   

   Wenn Sie app/java/com/example/hellofigma/hellocard/HelloCard.kt öffnen, sehen Sie, dass ein Parameter hinzugefügt wurde: title. Der Name des Parameters ist der Name des Inhaltsparameters, den wir in Figma angegeben haben:

   

3. „app/java/com/example/hellofigma/MainActivity.kt“ öffnen.

4. Ändern Sie eine Zeile in der Klasse MainActivity, um dem Parameter title einen Wert hinzuzufügen:

   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. Ändern Sie weiter unten in derselben Datei in der Vorschau der zusammensetzbaren Funktion eine Zeile:

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

6. Erstellen Sie Ihr Projekt noch einmal und sehen Sie sich die aktualisierte Komponente in der Vorschau an. Der neue Parameterwert ist jetzt sichtbar.

   

7. Führen Sie die App aus, um dieselben Updates im Emulator zu sehen.

   Super! Sie kennen jetzt die Grundlagen des Relay-Workflows.

Nächster Schritt

Damit sind wir am Ende des Tutorials angelangt. Während Sie viele der Funktionen des Relay-Workflows gesehen haben, stehen Ihnen noch einige weitere zur Verfügung. Wenn Sie mehr über die Verwendung von Funktionen wie Interaktions-Handlern oder Komponenten mit mehreren Figma-Varianten erfahren möchten, sehen Sie sich die Anleitung für Fortgeschrittene an.