Các thực thể của gói được lồng

Gói giao diện người dùng có thể chứa (hoặc "lồng") thực thể của các Gói giao diện người dùng khác, với khả năng hỗ trợ nội dung động và khả năng tương tác ở mỗi cấp – tất cả được nhập tự động bằng trình bổ trợ Relay for Android Studio.

Thêm thực thể được lồng và hiển thị tham số được lồng

Bạn có thể thêm các thực thể gói như cách bạn thường thêm các thực thể thành phần trong Figma.

Sau khi thêm một thực thể của gói được lồng vào một gói, bạn có thể thêm nội dung và tham số tương tác dựa trên các tham số của thực thể được lồng, giống như các thuộc tính của bất kỳ lớp nào khác:

• Chọn lớp thực thể trong gói.
• Nhấp vào dấu + để thêm tham số trong giao diện người dùng Relay for Figma (Relay cho Figma).
• Chọn một trong các thông số gói lồng nhau.

Tham số hoặc lượt tương tác đã chọn được thành phần mẹ hiển thị, tạo thành kết nối giữa tham số của gói được lồng và một tham số mới được thêm vào thành phần mẹ. Giờ đây, trong mã đã tạo, bạn có thể cung cấp một giá trị cho thành phần mẹ. Giá trị này được truyền qua một thực thể của thành phần mã trong gói lồng ghép.

Nếu thực thể được lồng có trong nhiều biến thể Figma trong thành phần mẹ, thì giao diện người dùng sẽ nhóm các thực thể biến thể để bật từng cấu hình.

Theo mặc định, các tham số thực thể của gói được lồng sẽ không được thành phần mẹ hiển thị. Thay vào đó, mã được tạo sẽ sử dụng giá trị mà bạn chỉ định trong Figma, giống như cách ghi đè tham số thông thường.

Hãy xem ví dụ sau:

• Gói Chip (Khối) có một tham số văn bản là chip-text.
• Gói Description Card (Thẻ mô tả) chứa gói Khối. Các tham số của gói này là:
  • title
  • subchip-text (hiển thị tham số chip-text của thực thể Khối)
  • sub-icon
  • details

• Gói Reservation Card (Thẻ đặt trước) chứa gói Thẻ mô tả. Các tham số của gói này là:

  • hero-image

  • headline (hiển thị tham số title của thực thể Thẻ mô tả).

  • reservation-text (hiển thị tham số chip-text của thực thể Thẻ mô tả).

  • summary (hiển thị tham số details của thực thể Thẻ mô tả).

Xin lưu ý rằng sub-icon là tham số duy nhất của Thẻ mô tả mà Thẻ đặt trước không hiển thị. Do đó, mọi thực thể của Thẻ đặt trước đều sử dụng biểu tượng mà Thẻ mô tả cung cấp theo mặc định.

Để hiển thị tham số của một thực thể thành phần được lồng, hãy làm như sau:

1. Chọn một thực thể được lồng của một Gói giao diện người dùng có các tham số. Bạn có thể chọn trực tiếp thực thể đó trong canvas hoặc trong trình bổ trợ Relay cho Figma trong mục Relay instances (Thực thể Relay).

2. Nhấp vào dấu + bên cạnh Parameters (Tham số). Trình đơn này hiển thị các tham số từ thực thể đã chọn. Chọn một tham số.

   Thao tác này sẽ hiển thị một tham số của thực thể được lồng. Trong ví dụ này, chúng tôi đã chọn thực thể Description Card (Thẻ mô tả) và hiển thị thông số details (chi tiết).

   

3. Trong ngăn ở bên phải của trình bổ trợ Relay for Figma (Relay cho Figma), bạn có thể chọn một tham số khác hoặc đổi tên tham số để thay đổi cách gọi tham số đó trong mã được tạo. Trong ví dụ này, tham số này được đổi tên thành summary (tóm tắt), vẫn tham chiếu đến tham số details (chi tiết) từ thực thể lồng nhau của chúng ta.

   

Khi bạn nhập một thành phần mẹ (trong trường hợp này là Gói đặt trước) vào Android Studio, tất cả các gói được lồng sẽ tự động được nhập (trong trường hợp này là Thẻ mô tả và Khối). Khi mã được tạo, mỗi gói sẽ tạo hàm có khả năng kết hợp riêng.

Mã được tạo cho ví dụ này có dạng như sau:

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

Ghi đè các thuộc tính của thực thể gói được lồng

Nếu bạn ghi đè giá trị của thuộc tính thực thể được lồng trong Figma, thì giá trị mới chỉ được dịch trong mã Compose nếu thành phần được lồng đã thêm một tham số cho thuộc tính đó. Nếu không, giá trị mới sẽ bị loại bỏ và giá trị ban đầu trong thành phần lồng nhau sẽ được dùng trong mã.

Hãy xem ví dụ này. Thành phần Description Card (Thẻ mô tả) có một thực thể thành phần Chip (Khối). Chúng tôi thêm một cơ chế ghi đè vào thực thể Chip (Khối) bằng cách thay đổi văn bản từ "Chip Text" (Văn bản khối) thành "Subscription Required" (Yêu cầu đặt trước):

Nếu Chip (Khối) không có tham số cho văn bản, thì trong mã được tạo, khối Description Card (Thẻ mô tả) vẫn hiển thị là "Chip Text" (Văn bản khối) chứ không phải " Ví dụ về Đặt chỗ trước".

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

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

Nếu Chip có tham số cho văn bản, chẳng hạn như văn bản khối, thì trong mã được tạo, DescriptionCard sẽ gọi Chip với "Yêu cầu đặt trước" là giá trị của tham số chipText:

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

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

Nếu Description Card (Thẻ mô tả) hiển thị tham số Chip's chip-text (văn bản khối của Chip) dưới dạng văn bản con, thì trong mã được tạo, DescriptionCard có một tham số subchipText và gọi Chip với subchipText là giá trị của tham số chipText:

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

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

Hơn nữa, giờ đây, "Sub Required" (Yêu cầu đặt trước) là giá trị của một tham số, và nó chỉ hiển thị trong mã được tạo ở bản xem trước của DescriptionCard.

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

Các điểm hạn chế

• Thành phần được lồng có các thuộc tính biến thể giống như thành phần mẹ không biên dịch được
• Việc cập nhật tài nguyên bên ngoài gói giao diện người dùng không buộc tạo bản dựng mới