時間挑選器通常會顯示在對話方塊中。您可以使用相對一般且最小化的對話方塊實作方式,也可以實作彈性更高的自訂對話方塊。
如要進一步瞭解對話方塊 (包括如何使用時間選擇器狀態),請參閱時間選擇器指南。
基本範例
如要為時間挑選器建立對話方塊,最簡單的方法是建立實作 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() } ) }
請注意這個程式碼片段中的重點:
DialWithDialogExample
可組合項會在對話方塊中包裝TimePicker
。TimePickerDialog
是自訂可組合函式,可使用下列參數建立AlertDialog
:onDismiss
:使用者透過關閉按鈕或返回導覽關閉對話方塊時呼叫的函式。onConfirm
:使用者按一下「OK」按鈕時呼叫的函式。content
:在對話方塊中顯示時間挑選器的可組合函式。
AlertDialog
包含:- 標示為「關閉」的關閉按鈕。
- 標示為「確定」的確認按鈕。
- 時間挑選器內容會做為
text
參數傳遞。
DialWithDialogExample
會使用目前時間初始化TimePickerState
,並將其傳遞至TimePicker
和onConfirm
函式。
進階範例
這個程式碼片段示範在 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") } } } } } }
請注意這個程式碼片段中的重點:
AdvancedTimePickerExample
可組合項會建立可自訂的時間挑選器對話方塊。- 它使用
Dialog
可組合函式,靈活性比AlertDialog
更高。 - 對話方塊包含可自訂的標題和切換按鈕,可在撥號和輸入模式之間切換。
Surface
會將形狀和高度套用至對話方塊,並使用IntrinsicSize.Min
指定寬度和高度。Column
和Row
版面配置會提供對話方塊的結構元件。- 本範例會使用
showDial
追蹤挑選器模式。IconButton
會在模式之間切換,並相應更新圖示。- 對話方塊內容會根據
showDial
狀態在TimePicker
和TimeInput
之間切換。
這項進階實作方式提供可高度自訂且可重複使用的時間挑選器對話方塊,可因應應用程式中的不同用途進行調整。
此實作方式如下所示: