子項參數

任何 Figma 頁框、群組或元件圖層都可透過內容參數加上註解，以表示其子項是動態的。這可以用於設計容器元件，或是在設計中建立特定的空位，以便讓應用程式的程式碼插入自訂元件。

如要將子項參數新增至頁框或群組，請在 Figma 中選取圖層，按一下「Parameters」旁邊的 [+] 按鈕，然後從選單中選取 children。

將 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 參數)。

@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 中，而且也「無法」在產生的程式碼中使用。
• 在產生的程式碼中，預設不會再轉譯圖層的內容。該內容「僅會在預覽模式中」成為對應可組合項的內容。若要讓可組合項具有任何內容，開發人員必須編寫程式碼，將內容傳遞至子項參數。