このページは Cloud Translation API によって翻訳されました。

ネストされたパッケージインスタンス

ネストされたインスタンスを含む UI パッケージ

UI パッケージには、他の UI パッケージのインスタンスを含める（またはネストする）ことができ、各レベルでの動的コンテンツとインタラクティビティをサポートします。すべて Relay for Android Studio プラグインを使用して自動的にインポートされます。

ネストされたインスタンスの追加とネストされたパラメータの公開

パッケージインスタンスは、通常の Figma のコンポーネントインスタンスの追加と同じように追加できます。

ネストされたパッケージインスタンスをパッケージに追加すると、他のレイヤのプロパティと同様に、ネストされたインスタンスパラメータに基づいてコンテンツとインタラクションパラメータを追加できます。

パッケージ化されたインスタンスレイヤを選択します。
[Relay for Figma UI] で [+] 追加パラメータをクリックします。
ネストされたパッケージパラメータのいずれかを選択します。

選択したパラメータまたは操作が親コンポーネントによって公開され、ネストされたパッケージパラメータと親コンポーネントに追加された新しいパラメータの間の接続を形成します。生成されたコードで、親に値を指定できます。この値は、ネストされたパッケージのコードコンポーネントのインスタンスに渡されます。

ネストされたインスタンスが親コンポーネントの複数の Figma バリアントに存在する場合、UI はバリアントインスタンスをグループ化して、個々の構成を有効にします。

バリアントごとのインスタンスのグループ化

デフォルトでは、ネストされたパッケージインスタンスパラメータは親コンポーネントによって公開されません。代わりに、生成されるコードは、通常のパラメータのオーバーライドと同様に、Figma で指定した値を使用します。

ネストされたインスタンスパラメータを親から公開する

次の例をご覧ください。

Chip パッケージには、テキストパラメータ chip-text が 1 つあります。
Description Card パッケージには、チップパッケージが含まれます。パラメータは次のとおりです。
- title
- subchip-text。チップインスタンスの chip-text パラメータを公開します。
- sub-icon
- details
Reservation Card パッケージには、Description Card パッケージが含まれています。パラメータは次のとおりです。
- hero-image
- headline。Description Card インスタンスの title パラメータを公開します。
- reservation-text。Description Card インスタンスの chip-text パラメータを公開します。
- summary。Description Card インスタンスの details パラメータを公開します。

Description Card の唯一のパラメータである sub-icon は、Reservation Card により公開されません。そのため、Reservation Card のすべてのインスタンスが、Description Card がデフォルトで提供するアイコンを使用します。

ネストされたコンポーネントインスタンスのパラメータを公開するには:

パラメータを持つ UI パッケージのネストされたインスタンスを選択します。インスタンスは、キャンバスで直接選択するか、Relay for Figma プラグインの [Relay instances] で選択できます。
[Parameters] の横にある [+] をクリックします。選択したインスタンスのパラメータがメニューに表示されます。パラメータを選択します。

これにより、ネストされたインスタンスからパラメータが公開されます。この例では、Description Card インスタンスを選択し、details パラメータを公開しています。
Relay for Figma プラグインの右側にあるペインで、別のパラメータを選択するか、パラメータの名前を変更して、生成されたコードでの呼び出し方法を変更できます。この例では、パラメータの名前が summary に変更され、引き続きネストされたインスタンスの details パラメータを参照します。

親コンポーネント（この場合は Reservation Card）を Android Studio にインポートすると、ネストされたすべてのパッケージ（この場合は Description Card と Chip）も自動的にインポートされます。コードが生成されると、各パッケージは独自のコンポーズ可能な関数を生成します。

UI パッケージと生成されたコード

この例で生成されるコードは次のようになります。

ReservationCard.kt

..
import com.example.hellofigma.descriptioncard.DescriptionCard
...

@Composable
fun ReservationCard(
    modifier: Modifier = Modifier,
    heroImage: Painter,
    headline: String,
    summary: String,
    reservationText: String
) {
    ...
    DescriptionCard(
        title = headline,
        details = summary,
        subchipText = reservationText,
        subIcon = painterResource(R.drawable.reservation_card_bookmark_icon),
        modifier = modifier
    )
    ...
}

DescriptionCard.kt

...
import com.example.hellofigma.chip.Chip
...
@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
    title: String,
    details: String,
    subchipText: String,
    subIcon: Painter
) {
   ...
   Chip(chipText = subchipText)
   ...
}

ネストされたパッケージインスタンスのプロパティのオーバーライド

Figma でネストされたインスタンスプロパティの値をオーバーライドすると、ネストされたコンポーネントがそのプロパティのパラメータを追加した場合にのみ、Compose コードで新しい値が変換されます。それ以外の場合、新しい値は破棄され、ネストされたコンポーネントの元の値がコードで使用されます。

次の例で考えてみましょう。Description Card コンポーネントには、Chip コンポーネントインスタンスがあります。テキストを「Chip Text」から「Reservation Required」に変更することで、Chip インスタンスにオーバーライドを追加しました。

Description Card の Chip コンポーネントインスタンス

チップにテキストのパラメータがない場合、生成されたコードの説明カードチップには「Reservation Required」ではなく「Chip Text」と引き続き表示されます。

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
) {
    ...
    Chip(
        modifier = modifier
        // No parameter available to override the chip's text
    )
    ...
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
) {...}

Chip がそのテキストのパラメータ（たとえば chip-text）を持っている場合、生成されたコード内で DescriptionCard は chipText パラメータの値として「Reservation Required」を指定して Chip を呼び出します。

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
) {
    ...
    Chip(
        modifier = modifier,
        chipText = "Reservation Required"
    )
    ...
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
    chipText: String
) {...}

Description Card が Chip'stip-text パラメータを subchip-text として公開している場合、生成されたコード内で DescriptionCard は subchipText パラメータを持ち、chipText パラメータの値として subchipText を指定して Chip を呼び出します。

@Composable
fun DescriptionCard(
    modifier: Modifier = Modifier,
    subchipText: String
) {
    ...
    Chip(
        modifier = modifier,
        chipText = subchipText
    )
    ...
}

@Composable
fun Chip(
    modifier: Modifier = Modifier,
    chipText: String
) {...}

さらに、「Reservation Required」がパラメータの値になったため、DescriptionCard のプレビューでのみ、生成されたコードに表示されます。

@Preview
@Composable
private fun DescriptionCardPreview() {
    MaterialTheme {
        RelayContainer {
            DescriptionCard(
                subchipText = "Reservation Required",
                modifier = Modifier.rowWeight(1.0f).columnWeight(1.0f)
            )
        }
    }
}

制限事項

あなたへのおすすめ

注: JavaScript がオフになっている場合はリンクテキストが表示されます
既存のコードへのコンポーネントのマッピング
コンテンツパラメータ
Compose レイアウトの基本

ネストされたパッケージ インスタンス

ネストされたインスタンスの追加とネストされたパラメータの公開

ネストされたパッケージ インスタンスのプロパティのオーバーライド

制限事項

あなたへのおすすめ

ネストされたパッケージインスタンス

ネストされたパッケージインスタンスのプロパティのオーバーライド