Các nút trong Jetpack Compose Glimmer

Các thiết bị XR áp dụng
Hướng dẫn này giúp bạn tạo trải nghiệm cho các loại thiết bị XR này.
Tìm hiểu về các loại thiết bị thực tế mở rộng (XR) →
Kính AI
Tìm hiểu về các loại thiết bị thực tế mở rộng (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 đã bật, di chuột và 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 mở rộng văn bản để phù hợp 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.