Nút bật tắ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 →

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

Trong Jetpack Compose Glimmer, ToggleButton là một thành phần tương tác thay đổi giao diện dựa trên trạng thái đã đánh dấu. Các nút bật tắt được tối ưu hoá cho kính hiển thị để mang đến các hiệu ứng chuyển đổi hình ảnh rõ ràng về hình dạng và màu sắc. Các hiệu ứng chuyển đổi này cho biết thời điểm một thao tác hoặc chế độ cài đặt đang hoạt động.

Sử dụng nút bật/tắt để hiển thị những thao tác có thể bật hoặc tắt. Không giống như nút bật/tắt chỉ có biểu tượng, nút bật/tắt chủ yếu hiển thị nội dung văn bản, mặc dù nút này hỗ trợ các vị trí biểu tượng không bắt buộc để có thêm ngữ cảnh.

Đối với các trường hợp sử dụng khác, cũng có các nút tiêu chuẩn và các nút biểu tượng.

Phân tích

Nút bật/tắt bao gồm một vùng chứa biến đổi giữa các trạng thái và một nhãn có biểu tượng không bắt buộc.

Kích thước

Giống như nút tiêu chuẩn, nút bật tắt hỗ trợ 2 biến thể kích thước:

Nút bật tắt mặc định

Theo mặc định, các nút bật/tắt sẽ dùng ToggleButtonDefaults.animateShape. Điều này tạo ra một hiệu ứng chuyển đổi mượt mà giữa các trạng thái sau:

• Chưa đánh dấu: GlimmerTheme.shapes.large (thường là CircleShape).
• Đã kiểm tra: ToggleButtonDefaults.CheckedShape (RoundedCornerShape có 20.dp góc).

Lớp ToggleButtonColors quản lý độ phân giải màu cho các trạng thái sau:

• Chưa đánh dấu: Mặc định là GlimmerTheme.colors.surface.
• Đã đánh dấu: Mặc định là GlimmerTheme.colors.surface.

Ảnh động

Các nút bật/tắt sử dụng các giá trị mặc định sau cho ảnh động:

• animateShape: Cung cấp một Shape nội suy kích thước góc bằng cách sử dụng thông số kỹ thuật của ảnh động lò xo (stiffness = 600f).
• colors: Một hàm tạo để tuỳ chỉnh màu nền và màu nội dung cho cả hai trạng thái.
• CheckedShape: Một RoundedCornerShape(20.dp) tĩnh dùng cho trạng thái đã đánh dấu.
• contentPadding: Kế thừa từ ButtonDefaults.contentPadding.

Ví dụ: Nút bật tắt

Đoạn mã sau đây tạo một nút bật/tắt cơ bản:

@Composable
fun ToggleButtonSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(checked = checked, onCheckedChange = { checked = it }) { Text(text) }
}
ToggleButtonSamples.kt

Ví dụ: Nút bật/tắt có biểu tượng ở đầu

Đoạn mã sau đây tạo một nút bật/tắt có biểu tượng ở đầu:

@Composable
fun ToggleButtonWithLeadingIconSample() {
    var checked by remember { mutableStateOf(false) }
    val text = if (checked) "Toggle on" else "Toggle off"
    ToggleButton(
        checked = checked,
        leadingIcon = {
            Icon(if (checked) FavoriteIcon else OutlinedFavoriteIcon, "Localized description")
        },
        onCheckedChange = { checked = it },
    ) {
        Text(text)
    }
}
ToggleButtonSamples.kt