Hộp thoại cho bộ chọn giờ

Bộ chọn thời gian thường xuất hiện trong hộp thoại. Bạn có thể sử dụng một cách triển khai tương đối chung chung và tối giản của hộp thoại, hoặc có thể triển khai một hộp thoại tuỳ chỉnh linh hoạt hơn.

Để biết thêm thông tin về hộp thoại nói chung, bao gồm cả cách sử dụng trạng thái bộ chọn thời gian, hãy xem Hướng dẫn về bộ chọn thời gian.

Ví dụ cơ bản

Cách đơn giản nhất để tạo hộp thoại cho bộ chọn thời gian là tạo một composable triển khai AlertDialog. Đoạn mã sau đây là ví dụ về một hộp thoại tương đối tối giản sử dụng phương pháp này:

@Composable
fun DialWithDialogExample(
    onConfirm: (TimePickerState) -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    TimePickerDialog(
        onDismiss = { onDismiss() },
        onConfirm = { onConfirm(timePickerState) }
    ) {
        TimePicker(
            state = timePickerState,
        )
    }
}

@Composable
fun TimePickerDialog(
    onDismiss: () -> Unit,
    onConfirm: () -> Unit,
    content: @Composable () -> Unit
) {
    AlertDialog(
        onDismissRequest = onDismiss,
        dismissButton = {
            TextButton(onClick = { onDismiss() }) {
                Text("Dismiss")
            }
        },
        confirmButton = {
            TextButton(onClick = { onConfirm() }) {
                Text("OK")
            }
        },
        text = { content() }
    )
}
TimePickers.kt

Lưu ý các điểm chính trong đoạn mã này:

1. Thành phần kết hợp DialWithDialogExample gói TimePicker trong một hộp thoại.
2. TimePickerDialog là một composable tuỳ chỉnh tạo ra AlertDialog có các tham số sau:
   • onDismiss: Hàm được gọi khi người dùng đóng hộp thoại (thông qua nút đóng hoặc nút quay lại).
   • onConfirm: Hàm được gọi khi người dùng nhấp vào nút "OK".
   • content: Một composable hiển thị bộ chọn giờ trong hộp thoại.
3. AlertDialog bao gồm:
   • Nút đóng có nhãn "Đóng".
   • Nút xác nhận có nhãn "OK".
   • Nội dung của bộ chọn thời gian được truyền dưới dạng tham số text.
4. DialWithDialogExample khởi chạy TimePickerState bằng thời gian hiện tại và truyền thời gian đó đến cả hàm TimePicker và onConfirm.

Hình 1. Bộ chọn giờ trong AlertDialog.

Ví dụ nâng cao

Đoạn mã này minh hoạ cách triển khai nâng cao hộp thoại bộ chọn thời gian có thể tuỳ chỉnh trong Jetpack Compose.

@Composable
fun AdvancedTimePickerExample(
    onConfirm: (TimePickerState) -> Unit,
    onDismiss: () -> Unit,
) {

    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    /** Determines whether the time picker is dial or input */
    var showDial by remember { mutableStateOf(true) }

    /** The icon used for the icon button that switches from dial to input */
    val toggleIcon = if (showDial) {
        Icons.Filled.EditCalendar
    } else {
        Icons.Filled.AccessTime
    }

    AdvancedTimePickerDialog(
        onDismiss = { onDismiss() },
        onConfirm = { onConfirm(timePickerState) },
        toggle = {
            IconButton(onClick = { showDial = !showDial }) {
                Icon(
                    imageVector = toggleIcon,
                    contentDescription = "Time picker type toggle",
                )
            }
        },
    ) {
        if (showDial) {
            TimePicker(
                state = timePickerState,
            )
        } else {
            TimeInput(
                state = timePickerState,
            )
        }
    }
}

@Composable
fun AdvancedTimePickerDialog(
    title: String = "Select Time",
    onDismiss: () -> Unit,
    onConfirm: () -> Unit,
    toggle: @Composable () -> Unit = {},
    content: @Composable () -> Unit,
) {
    Dialog(
        onDismissRequest = onDismiss,
        properties = DialogProperties(usePlatformDefaultWidth = false),
    ) {
        Surface(
            shape = MaterialTheme.shapes.extraLarge,
            tonalElevation = 6.dp,
            modifier =
            Modifier
                .width(IntrinsicSize.Min)
                .height(IntrinsicSize.Min)
                .background(
                    shape = MaterialTheme.shapes.extraLarge,
                    color = MaterialTheme.colorScheme.surface
                ),
        ) {
            Column(
                modifier = Modifier.padding(24.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 20.dp),
                    text = title,
                    style = MaterialTheme.typography.labelMedium
                )
                content()
                Row(
                    modifier = Modifier
                        .height(40.dp)
                        .fillMaxWidth()
                ) {
                    toggle()
                    Spacer(modifier = Modifier.weight(1f))
                    TextButton(onClick = onDismiss) { Text("Cancel") }
                    TextButton(onClick = onConfirm) { Text("OK") }
                }
            }
        }
    }
}
TimePickers.kt

Lưu ý các điểm chính trong đoạn mã này:

1. Thành phần kết hợp AdvancedTimePickerExample tạo một hộp thoại bộ chọn thời gian có thể tuỳ chỉnh.
2. Thành phần này sử dụng thành phần kết hợp Dialog để linh hoạt hơn AlertDialog.
3. Hộp thoại này bao gồm một tiêu đề có thể tuỳ chỉnh và một nút bật/tắt để chuyển đổi giữa chế độ quay số và chế độ nhập.
4. Surface áp dụng hình dạng và độ cao cho hộp thoại, với IntrinsicSize.Min cho cả chiều rộng và chiều cao.
5. Bố cục Column và Row cung cấp các thành phần cấu trúc của hộp thoại.
6. Ví dụ này theo dõi chế độ bộ chọn bằng showDial.
   • IconButton chuyển đổi giữa các chế độ, cập nhật biểu tượng tương ứng.
   • Nội dung hộp thoại chuyển đổi giữa TimePicker và TimeInput dựa trên trạng thái showDial.

Cách triển khai nâng cao này cung cấp một hộp thoại bộ chọn thời gian có khả năng tuỳ chỉnh cao và có thể sử dụng lại, có thể thích ứng với nhiều trường hợp sử dụng trong ứng dụng của bạn.

Phương thức triển khai có dạng như sau:

Hình 2. Bộ chọn giờ trong hộp thoại tuỳ chỉnh.

Tài nguyên khác

• Hướng dẫn về bộ chọn thời gian
• Material Design – Bộ chọn thời gian