Các nút trong Jetpack Compose Glimmer

Các thiết bị XR được hỗ trợ

Hướng dẫn này giúp bạn xây dựng các trải nghiệm cho những loại thiết bị XR sau.

Tìm hiểu về các loại thiết bị XR →

Kính AI

Tìm hiểu về các loại thiết bị XR →

Trong Jetpack Compose Glimmer, thành phần Button là một thành phần tương tác được tối ưu hoá cho dữ liệu đầu vào của kính AI, mang đến phản hồi rõ ràng bằng hình ảnh cho các trạng thái chưa lấy nét, đã lấy nét và được nhấn để hướng dẫn hành động của người dùng.

Hình 1. Ví dụ về một số kiểu nút trong Jetpack Compose Glimmer.

Ví dụ: Các biến thể của nút

@Composable
fun GlimmerButtonExample() {
    Column(
        verticalArrangement = Arrangement.spacedBy(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier.fillMaxWidth()
    ) {
        // Basic Button
        Button(onClick = { /* Do something */ }) {
            Text("Test Button 1")
        }

        // Button with a leading icon
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 2")
        }

        // Button with leading and trailing icons
        Button(
            onClick = { /* Do something */ },
            leadingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            },
            trailingIcon = {
                Icon(
                    painter = painterResource(id = R.drawable.ic_favorite),
                    contentDescription = "Favorite icon"
                )
            }
        ) {
            Text("Test Button 3")
        }
    }
}

Các điểm chính về mã

• Các biểu tượng nút có nguồn là vectơ vẽ được XML cục bộ (R.drawable.ic_favorite) bằng painterResource, thay thế phần phụ thuộc thư viện Icons.Default để tối ưu hoá việc tải thành phần.
• Các tham số leadingIcon và trailingIcon được dùng để chèn các thành phần kết hợp biểu tượng vào bố cục nút, minh hoạ khả năng hỗ trợ định vị biểu tượng linh hoạt của Jetpack Compose Glimmer.
• Các nút này sử dụng cấu hình kích thước mặc định, tự động quản lý khoảng đệm bên trong và việc chuyển tỉ lệ văn bản để căn chỉnh với các quy cách thiết kế Glimmer tiêu chuẩn của Jetpack Compose mà không cần các đối tượng sửa đổi kích thước rõ ràng.