Trang này được dịch bởi Cloud Translation API.

Ánh xạ các thành phần với mã hiện có

Nhà phát triển có thể tuỳ chỉnh quy trình tạo mã bằng cách cung cấp quy tắc ánh xạ giữa Gói giao diện người dùng và thành phần mã hiện có thay vì mã được tạo. Điều này có lợi khi cách triển khai hiện tại có các tính năng không thể đạt được bằng mã được tạo, chẳng hạn như ảnh động hoặc hành vi phức tạp (như trình đơn thả xuống).

Nhà phát triển dùng tệp ánh xạ để xác định cách ánh xạ các thành phần. Tệp ánh xạ cho trình tạo mã biết cách tiếp cận thành phần kết hợp mục tiêu để có thể tạo mã ứng dụng khách phù hợp.

Tổng quan về thành phần được liên kết
sơ đồ

Dưới đây là ví dụ:

Trong Figma, nhà thiết kế tạo thành phần Card (Thẻ) chứa một thực thể của thành phần Play Bar, đóng gói cả hai thành phần rồi gửi chúng đến một nhà phát triển.

Khi nhà phát triển nhập Gói giao diện người dùng từ Figma, 2 thư mục là được tạo trong ui-packages: card và play_bar. Khi họ xây dựng dự án, 2 hàm có khả năng kết hợp sẽ được tạo: Card và PlayBar. Thông thường, vì Card (Thẻ) chứa một thực thể của Play Bar (Thanh phát) trong Figma, nên trong mã, hàm có khả năng kết hợp Card chứa lệnh gọi đến thành phần kết hợp PlayBar.

Tuy nhiên, nhà thiết kế và nhà phát triển muốn Card sử dụng thành phần kết hợp hiện có là MyExistingPlaybar, nhưng thành phần này lại có chức năng khó mô tả trong Figma. Vì vậy, nhà phát triển thêm một tệp ánh xạ có tên play_bar.json để liên kết Gói giao diện người dùng play_bar với MyExistingPlaybar:

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

Lúc này, khi nhà phát triển xây dựng dự án, Card sẽ gọi MyExistingPlaybar thay vì PlayBar. Hãy lưu ý rằng MyExistingPlaybar phải có cùng tham số với PlayBar (mặc dù có thể có một vài điểm khác biệt, như mô tả trong phần Chỉ dẫn bổ sung dưới đây).

Tệp ánh xạ

Trong các dự án Android Studio, tệp ánh xạ sẽ được thêm bên vào trong ui-package-resources/mappings cạnh thư mục ui-packages. Giao diện Relay để ánh xạ tệp trong quá trình tạo bản dựng.

Tệp ánh xạ trong dự án
lượt xem

Tạo tệp ánh xạ

Relay có thể tạo tệp ánh xạ cho mọi Gói giao diện người dùng đã nhập. Làm theo các bước sau các bước:

Nhấp chuột phải vào thư mục gói hoặc tệp bất kỳ bên trong ui-package đích . Chọn Tạo tệp ánh xạ.
Định cấu hình các tuỳ chọn sau trong hộp thoại:
- File location (Vị trí tệp): Thiết lập vị trí cho tệp ánh xạ đã tạo.
- Thành phần kết hợp mục tiêu: Đặt thành phần kết hợp tuỳ chỉnh được dùng thay thế thay cho thành phần kết hợp đã tạo. Bạn có thể chọn sử dụng thành phần kết hợp hiện có hoặc tạo thành phần kết hợp mới từ hộp thoại. Tạo hồ sơ mới thành phần kết hợp tạo ra một thành phần kết hợp có cùng tham số như được xác định trong Gói giao diện người dùng.
Lưu ý: Thành phần kết hợp mục tiêu phải bắt đầu bằng một chữ cái viết hoa.
- Tệp đã tạo: Đặt generateImplementation và generatePreview trong tệp ánh xạ. Xem phần Ánh xạ nội dung tệp bên dưới để biết thêm chi tiết.
Nhấp vào Tạo tệp ánh xạ. Một tệp ánh xạ mới được tạo bên trong Thư mục ui-package-resources/mapping có các cấu hình được chỉ định.

Bạn cũng có thể mở hộp thoại Tạo tệp ánh xạ từ Relay giao diện người dùng của mô-đun gói theo các bước sau:

Nhấp vào tệp bất kỳ của gói giao diện người dùng bên trong ui-package đích .
Nếu cửa sổ công cụ Chuyển tiếp không tự động mở, hãy nhấp vào biểu tượng Chuyển tiếp để mở cửa sổ đó.
Nhấp vào nút Generate configuration file (Tạo tệp ánh xạ) trong Package Options (Tuỳ chọn gói).

Lưu ý: Nếu có một tệp ánh xạ cho Gói giao diện người dùng đã chọn, một đường liên kết để mở thay vào đó tệp sẽ được hiển thị.

Tên tệp ánh xạ

Tên của một tệp ánh xạ nhất định phải khớp với tên của thư mục Gói giao diện người dùng của thành phần mà tệp đó thay thế. Do đó, play_bar.json sẽ ánh xạ Gói giao diện người dùng trong thư mục ui-packages/mappings đến một thành phần mã hiện có.

Nội dung tệp ánh xạ

Tệp ánh xạ chứa các thuộc tính sau:

target: (Bắt buộc) Tên của hàm có khả năng kết hợp tuỳ chỉnh. Theo mặc định, đây là tên của hàm được tạo bằng mã được tạo.
```
"target" : "CustomComposableName"
```
package: (Bắt buộc) Tên của gói chứa thành phần kết hợp tuỳ chỉnh trong năm Theo mặc định, đây là gói của hàm được tạo bởi .
```
"package" : "com.example.podcastapp.ui.components"
```
generateImplementation: (Không bắt buộc) true hoặc false. Nếu đúng, Phương thức triển khai Gói giao diện người dùng này vẫn được tạo trong mã đã tạo . Nếu giá trị là false, thì quá trình triển khai sẽ không được tạo. Theo mặc định, lựa chọn này là đúng.
```
"generateImplementation" : true
```
generatePreviews: (Không bắt buộc) true hoặc false. Nếu đúng, bản xem trước của thành phần tuỳ chỉnh được liên kết sẽ được tạo trong tệp mã đã tạo. Nếu sai, thì không bản xem trước được tạo. Theo mặc định, lựa chọn này là đúng.
```
"generatePreviews" : true
```

Các biến thể được liên kết

Nếu một thành phần Figma có các biến thể, thì thành phần kết hợp được tạo sẽ chứa enum các thông số mã hoá biến thể (như được mô tả trong phần Thiết kế xử lý Hướng dẫn về biến thể). Nếu bạn muốn liên kết một thành phần Figma có các biến thể với mã hiện có, nó phải được ánh xạ đến một thành phần kết hợp nhận các tham số giống nhau làm thành phần kết hợp đã tạo. Ví dụ: đối với thành phần Figma có tên là Chip (Khối) với một biến thể có thuộc tính là thành phần kết hợp được tạo ChipType, Chip chữ ký trông giống như sau:

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

Nếu bạn muốn thành phần Figma Chip được ánh xạ tới MyChip hiện có thành phần kết hợp thì chữ ký của MyChip phải có cùng chữ ký với thành phần kết hợp được tạo (giả sử không chỉ định lệnh bổ sung nào). Về mặt lý thuyết, điều này cho thấy thành phần mã hiện có có khả năng chứa các biến thể thiết kế giống với thành phần Figma.

Lệnh bổ sung

Ví dụ: nếu hàm có khả năng kết hợp mà bạn muốn nhắm mục tiêu có: chữ ký:

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

Bạn có thể thêm khối fieldMappings vào tệp ánh xạ sẽ ảnh hưởng đến cách các thông số được liên kết. Trong trường hợp này, tệp này chứa một bản đồ ánh xạ từ chipText trong Chip thành tham số description trong MyChip.

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

Khối fieldMappings gồm các loại:

parameter: Liên kết trường Gói giao diện người dùng với một tham số mã.
- source: Tên tham số như được chỉ định trong Gói giao diện người dùng.
- target: Tên tham số như được chỉ định trong thành phần mã mục tiêu.
lambda: Ánh xạ trường Gói giao diện người dùng đến một hàm lambda nội dung.
- source: Tên tham số như được chỉ định trong Gói giao diện người dùng.
- target: Tên tham số như được chỉ định trong thành phần mã mục tiêu.
modifier: Ánh xạ trường Gói giao diện người dùng đến phương thức đối tượng sửa đổi.

Lưu ý: Loại ánh xạ này đang được tiềm năng, đặc biệt là việc xử lý phạm vi nhận.
- source: Tên tham số như được chỉ định trong Gói giao diện người dùng.
- method: Phương thức trên đối tượng Đối tượng sửa đổi cần được gọi trong tạo.
- parameter: Tên tham số trong phương thức Đối tượng sửa đổi đã chỉ định.
- library: Tên gói đủ điều kiện cần nhập để truy cập vào phương thức Đối tượng sửa đổi.
- scope: Một trong hai giá trị để cho biết phạm vi của Đối tượng sửa đổi:
- any: Bạn có thể sử dụng đối tượng sửa đổi trong bất kỳ phạm vi trình thu nhận nào.
- relay: Đối tượng sửa đổi phải được sử dụng trong phạm vi trình thu nhận của Relay Đối tượng RelayContainer.

Đề xuất cho bạn

Lưu ý: văn bản liên kết sẽ hiển thị khi JavaScript là đang tắt * Hỗ trợ khác biệt màn hình kích thước * Lồng ghép gói hàng thực thể * Bản phát hành