Детские параметры

Любой слой кадра, группы или компонента Figma может быть помечен параметром контента, чтобы указать, что его дочерние элементы являются динамическими. Это можно использовать для проектирования компонентов контейнера или для создания слотов в проекте, куда пользовательские компоненты могут быть внедрены кодом приложения.

Чтобы добавить параметр «Дети» в кадр или группу, выберите слой в Figma и нажмите кнопку «+» рядом с «Параметры», затем выберите children в меню.

После импорта пакета пользовательского интерфейса в Android Studio параметр появляется в сгенерированной сигнатуре функции @Composable с типом @Composable RelayContainerScope.() -> Unit (в данном случае с именем customGraphic ).

@Composable
fun HelloCardWithCustomChild(
    modifier: Modifier = Modifier,
    customGraphic: @Composable RelayContainerScope.() -> Unit
) {
    TopLevel(modifier = modifier) {
        Image()
        CustomGraphic { customGraphic() }
        Title()
    }
}

В функции @Preview для заполнения слота используется дизайн из файла Figma (в данном случае устанавливается параметр customGraphic ).

@Preview(widthDp = 248, heightDp = 265)
@Composable
private fun HelloCardWithCustomChildPreview() {
    MaterialTheme {
        HelloCardWithCustomChild(
            customGraphic = {
                RelayText(
                    content = "Label",
                    fontSize = 16.0.sp,
                    fontFamily = montserrat,
                    color = Color(
                       alpha = 255,
                       red = 0,
                       green = 0,
                       blue = 0
                    ),
                    textAlign = TextAlign.Left,
                    fontWeight = FontWeight(500.0.toInt())
                )
                RelayImage(
                    image = painterResource(
                       R.drawable.hello_card_with_custom_child_custom_graphic_still
                    ),
                    contentScale = ContentScale.Crop,
                    modifier =
                       Modifier.requiredWidth(132.0.dp).requiredHeight(48.0.dp)
                )
            }
        )
    }
}

Добавление параметра Children к слою также влияет на слой следующим образом:

• Любые параметры Relay, которые были добавлены в слой ранее, не отображаются в пользовательском интерфейсе плагина Relay for Figma и недоступны в сгенерированном коде.
• В сгенерированном коде содержимое слоя больше не отображается по умолчанию. Он становится содержимым соответствующего компонуемого объекта только в предварительном просмотре . Чтобы составной объект имел какое-либо содержимое, разработчик должен написать код для передачи содержимого в параметр Children.