모든 Figma 프레임, 그룹 또는 구성요소 레이어는 하위 요소가 동적임을 나타내는 콘텐츠 매개변수로 주석을 달 수 있습니다. 이는 컨테이너 구성요소를 설계하거나 맞춤 구성요소가 애플리케이션 코드로 삽입될 수 있는 설계에서 슬롯을 만드는 데 사용할 수 있습니다.
프레임 또는 그룹에 하위 매개변수를 추가하려면 Figma에서 레이어를 선택하고 '매개변수' 옆의 + 버튼을 클릭한 후 메뉴에서 children
을 선택합니다.
UI 패키지를 Android 스튜디오로 가져오면 생성된 @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)
)
}
)
}
}
레이어에 하위 매개변수를 추가하면 다음과 같은 방식으로 레이어에도 영향을 줍니다.
- 이전에 레이어에 추가된 모든 Relay 매개변수는 Figma용 Relay 플러그인 UI에 표시되지 않으며 생성된 코드에서 사용할 수 없습니다.
- 생성된 코드에서는 레이어 콘텐츠가 더 이상 기본적으로 렌더링되지 않습니다. 미리보기에서만 해당하는 컴포저블의 콘텐츠가 됩니다. 컴포저블에 콘텐츠가 있으려면 개발자는 하위 매개변수에 콘텐츠를 전달하는 코드를 작성해야 합니다.
추천 서비스
- 참고: JavaScript가 사용 중지되어 있으면 링크 텍스트가 표시됩니다.
- Compose 레이아웃 기본사항
- 매개변수 추가
- 컴포저블 미리보기로 UI 미리보기