Parametry treści

Po zaimplementowaniu zawartość większości komponentów nie jest statyczna – zmienia się w zależności od danych dostarczanych do komponentu. Aby odzwierciedlić to w swoich projektach, możesz użyć parametrów treści. Parametry treści pozwalają określić, która część projektu zawiera dane, bez potrzeby kodowania rzeczywistych danych.

Dodaj parametr treści

1. W pliku Figma wybierz komponent i otwórz wtyczkę Relay for Figma (Plugins > Relay for Figma).

   

2. W głównym oknie Figma wybierz warstwę Tytuł, naciskając ⌘ + kliknięcie na Macu lub Ctrl + kliknięcie w systemie Windows i Linux. Następnie we wtyczce kliknij + obok pozycji „Parameters” (Parametry) i wybierz text-content, aby dodać parametr warstwy.

   

3. Aby zmienić nazwę parametru treści tekstowej tytułu, wpisz go w polu Nazwa. Na potrzeby tego samouczka wpisz Tytuł.

   

   Oprócz nazwy możesz wybrać różne typy właściwości lub dodać opis, aby wygenerować komentarz w kodzie. Wspólnie z programistami ustal najbardziej odpowiednią nazwę. Nazwy parametrów treści przekładają się na nazwy parametrów w wygenerowanym elemencie kompozycyjnym.

Zapisz wersję z nazwą

Oznaczmy tę wersję jako gotową do zaimportowania do kodu.

1. Otwórz wtyczkę Figma Relay, jeśli nie jest jeszcze otwarta.
2. Kliknij Udostępnij deweloperowi.

3. Na ekranie Udostępnij deweloperowi wpisz nazwę i opis wersji.

   Przykładowy tytuł: Karta Hello World V3

   Przykładowy opis: dodane parametry

Aktualizowanie komponentu w Android Studio

Zaktualizujmy komponent w Android Studio.

1. W Android Studio sprawdź, czy okno narzędzia Projekt jest ustawione w widoku Androida. Następnie kliknij prawym przyciskiem myszy app/ui-packages/hello_card/ i wybierz Zaktualizuj pakiet UI.

   

2. Kliknij , aby ponownie utworzyć projekt.

   

   Po otwarciu app/java/com/example/hellofigma/hellocard/HelloCard.kt zobaczysz, że został dodany parametr: title. Nazwa parametru to nazwa parametru content podanego przez nas w Figmie:

   

3. Otwórz pokój app/java/com/example/hellofigma/MainActivity.kt.

4. Zmień jeden wiersz w klasie MainActivity, aby dodać wartość do parametru 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. Dalej w tym samym pliku, w podglądzie elementu kompozycyjnego, zmień jeden wiersz:

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

6. Ponownie utwórz projekt i zobacz zaktualizowany komponent w podglądzie. Zauważ, że nowa wartość parametru jest teraz widoczna.

   

7. Uruchom aplikację, aby zobaczyć te same aktualizacje w emulatorze.

   Hurra! Znasz już podstawy przepływu pracy usługi Relay.

Następny krok

To koniec podstawowego samouczka. Chociaż znasz już wiele funkcji przepływu pracy w usłudze Relay, masz do dyspozycji kilka innych. Jeśli chcesz się dowiedzieć, jak korzystać z takich funkcji jak moduły obsługi interakcji oraz pracować z komponentami, które mają wiele wersji Figma, zapoznaj się z samouczkiem zaawansowanym.