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

Bộ chọn giờ thường xuất hiện trong hộp thoại. Bạn có thể sử dụng cách tính tương đối chung và triển khai hộp thoại ở mức tối thiểu, hoặc bạn có thể triển khai hộp thoại tuỳ chỉnh bằng 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 bộ chọn giờ 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 giờ là tạo một thành phần kết hợp triển khai AlertDialog. Đoạn mã sau cung cấp ví dụ về một hộp thoại tương đối đơn giản bằng phương pháp sau:

@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 thành phần kết hợp tuỳ chỉnh tạo ra một AlertDialog với các thông số sau:
   • onDismiss: Một 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 điều hướng quay lại).
   • onConfirm: Một hàm được gọi khi người dùng nhấp vào "OK" .
   • content: Một thành phần kết hợp cho thấy bộ chọn giờ trong hộp thoại.
3. AlertDialog bao gồm:
   • Nút đóng có nhãn "Đóng".
   • Một nút xác nhận có nhãn "OK".
   • Nội dung của bộ chọn giờ đượ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 rồi chuyển nó đến cả TimePicker và onConfirm .

Ví dụ nâng cao

Đoạn mã này minh hoạ cách triển khai nâng cao của thời gian có thể tuỳ chỉnh hộp thoại bộ chọn 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 ra thời gian có thể tuỳ chỉnh hộp thoại bộ chọn.
2. Công cụ này sử dụng thành phần kết hợp Dialog để linh hoạt hơn so với AlertDialog.
3. Hộp thoại này bao gồm một tiêu đề tuỳ chỉnh và 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 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 cách sử dụng showDial.
   • IconButton chuyển đổi giữa các chế độ và cập nhật biểu tượng cho phù hợp.
   • 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 mang lại thời gian có thể tuỳ chỉnh cao và có thể sử dụng lại hộp thoại bộ chọn có thể điều chỉnh cho phù hợp với các trường hợp sử dụng khác nhau trong ứng dụng của bạn.

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

Tài nguyên khác

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