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
W pliku Figma wybierz komponent i otwórz wtyczkę Relay for Figma (Plugins > Relay for Figma).
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.
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.
- Otwórz wtyczkę Figma Relay, jeśli nie jest jeszcze otwarta.
- Kliknij Udostępnij deweloperowi.
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.
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.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:Otwórz pokój
app/java/com/example/hellofigma/MainActivity.kt
.Zmień jeden wiersz w klasie
MainActivity
, aby dodać wartość do parametrutitle
: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 } } } } }
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 } }
Ponownie utwórz projekt i zobacz zaktualizowany komponent w podglądzie. Zauważ, że nowa wartość parametru jest teraz widoczna.
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.
Polecane dla Ciebie
- Uwaga: tekst linku jest wyświetlany, gdy JavaScript jest wyłączony
- Konwertowanie projektów na kod w Android Studio
- Wprowadzanie i rozpowszechnianie aktualizacji projektu
- Podstawowe informacje o układzie wiadomości