Instance paket bertingkat

Paket UI dapat berisi (atau "nest") instance Paket UI lainnya, dengan dukungan untuk konten dinamis dan interaktivitas di setiap level—semuanya diimpor secara otomatis menggunakan plugin Relay for Android Studio.

Menambahkan instance bertingkat dan menampilkan parameter bertingkat

Instance paket dapat ditambahkan seperti biasa menambahkan instance komponen di Figma.

Setelah menambahkan instance paket bertingkat ke sebuah paket, Anda dapat menambahkan konten dan parameter interaksi berdasarkan parameter instance bertingkat, seperti properti lapisan lainnya:

• Pilih lapisan instance paket.
• Klik parameter + tambahkan di UI Relay for Figma.
• Pilih salah satu parameter paket bertingkat.

Parameter atau interaksi yang dipilih diekspos oleh komponen induk, yang membentuk koneksi antara parameter paket bertingkat dan parameter baru yang ditambahkan ke komponen induk. Dalam kode yang dihasilkan, kini Anda dapat memberikan nilai ke induk, yang diteruskan ke instance komponen kode paket bertingkat.

Jika instance bertingkat ada dalam beberapa varian Figma di komponen induk, UI akan mengelompokkan instance varian untuk mengaktifkan konfigurasi individual.

Secara default, parameter instance paket bertingkat tidak diekspos oleh komponen induk. Sebagai gantinya, kode yang dihasilkan menggunakan nilai yang Anda tentukan di Figma, seperti penggantian parameter reguler.

Mari kita lihat contoh ini:

• Paket Chip memiliki satu parameter teks, chip-text.
• Paket Kartu Deskripsi berisi paket Chip. Parameternya adalah:
  • title
  • subchip-text, yang mengekspos parameter chip-text instance Chip
  • sub-icon
  • details

• Paket Kartu Reservasi berisi paket Kartu Deskripsi. Parameternya adalah:

  • hero-image

  • headline, yang mengekspos parameter title instance Kartu Deskripsi.

  • reservation-text, yang mengekspos parameter chip-text instance Kartu Deskripsi.

  • summary, yang mengekspos parameter details instance Kartu Deskripsi.

Perhatikan bahwa sub-icon adalah satu-satunya parameter Kartu Deskripsi yang tidak ditampilkan oleh Kartu Reservasi. Oleh karena itu, setiap instance Kartu Reservasi menggunakan ikon yang disediakan Kartu Deskripsi secara default.

Untuk menampilkan parameter instance komponen bertingkat:

1. Pilih instance Paket UI bertingkat yang memiliki parameter. Anda dapat memilih instance di kanvas secara langsung atau di plugin Relay for Figma di bagian Relay instances.

2. Klik + di samping Parameter. Menu menunjukkan parameter dari instance yang dipilih. Pilih parameter.

   Ini akan menampilkan parameter dari instance bertingkat. Dalam contoh ini, kita telah memilih instance Kartu Deskripsi dan mengekspos parameter details.

   

3. Di panel sebelah kanan plugin Relay for Figma, Anda dapat memilih parameter yang berbeda, atau mengganti nama parameter untuk mengubah cara pemanggilannya dalam kode yang dihasilkan. Dalam contoh ini, parameter diganti namanya menjadi summary, yang masih merujuk ke parameter details dari instance bertingkat kami.

   

Saat Anda mengimpor komponen induk (dalam hal ini, Kartu Reservasi) ke Android Studio, semua paket bertingkat akan otomatis diimpor (dalam hal ini, Kartu Deskripsi dan Chip). Saat kode dibuat, setiap paket menghasilkan fungsi composable.

Kode yang dihasilkan untuk contoh terlihat seperti berikut:

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

Mengganti properti instance paket bertingkat

Jika Anda mengganti nilai properti instance bertingkat di Figma, nilai baru hanya diterjemahkan dalam kode Compose jika komponen bertingkat telah menambahkan parameter untuk properti tersebut. Jika tidak, nilai baru akan dihapus, dan nilai asli dalam komponen bertingkat akan digunakan dalam kode.

Mari kita ambil contoh ini. Komponen Kartu Deskripsi memiliki instance komponen Chip. Kami telah menambahkan penggantian ke instance Chip dengan mengubah teks dari "Chip Text" menjadi "Reservasi Diperlukan":

Jika Chip tidak memiliki parameter untuk teksnya, dalam kode yang dihasilkan, chip Kartu Deskripsi tetap menampilkan "Chip Text", bukan "Reservasi diperlukan".

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

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

Jika Chip memiliki parameter untuk teksnya, misalnya chip-text, dalam kode yang dihasilkan, DescriptionCard akan memanggil Chip dengan "Reservasi Diperlukan" sebagai nilai parameter chipText:

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

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

Jika Description Card mengekspos parameter Chip-text Chip sebagai subchip-text, maka dalam kode yang dihasilkan, DescriptionCard memiliki parameter subchipText dan memanggil Chip dengan subchipText sebagai nilai parameter chipText:

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

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

Selain itu, setelah "Reservasi Diperlukan" adalah nilai parameter, parameter ini hanya akan muncul dalam kode yang dihasilkan di pratinjau DescriptionCard.

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

Batasan

• Komponen bertingkat dengan properti varian yang sama seperti komponen induk gagal dikompilasi
• Mengupdate resource di luar ui-package tidak akan memaksakan build baru