Dialog untuk pemilih waktu

Pemilih waktu sering muncul dalam dialog. Anda dapat menggunakan model implementasi minimal dari suatu dialog, atau Anda bisa mengimplementasikan dialog kustom lebih fleksibel.

Untuk informasi selengkapnya tentang dialog secara umum, termasuk cara menggunakan pemilih waktu status, lihat Panduan pemilih waktu.

Contoh dasar

Cara paling mudah untuk membuat dialog bagi pemilih waktu Anda adalah dengan buat composable yang mengimplementasikan AlertDialog. Cuplikan berikut memberikan contoh dialog yang relatif minimal menggunakan pendekatan ini:

@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

Perhatikan poin-poin penting dalam cuplikan ini:

1. Composable DialWithDialogExample menggabungkan TimePicker dalam dialog.
2. TimePickerDialog adalah composable kustom yang membuat AlertDialog dengan parameter berikut:
   • onDismiss: Fungsi yang dipanggil saat pengguna menutup dialog (melalui tombol tutup atau navigasi kembali).
   • onConfirm: Fungsi yang dipanggil saat pengguna mengklik "OK" tombol.
   • content: Composable yang menampilkan alat pilih waktu dalam dialog.
3. AlertDialog mencakup:
   • Tombol tutup berlabel "Tutup".
   • Tombol konfirmasi berlabel "OK".
   • Konten pemilih waktu yang diteruskan sebagai parameter text.
4. DialWithDialogExample menginisialisasi TimePickerState dengan waktu saat ini dan meneruskannya ke TimePicker dan onConfirm fungsi tersebut.

Contoh Lanjutan

Cuplikan ini menunjukkan penerapan lanjutan waktu yang dapat disesuaikan dialog pemilih di 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

Perhatikan poin-poin penting dalam cuplikan ini:

1. Composable AdvancedTimePickerExample membuat waktu yang dapat disesuaikan dialog pemilih.
2. Class ini menggunakan composable Dialog untuk fleksibilitas lebih besar daripada AlertDialog.
3. Dialog ini menyertakan judul yang dapat disesuaikan dan tombol untuk beralih antara mode {i>dial <i}dan {i>input.<i}
4. Surface menerapkan bentuk dan elevasi ke dialog, dengan IntrinsicSize.Min untuk lebar dan tinggi.
5. Tata letak Column dan Row menyediakan komponen struktur dialog.
6. Contoh ini melacak mode pemilih menggunakan showDial.
   • IconButton beralih antarmode, dan memperbarui ikon sebagaimana mestinya.
   • Konten dialog beralih antara TimePicker dan TimeInput berdasarkan status showDial.

Implementasi lanjutan ini memberikan waktu yang sangat mudah disesuaikan dan digunakan kembali dialog pemilih yang dapat beradaptasi dengan berbagai kasus penggunaan di aplikasi Anda.

Implementasi ini muncul sebagai berikut:

Referensi lainnya

• Panduan pemilih waktu
• Desain Material - Pemilih Waktu