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 nhất, tệp ánh xạ sẽ cho trình tạo mã biết cách tiếp cận hàm có khả năng kết hợp mục tiêu để có thể tạo đúng mã ứng dụng khách.

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

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

Trong Figma, một nhà thiết kế sẽ tạo một thành phần Thẻ chứa thực thể của thành phần Thanh Play, đóng gói cả hai thành phần và gửi cho nhà phát triển.

Khi nhà phát triển nhập các Gói giao diện người dùng từ Figma, 2 thư mục sẽ đượ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. Do đó, nhà phát triển sẽ thêm một tệp ánh xạ có tên là play_bar.json để ánh xạ Gói giao diện người dùng play_bar đến 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. Relay tìm các tệp ánh xạ trong quá trình xây dựng.

Tệp ánh xạ trong khung hiển thị dự án

Tạo tệp ánh xạ

Relay có thể tạo một tệp ánh xạ cho bất kỳ Gói giao diện người dùng nào đã nhập. Hãy làm theo các bước sau:

Nhấp chuột phải vào thư mục gói hoặc tệp bất kỳ bên trong thư mục 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.
- Target Asset (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 cho thành phần kết hợp đã tạo. Bạn có thể sử dụng thành phần kết hợp hiện có hoặc tạo một thành phần mới từ hộp thoại. Việc tạo một thành phần kết hợp mới sẽ tạo ra một thành phần kết hợp có các tham số giống 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.
- Generated file (Tệp đã tạo): Đặt các tuỳ chọn generateImplementation và generatePreview trong tệp ánh xạ. Hãy xem phần Liên kết nội dung tệp bên dưới để biết thêm thông tin chi tiết.
Nhấp vào Tạo tệp ánh xạ. Một tệp ánh xạ mới sẽ được tạo bên trong thư mục ui-package-resources/mapping với các cấu hình đã chỉ định.

Bạn cũng có thể mở hộp thoại Generate ánh xạ tệp (Tạo tệp ánh xạ) trên giao diện người dùng mô-đun gói Relay 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 thư mục ui-package đích.
Nếu cửa sổ công cụ Relay không tự động mở, hãy nhấp vào biểu tượng Relay để mở cửa sổ.
Nhấp vào nút Generate Mapping file (Tạo tệp ánh xạ) trong phần Package Options (Tuỳ chọn gói).

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

Tên tệp liên kết

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ó.

Ánh xạ nội dung tệp

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

Biến thể đã 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 các tham số enum mã hoá biến thể đó (như mô tả trong hướng dẫn Xử lý biến thể thiết kế). Nếu 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ó, thì bạn phải ánh xạ thành phần đó với một thành phần kết hợp có cùng tham số với thành phần kết hợp được tạo. Ví dụ: đối với thành phần Figma có tên Chip với một biến thể có thuộc tính là ChipType, chữ ký thành phần kết hợp được tạo của Chip sẽ có dạ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 Chip Figma ánh xạ đến thành phần kết hợp MyChip hiện có, thì chữ ký cho MyChip phải có cùng chữ ký với thành phần kết hợp đã tạo (giả sử không có lệnh bổ sung nào được chỉ định). 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 bạn muốn nhắm đến có chữ ký sau:

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

Bạn có thể thêm một khối fieldMappings vào tệp ánh xạ ảnh hưởng đến cách ánh xạ các tham số. Trong trường hợp này, thành phần này chứa một mục ánh xạ từ tham số chipText trong Chip đến 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: Ánh xạ trường Gói giao diện người dùng đến 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 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 ủ, đặc biệt là việc xử lý phạm vi bộ thu.
- 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 mã đã 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: Bạn phải sử dụng đối tượng sửa đổi trong phạm vi trình thu nhận của đối tượng RelayContainer của Relay.

Đề xuất cho bạn

Lưu ý: văn bản liên kết sẽ hiển thị khi JavaScript tắt * Tạo bố cục thích ứng * Các phiên bản gói lồng * Bản phát hành