時間挑選器的對話方塊

時間挑選器通常會出現在對話方塊中。您可以相對籠統地實作對話方塊，也可以更彈性地實作自訂對話方塊。

如要進一步瞭解一般對話方塊，包括如何使用時間挑選器狀態，請參閱時間挑選器指南。

基本範例

如要為時間挑選器建立對話方塊，最簡單的方法是建立實作 AlertDialog 的可組合項。下列程式碼片段提供使用這項做法的相對簡短對話方塊範例：

@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

請注意這段程式碼片段的重點：

  1. DialWithDialogExample 可組合函式會在對話方塊中包裝 TimePicker。
  2. TimePickerDialog 是自訂可組合函式，會使用下列參數建立 AlertDialog：
    • onDismiss：使用者關閉對話方塊時 (透過關閉按鈕或返回導覽)，系統會呼叫的函式。
    • onConfirm：使用者點選「確定」按鈕時呼叫的函式。
    • content：在對話方塊中顯示時間挑選器的可組合函式。
  3. AlertDialog包含：
    • 標示為「關閉」的關閉按鈕。
    • 標示為「確定」的確認按鈕。
    • 做為 text 參數傳遞的時間挑選器內容。
  4. DialWithDialogExample 會使用目前時間初始化 TimePickerState，並將其傳遞至 TimePicker 和 onConfirm 函式。
AlertDialog 中的時間挑選器，實作了標題、模式切換和關閉/確認按鈕。
圖 1. AlertDialog 中的時間挑選工具。

進階範例

這個程式碼片段展示如何在 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

請注意這段程式碼片段的重點：

  1. AdvancedTimePickerExample 可組合函式會建立可自訂的時間挑選器對話方塊。
  2. 與 AlertDialog 相比，Dialog 可組合函式更具彈性。
  3. 對話方塊包含可自訂的標題和切換按鈕，可在撥號和輸入模式之間切換。
  4. Surface 會將形狀和高度套用至對話方塊，並為寬度和高度設定 IntrinsicSize.Min。
  5. Column 和 Row 版面配置提供對話方塊的結構元件。
  6. 這個範例會使用 showDial 追蹤挑選器模式。
    • IconButton 可切換模式，並據此更新圖示。
    • 對話方塊內容會根據 showDial 狀態，在 TimePicker 和 TimeInput 之間切換。

這項進階實作方式提供高度可自訂且可重複使用的時間挑選器對話方塊，可配合應用程式中的不同用途。

實作方式如下：

自訂對話方塊中的時間挑選器，實作標題、模式切換，以及關閉和確認按鈕。
圖 2. 自訂對話方塊中的時間挑選工具。

其他資源