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 kèm theo sự hỗ trợ cho nội dung động và tính tương tác ở mỗi cấp độ — tất cả được nhập tự động bằng cách sử dụng trình bổ trợ Relay for Android Studio (Chuyển tiếp cho 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ể của 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à tương tác dựa trên các tham số thực thể lồng nhau, giống như 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 tham số gói được lồng.

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ẹ. Trong mã đã tạo, bây giờ bạn có thể cung cấp được truyền đến một thực thể của hàm lồng nhau thành phần mã của gói.

Nếu thực thể được lồng xuất hiện trong nhiều biến thể Figma trong phần tử mẹ nên các phiên bản biến thể giao diện người dùng sẽ nhóm các thực thể biến thể để bật cấu hình riêng lẻ.

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ể Chip)
  • 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ị title của thực thể Thẻ mô tả) .

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

  • summary (hiển thị 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 phiên bản Description Card (Thẻ mô tả) và hiển thị thông tin chi tiết .

   

3. Trong ngăn ở bên phải của trình bổ trợ Relay for Figma (Chuyển tiếp 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ố mã đã tạo. Trong ví dụ này, tham số được đổi tên thành summary, vẫn đề cập đến tham số details từ các mục được lồng thực thể.

   

Khi bạn nhập một thành phần mẹ (trong trường hợp này là Thẻ đặt trước) vào Android Studio, tất cả các gói lồng nhau sẽ được nhập tự động (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 một thuộc tính thực thể lồng nhau trong Figma, thì giá trị mới chỉ được dịch trong mã Compose nếu thành phần lồng nhau đã thêm một tham số cho tài sản đó. 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ụ sau. 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 cơ chế ghi đè vào thực thể Khối bằng cách thay đổi văn bản trong "Khối văn bản" thành "Yêu cầu đặt trước":

Nếu Khối không có tham số cho văn bản thì trong mã được tạo, giá trị Khối Thẻ mô tả vẫn hiển thị "Khối văn bản", chứ không phải là "Yêu cầu đặt 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ư chip-text, thì trong mã được tạo, DescriptionCard sẽ gọi Chip với "Đặt trước yêu cầu" dưới dạng giá trị của thông 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ả) cho thấy tham số Chip-text của khối dưới dạng subchip-text, thì trong mã được tạo, DescriptionCard có một subchipText và gọi Chip với subchipText là giá trị của chipText tham số:

@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, "Yêu cầu đặt trước" là giá trị của một tham số chỉ hiển thị trong mã được tạo trong 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 lồng nhau có các thuộc tính biến thể giống như thành phần mẹ không thể biên dịch
• 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