Halaman ini diterjemahkan oleh Cloud Translation API.

Memetakan komponen ke kode yang ada

Developer dapat menyesuaikan proses pembuatan kode dengan menyediakan pemetaan antara Paket UI dan komponen kode yang sudah ada, bukan kode yang dihasilkan. Hal ini bermanfaat jika implementasi yang sudah ada memiliki fitur yang tidak dapat dicapai oleh kode yang dihasilkan seperti animasi atau perilaku kompleks (seperti menu drop-down).

Developer menentukan cara memetakan komponen menggunakan file pemetaan. File pemetaan memberi tahu generator kode, setidaknya, cara menjangkau composable target {i>function<i} sehingga kode klien yang tepat dapat dibuat.

Ringkasan komponen yang dipetakan
diagram

Berikut ini contohnya:

Di Figma, desainer membuat komponen Kartu yang berisi instance komponen Play Bar, mengemas kedua komponen, dan mengirimkannya ke developer.

Ketika developer mengimpor Paket UI dari Figma, dua direktori dibuat di ui-packages: card dan play_bar. Saat mem-build project, dua fungsi composable akan dibuat: Card dan PlayBar. Biasanya, karena Kartu berisi instance Play Bar di Figma, dalam kode fungsi composable Card berisi panggilan ke composable PlayBar.

Namun, desainer dan developer ingin Card menggunakan composable yang sudah ada, MyExistingPlaybar, yang memiliki fungsi yang sulit dijelaskan di Figma. Jadi developer menambahkan file pemetaan bernama play_bar.json yang memetakan Paket UI play_bar ke MyExistingPlaybar:

{
    "target": "MyExistingPlaybar",
    "package": "com.example.myApp"
}

Sekarang, saat developer mem-build project, Card memanggil MyExistingPlaybar, bukan PlayBar. Perhatikan bahwa MyExistingPlaybar harus memiliki parameter yang sama dengan PlayBar (meskipun mungkin ada beberapa perbedaan, seperti yang dijelaskan dalam Perintah Tambahan di bawah).

File pemetaan

Dalam project Android Studio, file pemetaan ditambahkan di bagian ui-package-resources/mappings di samping folder ui-packages. Tampilan Relay untuk memetakan file selama build.

File pemetaan dalam project
kali dilihat

Membuat file pemetaan

Relay dapat membuat file pemetaan untuk setiap Paket UI yang diimpor. Ikuti ini langkah:

Klik kanan folder paket atau file apa pun di dalam ui-package target folder tersebut. Pilih Generate mapping file.
Konfigurasikan opsi berikut dalam dialog:
- Lokasi file: Menetapkan lokasi untuk file pemetaan yang dihasilkan.
- Composable target: Menetapkan composable kustom yang digunakan sebagai gantinya sebagai pengganti composable yang dihasilkan. Anda memiliki opsi untuk menggunakan composable yang ada atau membuat yang baru dari dialog. Membuat composable membuat composable dengan parameter yang sama seperti yang ditentukan dalam paket UI.
Catatan: Composable target harus diawali dengan huruf kapital.
- File yang dihasilkan: Menetapkan generateImplementation dan Opsi generatePreview dalam file pemetaan. Lihat Memetakan konten file di bawah untuk detail selengkapnya.
Klik Generate mapping file. File pemetaan baru dibuat di dalam Folder ui-package-resources/mapping dengan konfigurasi yang ditentukan.

Anda juga dapat membuka dialog Generate mapping file dari Relay UI modul paket menggunakan langkah-langkah berikut:

Klik file apa pun untuk paket UI di dalam ui-package target folder tersebut.
Jika jendela alat Relay tidak terbuka secara otomatis, klik ikon Relay untuk membuka jendela.
Klik tombol Generate mapping file di bagian Package Options.

Catatan: Jika ada file pemetaan untuk Paket UI yang dipilih, link untuk membuka file akan ditampilkan.

Nama file pemetaan

Nama file pemetaan yang diberikan harus cocok dengan nama folder Paket UI untuk komponen yang diganti. Jadi, play_bar.json memetakan Paket UI di folder ui-packages/mappings ke komponen kode yang sudah ada.

Memetakan konten file

File pemetaan berisi properti berikut:

target: (Wajib) Nama fungsi composable kustom. Menurut secara {i>default<i}, ini adalah nama fungsi yang dibuat oleh kode yang dihasilkan.
```
"target" : "CustomComposableName"
```
package: (Wajib) Nama paket tempat composable kustom Anda berada inc. Secara default, ini adalah paket fungsi yang dibuat oleh pada kode sumber.
```
"package" : "com.example.podcastapp.ui.components"
```
generateImplementation: (Opsional) benar atau salah. Jika benar, implementasi Paket UI ini masih dibuat dalam kode yang dihasilkan . Jika salah, implementasi tidak dibuat. Secara default, ini bernilai benar (true).
```
"generateImplementation" : true
```
generatePreviews: (Opsional) benar atau salah. Jika true (benar), pratinjau komponen kustom yang dipetakan dibuat di file kode yang dihasilkan. Jika false, tidak pratinjau dibuat. Secara default, ini bernilai benar (true).
```
"generatePreviews" : true
```

Varian yang dipetakan

Jika komponen Figma memiliki varian, maka composable yang dihasilkan akan berisi enum parameter yang mengenkode varian (seperti yang dijelaskan dalam bagian Menangani Desain Variants). Jika Anda ingin memetakan komponen Figma dengan varian ke dari kode yang ada, kode harus dipetakan ke composable yang menggunakan parameter yang sama sebagai composable yang dihasilkan. Misalnya, untuk komponen Figma bernama Chip dengan varian yang propertinya adalah composable yang dihasilkan ChipType, Chip tanda tangan akan terlihat seperti ini:

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

Jika Anda ingin memetakan komponen Figma Chip ke MyChip yang ada maka tanda tangan untuk MyChip harus memiliki tanda tangan yang sama dengan composable yang dihasilkan (dengan asumsi tidak ada perintah tambahan yang ditentukan). Secara konseptual, ini menunjukkan bahwa komponen kode yang ada dapat memiliki varian desain yang sama seperti komponen Figma.

Perintah tambahan

Misalnya, jika fungsi composable yang ingin Anda targetkan memiliki hal berikut tanda tangan:

@Composable
fun MyChip(
    modifier: Modifier = Modifier,
    chipType: ChipType = ChipType.Red,
    description: String  // instead of chipText
) { ... }

Anda dapat menambahkan blok fieldMappings ke file pemetaan yang memengaruhi cara parameter akan dipetakan. Dalam hal ini, file tersebut berisi pemetaan dari chipText di Chip ke parameter description di MyChip.

{
    "target": "MyChip",
    "package": "com.example.myApp",
    "fieldMappings": [
        {
            "type": "parameter",
            "source": "chipText",
            "target": "description"
        }
    ]
}

Jenis untuk blok fieldMappings mencakup:

parameter: Memetakan kolom Paket UI ke parameter kode.
- source: Nama parameter seperti yang ditentukan dalam Paket UI.
- target: Nama parameter seperti yang ditentukan dalam komponen kode target.
lambda: Memetakan kolom Paket UI ke lambda konten.
- source: Nama parameter seperti yang ditentukan dalam Paket UI.
- target: Nama parameter seperti yang ditentukan dalam komponen kode target.
modifier: Memetakan kolom Paket UI ke metode pengubah.

Catatan: Jenis pemetaan ini sedang diinkubasi, khususnya penanganan cakupan penerima.
- source: Nama parameter seperti yang ditentukan dalam Paket UI.
- method: Metode pada objek Pengubah yang harus dipanggil kode yang dihasilkan.
- parameter: Nama parameter dalam metode Pengubah yang ditentukan.
- library: Nama paket yang memenuhi syarat untuk diimpor guna mengakses metode Pengubah.
- scope: Salah satu dari dua nilai untuk menunjukkan cakupan Pengubah:
- any: Pengubah dapat digunakan dalam semua cakupan penerima.
- relay: Pengubah harus digunakan dalam cakupan penerima Relay Objek RelayContainer.

Direkomendasikan untuk Anda

Catatan: teks link ditampilkan saat JavaScript bernilai nonaktif * Dukungan berbeda layar ukuran * Bertingkat paket instance * Rilis