時間挑選器通常會顯示在對話方塊中。您可以使用相對通用的 最簡單的對話方塊實作,或您可以使用 更有彈性
如要進一步瞭解對話方塊的一般資訊,包括時間挑選器的使用方式 狀態,請參閱時間挑選器指南。
基本範例
如要建立時間挑選器的對話方塊,最簡單的方式就是:
建立實作 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
函式。
![AlertDialog 中的時間挑選器,可實作標題、模式切換,以及關閉和確認按鈕。](https://developer.android.com/static/develop/ui/compose/images/components/timepicker-basic.png?hl=zh-tw)
進階範例
這段程式碼片段示範進階導入「可自訂的時間」 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
會在不同模式之間切換,並據此更新圖示。- 對話方塊內容會根據以下項目在
TimePicker
和TimeInput
之間切換showDial
狀態。
這種進階導入作業相當容易自訂,而且可重複使用 可根據應用程式中的不同用途進行調整。
實作內容如下所示:
![自訂對話方塊中的時間挑選器,可實作標題、模式切換按鈕,以及關閉和確認按鈕。](https://developer.android.com/static/develop/ui/compose/images/components/timepicker-advanced.png?hl=zh-tw)