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

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

Параметр заголовка в плагине

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

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

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

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

    Детали параметров в плагине Figma

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

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

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

  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:

    Параметр заголовка в 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. Создайте свой проект заново и увидите обновленный компонент в предварительном просмотре! Обратите внимание, что новое значение параметра теперь видно.

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

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

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

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

{% дословно %} {% дословно %} {% дословно %} {% дословно %}