巢狀結構套件執行個體

UI 套件可包含其他 UI 套件的執行個體 (或「建立巢狀結構」)，支援每個層級的動態內容與互動，皆可透過 Relay for Android Studio 外掛程式自動匯入。

新增巢狀結構執行個體並公開巢狀結構參數

您可以新增套件執行個體，就像在 Figma 中新增元件執行個體一樣。

將巢狀結構執行個體新增至套件後，您可以依據巢狀結構執行個體參數新增內容和互動參數，就像任何其他圖層的屬性一樣：

• 選取套件的執行個體圖層。
• 在 Relay for Figma UI 中按一下「+」新增參數。
• 選取其中一個巢狀結構套件參數。

所選參數或互動由父項元件公開，以在巢狀結構套件參數與新增至父項元件的新參數之間建立連線。在產生的程式碼中，您現在可以向父項提供一個值，該值會傳遞至巢狀結構套件程式碼元件的執行個體。

如果父項元件的多個 Figma 變化版本中有巢狀結構例項，UI 會將變化版本執行個體分組，以便啟用個別設定。

根據預設，父項元件不會公開巢狀結構套件執行個體參數。而是會產生您在 Figma 中指定的值，就像一般參數覆寫一樣。

我們來看看這個例子：

• 方塊套件包含一個文字參數 chip-text。
• 說明資訊卡套件包含方塊套件。參數如下：
  • title
  • subchip-text，用於公開方塊執行個體的 chip-text 參數
  • sub-icon
  • details

• 預訂資訊卡套件包含說明資訊卡套件。其參數如下：

  • hero-image

  • headline，用於公開說明資訊卡執行個體的 title 參數。

  • reservation-text，用於公開說明資訊卡執行個體的 chip-text 參數。

  • summary，用於公開說明資訊卡執行個體的 details 參數。

請注意，sub-icon 是預訂資訊卡未公開的說明資訊卡的唯一參數。因此，根據預設，預訂資訊卡的每一個執行個體都會使用說明資訊卡提供的圖示。

如要公開巢狀結構元件執行個體的參數：

1. 選取含有參數的 UI 套件巢狀結構執行個體。您可以直接在畫布中，或者在「Relay instances」下方的 Relay for Figma 外掛程式中選取執行個體。

2. 按一下「參數」旁的「+」。選單會顯示所選執行個體的參數。選取參數。

   這會公開來自巢狀結構執行個體的參數。在此範例中，我們已選取「Description Card」執行個體，並公開「details」參數。

   

3. 在 Relay for Figma 外掛程式右側的窗格中，您可以選取其他參數，或是重新命名參數，以變更其在產生的程式碼中的呼叫方式。在這個範例中，參數已重新命名為「summary」，該參數仍會參照巢狀結構執行個體的「details」參數。

   

將父項元件 (在本例中為預訂資訊卡) 匯入 Android Studio 時，會自動匯入所有巢狀結構套件 (在本例中為說明資訊卡) 和方塊。產生程式碼時，每個套件都會產生自己的可組合函式。

範例中產生的程式碼如下所示：

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 程式碼中轉譯。否則會丟棄新值，並在程式碼中使用巢狀結構元件中的原始值。

我們來舉例說明。說明資訊卡元件具有方塊元件執行個體。我們已將覆寫新增至方塊執行個體，並將文字從「Chip Text」變更為「Reservation Required」：

如果方塊文字不含參數，則在產生的程式碼中，說明資訊卡方塊仍會顯示「Chip Text」，而不是「Reservation Required」。

@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-text，則在產生的程式碼中，DescriptionCard 會呼叫 Chip 且將「Reservation Required」做為 chipText 參數的值：

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

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

如果說明資訊卡將方塊的 chip-text 參數公開為 subchip-text，則在產生的程式碼中，DescriptionCard 包含 subchipText 參數並呼叫 Chip，且將 subchipText 做為 chipText 參數的值：

@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)
            )
        }
    }
}

限制

• 與父項元件具有相同變化版本屬性的巢狀結構元件無法編譯
• 更新 UI 套件以外的資源不會強制執行新版本