İç içe paket örnekleri

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

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

Paket örnekleri, normalde bileşen örneklerini Figma'ya gidin.

Pakete iç içe yerleştirilmiş bir paket örneği ekledikten sonra, pakete içerik ve etkileşim parametreleri (tıpkı özellikleri arasındadır:

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

Seçilen parametre veya etkileşim, üst bileşen tarafından gösterilir. İç içe yerleştirilmiş paket parametresi ile yeni bir parametre arasında bağlantı oluşturmak üst bileşene eklenir. Oluşturulan kodda artık değeri üst öğeye gönderilir ve bu değer, iç içe yerleştirilmiş öğenin bir örneğine paketin kod bileşenidir.

İç içe yerleştirilmiş örnek, üst öğede birden fazla Figma varyantında bulunuyorsa bileşeninin yerine, bağımsız yapılandırmayı etkinleştirmek için varyant örneklerini gruplandırır.

Varsayılan olarak, iç içe yerleştirilmiş paket örneği parametreleri üst öğe tarafından açığa çıkarılmaz bir bileşenidir. Bunun yerine, oluşturulan kod Figma'da belirttiğiniz değeri kullanır. normal parametre geçersiz kılmaları gibi.

Aşağıdaki örneği inceleyelim:

• Çip paketinde chip-text adlı bir metin parametresi bulunur.
• Açıklama Kartı paketi bir çip paketi içerir. Parametreleri ş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. Bu parametreleri şunlardır:

  • hero-image

  • headline: Açıklama Kartı örneğinin title değerini gösterir. parametresinden sonra bir değer girin.

  • reservation-text: Açıklama Kartı örneğinin chip-text parametresinden yararlanın.

  • summary: Açıklama Kartı örneğinin details değerini gösterir. parametresinden sonra bir değer girin.

sub-icon Açıklama Kartının rezervasyon kartı tarafından gösterilir. Bu nedenle, rezervasyon kartının her örneği Varsayılan olarak Açıklama Kartı'nın sağladığı simgeyi kullanır.

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

1. Parametre içeren bir kullanıcı arayüzü paketinin iç içe yerleştirilmiş örneğini seçin. Şunları seçebilirsiniz: örneği doğrudan tuvalde veya Geçiş örnekleri.

2. Parametreler'in yanındaki + simgesini tıklayın. Bu menüde örnek olarak verilmiştir. Bir parametre seçin.

   Bu işlem, iç içe yerleştirilmiş örnekten bir parametreyi gösterir. Bu örnekte Açıklama Kartı örneğini seçtiniz ve ayrıntıları parametresinden sonra bir değer girin.

   

3. Relay for Figma eklentisinin sağ tarafındaki bölmede farklı bir parametre kullanabilir veya parametrenin oluşturulan kod. Bu örnekte, parametre özet, bu yine de iç içe yerleştirilmiş grubumuzdaki details parametresini örneğidir.

   

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

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

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

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

Figma'da iç içe yerleştirilmiş bir örnek özelliğinin değerini geçersiz kılarsanız yalnızca iç içe yerleştirilmiş bileşen bir parametre eklenmişse Compose koduna çevrilir seçebilirsiniz. Aksi takdirde, yeni değer atlanır ve orijinal değer değeri, kodda kullanılır.

Şimdi bu örneği inceleyelim. Açıklama Kartı bileşeninde bir Çip bulunur. bileşen örneğidir. Çip örneğine bir geçersiz kılma kuralı ekledik: "Çip Metni"ndeki metin olan değer "Rezervasyon Gerekli" olarak değiştirildi:

Çip'in metni için bir parametresi yoksa oluşturulan kodda Açıklama Kartının çipi üzerinde "Rezervasyon Gerekli" değil, "Çip Metni" yazıyor.

@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 chip-text gibi bir parametre varsa oluşturulan kod, DescriptionCard Chip öğesini "Rezervasyon Gerekli" ile çağırır olması chipText parametresinin değeri:

@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 subchip-text, oluşturulan kodda DescriptionCard bir subchipText içerir parametresini içerir ve chipText değeri olarak subchipText ile Chip yöntemini çağırır parametresi:

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

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

Dahası, artık "Rezervasyon Gerekli" parametrenin değeridir, Oluşturulan kodda yalnızca AçıklamaKartı'nı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

• Üst bileşenle aynı varyant özelliklerine sahip iç içe yerleştirilmiş bileşen başarısız oluyor derleme
• ui-paketlerin dışındaki kaynakları güncellemek yeni bir derlemeyi zorlamaz

ziyaret edin.

Sizin için önerilenler

• Not: JavaScript kapalıyken bağlantı metni gösterilir
• Bileşenleri mevcut kodla eşleme
• İçerik parametreleri
• Oluşturma düzeniyle ilgili temel bilgiler

ziyaret edin.