Параметры контента

При реализации содержимое большинства компонентов не статично — оно меняется в зависимости от данных, предоставляемых компоненту. Чтобы отразить это в своих проектах, вы можете использовать параметры контента. Параметры контента позволяют указать, какая часть проекта содержит данные, без жесткого кодирования фактических данных.

Добавьте параметр контента

1. В файле Figma выберите компонент и откройте плагин Relay for Figma ( Плагины > Relay for Figma ).

   

2. В главном окне Figma выберите слой заголовка , нажав ⌘ + щелчок на Mac или Ctrl + щелчок в Windows и Linux. Затем в плагине нажмите + рядом с «Параметры» и выберите текстовое содержимое , чтобы добавить параметр для слоя.

   

3. Чтобы изменить имя параметра текстового содержимого «Заголовок», введите его в поле «Имя» . Для этого урока введите Title .

   

   Помимо редактирования имени, вы можете выбрать различные типы свойств или добавить описание для создания комментария в коде. Вместе с разработчиками найдите наиболее подходящую схему именования. Имена параметров контента преобразуются в имена параметров в сгенерированном компонуемом объекте.

Сохранить названную версию

Давайте теперь отметим эту версию как готовую для импорта в код.

1. Откройте плагин Figma Relay, если он еще не открыт.
2. Нажмите «Поделиться с разработчиком» .

3. На экране «Поделиться с разработчиком» введите имя и описание версии.

   Пример названия : Привет, карта мира V3

   Пример описания : добавленные параметры

Обновите компонент в Android Studio.

Давайте обновим компонент в Android Studio.

1. В Android Studio убедитесь, что окно инструмента «Проект» находится в представлении Android . Затем щелкните правой кнопкой мыши app/ui-packages/hello_card/ и выберите « Обновить пакет пользовательского интерфейса» .

   

2. Нажмите на чтобы построить свой проект снова.

   

   Если вы откроете app/java/com/example/hellofigma/hellocard/HelloCard.kt , вы заметите, что был добавлен параметр: title . Имя параметра — это имя параметра контента, который мы указали в Figma:

   

3. Откройте app/java/com/example/hellofigma/MainActivity.kt .

4. Измените одну строку в классе MainActivity , чтобы добавить значение к параметру 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. Далее в том же файле в предварительном просмотре компонуемого измените одну строку:

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

6. Создайте свой проект заново и увидите обновленный компонент в предварительном просмотре! Обратите внимание, что новое значение параметра теперь видно.

   

7. Запустите приложение, чтобы увидеть те же обновления в эмуляторе.

   Ура! Вы изучили основы рабочего процесса Relay.

Следующий шаг

На этом базовое руководство закончено. Хотя вы уже ознакомились со многими функциями рабочего процесса Relay, существует еще несколько доступных функций. Если вы хотите научиться использовать такие функции, как обработчики взаимодействия, работу с компонентами, имеющими несколько вариантов Figma, и многое другое, переходите к расширенному руководству !