Tham số con

Bất kỳ lớp (layer) khung, nhóm hoặc thành phần nào trong Figma đều có thể được chú thích bằng một tham số nội dung để cho biết rằng các thành phần con của lớp đó là động. Những lớp này có thể được dùng để thiết kế các thành phần của vùng chứa hoặc tạo các ô trong thiết kế mà trong đó các thành phần tuỳ chỉnh có thể được chèn vào bằng mã xử lý ứng dụng.

Để thêm một tham số con vào khung hoặc nhóm, hãy chọn lớp trong Figma rồi nhấp vào nút + bên cạnh "Parameters" (Tham số), sau đó chọn children trong trình đơn.

Sau khi nhập Gói giao diện người dùng vào Android Studio, tham số sẽ xuất hiện trong chữ ký hàm @Composable đã tạo thuộc loại @Composable RelayContainerScope.() -> Unit (trong trường hợp này có tên là customGraphic).

@Composable
fun HelloCardWithCustomChild(
    modifier: Modifier = Modifier,
    customGraphic: @Composable RelayContainerScope.() -> Unit
) {
    TopLevel(modifier = modifier) {
        Image()
        CustomGraphic { customGraphic() }
        Title()
    }
}

Trong hàm @Preview, thiết kế của tệp Figma được dùng để lấp đầy ô (trong trường hợp này, tham số customGraphic sẽ được đặt).

@Preview(widthDp = 248, heightDp = 265)
@Composable
private fun HelloCardWithCustomChildPreview() {
    MaterialTheme {
        HelloCardWithCustomChild(
            customGraphic = {
                RelayText(
                    content = "Label",
                    fontSize = 16.0.sp,
                    fontFamily = montserrat,
                    color = Color(
                       alpha = 255,
                       red = 0,
                       green = 0,
                       blue = 0
                    ),
                    textAlign = TextAlign.Left,
                    fontWeight = FontWeight(500.0.toInt())
                )
                RelayImage(
                    image = painterResource(
                       R.drawable.hello_card_with_custom_child_custom_graphic_still
                    ),
                    contentScale = ContentScale.Crop,
                    modifier =
                       Modifier.requiredWidth(132.0.dp).requiredHeight(48.0.dp)
                )
            }
        )
    }
}

Việc thêm tham số con vào một lớp cũng ảnh hưởng đến lớp theo những cách sau:

• Mọi tham số Relay (Chuyển tiếp) được thêm vào lớp trước đó không hiển thị trong giao diện người dùng trình bổ trợ Figma và không có trong mã đã tạo.
• Trong mã đã tạo, nội dung của lớp không còn hiển thị theo mặc định. Nội dung đó sẽ chỉ trở thành nội dung của thành phần kết hợp tương ứng trong bản xem trước. Để thành phần kết hợp có nội dung bất kỳ, nhà phát triển phải viết mã để chuyển nội dung vào tham số con.