このページは 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
- Chip インスタンスの chip-text パラメータを公開する subchip-text
- sub-icon
- details
Reservation Card パッケージには、Description Card パッケージが含まれています。パラメータは次のとおりです。
- hero-image
- headline は、説明カードインスタンスの title を公開します。パラメータを指定します。
- reservation-text は、Description Card インスタンスの chip-text パラメータ。
- summary は、説明カードインスタンスの details を公開します。パラメータを指定します。

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

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

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

これにより、ネストされたインスタンスからパラメータが公開されます。この例では、 Description Card インスタンスを選択し、詳細を公開しました。パラメータを指定します。
Relay for Figma プラグインの右側にあるペインで、パラメータを変更するか、パラメータ名を変更して生成されます。この例では、パラメータ名を summary: 引き続き、ネストされた details パラメータを参照します構成されます

親コンポーネント（この場合は予約カード）を Android Studio では、ネストされたパッケージがすべて自動的にインポートされます（この場合は、 説明カードやチップ）。コードが生成されると、各パッケージは独自のコンポーズ可能な関数を生成します。

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 インスタンスにオーバーライドを追加しました。 [Chip Text] から抽出したテキストを「予約が必要」に変更:

[Description]（説明）欄の Chip component インスタンス
カード

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

@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 が「予約が必要」で Chip を呼び出します。 chipText パラメータの値:

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

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

Description Card で Chip's Chip-text パラメータが次のように公開されている場合 subchip-text です。生成されたコードでは、DescriptionCard には subchipText があります。パラメータを追加し、chipText の値として subchipText を指定して Chip を呼び出します。 parameter:

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

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

また「予約が必要」というラベルがパラメータの値です。つまり、 DescriptionCard のプレビューにのみ、生成されたコードで表示されます。

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

制限事項

あなたへのおすすめ

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

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

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

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

制限事項

あなたへのおすすめ

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

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