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
是預訂資訊卡未公開的說明資訊卡的唯一參數。因此,根據預設,預訂資訊卡的每一個執行個體都會使用說明資訊卡提供的圖示。
如要公開巢狀結構元件執行個體的參數:
- 選取含有參數的 UI 套件巢狀結構執行個體。您可以直接在畫布中,或者在「Relay instances」下方的 Relay for Figma 外掛程式中選取執行個體。
按一下「參數」旁的「+」。選單會顯示所選執行個體的參數。選取參數。
這會公開來自巢狀結構執行個體的參數。在此範例中,我們已選取「Description Card」執行個體,並公開「details」參數。
在 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)
)
}
}
}
限制
為您推薦
- 注意:系統會在 JavaScript 關閉時顯示連結文字
- 將元件對應至現有程式碼
- 內容參數
- Compose 版面配置的基本概念