任意の Figma フレーム、グループ、コンポーネント レイヤには、子が動的であることを示すために、コンテンツ パラメータでアノテーションを付けることができます。これは、コンテナ コンポーネントの設計や、アプリケーション コードでカスタム コンポーネントを挿入できる設計でのスロットの作成に使用できます。
子パラメータをフレームまたはグループに追加するには、Figma でレイヤを選択し、[Parameters] の横にある [+] ボタンをクリックして、メニューから children
を選択します。
![Figma の子パラメータ](https://developer.android.com/static/develop/ui/compose/tooling/relay/images/children-parameters/child-parameter.png?authuser=9&hl=ja)
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=ja)
@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 をプレビューする