时间选择器通常显示在对话框中。您可以使用相对通用的 对话框的最小实现方式,您也可以使用 灵活性更高
有关一般对话框的更多信息,包括如何使用时间选择器 请参阅时间选择器指南。
基本示例
为时间选择器创建对话框的最直接方法是
创建一个实现 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
以下参数: <ph type="x-smartling-placeholder">- </ph>
onDismiss
:当用户关闭对话框时(通过 或返回)。onConfirm
:在用户点击“OK”时调用的函数按钮。content
:一个可组合项,用于在对话框中显示时间选择器。
AlertDialog
包括:- 标有“关闭”的关闭按钮。
- 标有“OK”的确认按钮。
- 时间选择器内容以
text
参数的形式传递。
DialWithDialogExample
会使用TimePickerState
并将其传递给TimePicker
和onConfirm
。 函数。
![AlertDialog 中的时间选择器,用于实现标题、模式切换开关以及关闭和确认按钮。](https://android-dot-google-developers.gonglchuangl.net/static/develop/ui/compose/images/components/timepicker-basic.png?hl=zh-cn)
高级示例
此代码段演示了自定义时间的高级实现 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://android-dot-google-developers.gonglchuangl.net/static/develop/ui/compose/images/components/timepicker-advanced.png?hl=zh-cn)