İç içe paket örnekleri

İç içe yerleştirilmiş örneklerle bir Kullanıcı Arayüzü Paketi

Kullanıcı Arayüzü Paketleri, her düzeyde dinamik içerik ve etkileşim desteğiyle diğer Kullanıcı Arayüzü Paketlerinin örneklerini (veya "iç içe) içerebilir. Bunların tümü Relay for Android Studio eklentisi kullanılarak otomatik olarak içe aktarılır.

İç içe yerleştirilmiş örnekler ekleme ve iç içe yerleştirilmiş parametreleri gösterme

Paket örnekleri, normalde Figma'ya bileşen örnekleri eklediğiniz gibi eklenebilir.

Bir pakete iç içe yerleştirilmiş paket örneği ekledikten sonra, diğer katmanların özelliklerinde olduğu gibi iç içe yerleştirilmiş örnek parametrelerine göre içerik ve etkileşim parametreleri ekleyebilirsiniz:

  • Paketlenmiş örnek katmanını seçin.
  • Figma kullanıcı arayüzü için Relay'de + ekle parametresini tıklayın.
  • İç içe yerleştirilmiş paket parametrelerinden birini seçin.

Seçilen parametre veya etkileşim, üst bileşen tarafından gösterilir ve iç içe yerleştirilmiş paket parametresi ile üst bileşene eklenen yeni bir parametre arasında bağlantı oluşturur. Oluşturulan kodda artık üst öğe için bir değer sağlayabilirsiniz ve bu değer, iç içe yerleştirilmiş paketin kod bileşeninin bir örneğine geçirilir.

İç içe yerleştirilmiş örnek, üst bileşende birden fazla Figma varyantı varsa kullanıcı arayüzü, bağımsız yapılandırmayı etkinleştirmek için varyant örneklerini gruplandırır.

Varyant başına örnek gruplama

Varsayılan olarak, iç içe yerleştirilmiş paket örnek parametreleri üst bileşen tarafından gösterilmez. Bunun yerine, oluşturulan kod normal parametre geçersiz kılmalarında olduğu gibi, Figma'da belirttiğiniz değeri kullanır.

İç içe yerleştirilmiş örnek parametrelerini üst öğeleri tarafından sunmak

Aşağıdaki örneğe birlikte göz atalım:

  • Çip paketinde chip-text adlı tek bir metin parametresi bulunur.
  • Açıklama Kartı paketi bir Çip paketi içerir. Parametreler şunlardır:
    • title
    • subchip-text: Çip örneğinin chip-text parametresini gösterir
    • sub-icon
    • details

  • Rezervasyon Kartı paketi, bir Açıklama Kartı paketi içerir. Parametreleri şunlardır:

    • hero-image

    • headline seçeneği, Açıklama Kartı örneğinin title parametresini gösterir.

    • reservation-text seçeneği, Açıklama Kartı örneğinin chip-text parametresini gösterir.

    • summary seçeneği, Açıklama Kartı örneğinin details parametresini gösterir.

Açıklama Kartında Rezervasyon Kartı tarafından gösterilmeyen tek parametrenin sub-icon olduğunu unutmayın. Bu nedenle, bir Rezervasyon Kartının her örneğinde Açıklama Kartı'nın varsayılan olarak sağladığı simge kullanılır.

İç içe yerleştirilmiş bileşen örneğinin bir parametresini göstermek için:

  1. Parametre içeren bir Kullanıcı Arayüzü Paketi iç içe yerleştirilmiş örneğini seçin. Örneği doğrudan tuvalde veya Relay instances (Geçiş örnekleri) bölümünün altındaki Relay for Figma eklentisinde seçebilirsiniz.

  2. Parametreler'in yanındaki + işaretini tıklayın. Menüde, seçilen örneğe ait parametreler gösterilir. Bir parametre seçin.

    Bu işlem, iç içe yerleştirilmiş örnekten bir parametreyi gösterir. Bu örnekte Açıklama Kartı örneği seçilmiş ve details parametresi gösterilmiştir.

    Açıklama Kartı'nın ayrıntılar parametresini göstermek için

  3. Relay for Figma eklentisinin sağ tarafındaki bölmeden farklı bir parametre seçebilir veya oluşturulan kodda çağrılma şeklini değiştirmek üzere parametreyi yeniden adlandırabilirsiniz. Bu örnekte parametre, summary olarak yeniden adlandırılmıştır. Bu, iç içe yerleştirilmiş örneğimizdeki details parametresini ifade etmeye devam etmektedir.

    Ayrıntılar parametresini özet olarak yeniden adlandırmak,

Bir üst bileşeni (bu örnekte Rezervasyon Kartı) Android Studio'ya aktardığınızda, iç içe yerleştirilmiş tüm paketler (bu örnekte Açıklama Kartı ve Çip) otomatik olarak içe aktarılır. Kod oluşturulduğunda her paket kendi composable işlevini oluşturur.

Kullanıcı Arayüzü Paketleri ve oluşturulan kodlar

Bu örnek için oluşturulan kod aşağıdaki gibi görünür:

RezervasyonKartı.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
    )
    ...
}

AçıklamaKartı.kt

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

İç içe paket örneğinin özelliklerini geçersiz kıl

Figma'da iç içe yerleştirilmiş bir örnek özelliğinin değerini geçersiz kılarsanız yeni değer, yalnızca iç içe yerleştirilmiş bileşen söz konusu özellik için bir parametre eklediyse Compose kodunda çevrilir. Aksi takdirde, yeni değer atlanır ve iç içe yerleştirilmiş bileşendeki orijinal değer kodda kullanılır.

Aşağıdaki örneği inceleyelim. Açıklama Kartı bileşeninin bir Çip bileşen örneği vardır. "Çip Metni" olan metni "Rezervasyon Gerekli" olarak değiştirerek Chip örneğine bir geçersiz kılma işlemi ekledik:

Açıklama kartındaki çip bileşeni örneği

Çip'in metni için bir parametresi yoksa oluşturulan kodda Açıklama Kartının çipi hâlâ "Rezervasyon Gerekli" değil, "Çip Metni" olarak görünür.

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

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

Çip'in metni için çip-metni gibi bir parametresi varsa DescriptionCard, oluşturulan kodda chipText parametresinin değeri olarak "Rezervasyon Gerekli" olan Chip öğesini çağırır:

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

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

Açıklama Kartı, Çip'in çip metni parametresini altçip-metni olarak gösterirse oluşturulan kodda DescriptionCard, subchipText parametresine sahiptir ve chipText parametresinin değeri olarak subchipText ile Chip yöntemini çağırır:

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

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

Ayrıca, artık "Rezervasyon Gerekli" bir parametrenin değeri olduğundan, oluşturulan kodda yalnızca DescriptionCard'ın önizlemesinde görünür.

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

Sınırlamalar