任何 Figma 頁框、群組或元件圖層都可透過內容參數加上註解,以表示其子項是動態的。這可以用於設計容器元件,或是在設計中建立特定的空位,以便讓應用程式的程式碼插入自訂元件。
如要將子項參數新增至頁框或群組,請在 Figma 中選取圖層,按一下「Parameters」旁邊的 [+] 按鈕,然後從選單中選取 children
。
![Figma 中的子項參數](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/children-parameters/child-parameter.png?authuser=9&hl=zh-tw)
將 UI 套件匯入 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
參數)。
![預覽中保留的 Figma 子項元素](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/children-parameters/childe-element-in-preview.png?authuser=9&hl=zh-tw)
@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 參數,都「不會」顯示在 Relay for Figma 外掛程式 UI 中,而且也「無法」在產生的程式碼中使用。
- 在產生的程式碼中,預設不會再轉譯圖層的內容。該內容「僅會在預覽模式中」成為對應可組合項的內容。若要讓可組合項具有任何內容,開發人員必須編寫程式碼,將內容傳遞至子項參數。
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- Compose 版面配置的基本概念
- 新增參數
- 使用可組合項預覽預覽 UI