时间选择器为用户提供了选择时间的方式。您可以
使用 TimePicker
和 TimeInput
可组合项实现时间
选择器中。
类型
时间选择器有两种类型:
- 表盘:允许用户通过在表盘上移动手柄来设置时间。
- 输入:允许用户使用键盘设置时间。
下图为左侧的拨号时间选择器示例, 右侧是一个输入时间选择器:
![一个拨盘和一个输入时间选择器。](https://android-dot-google-developers.gonglchuangl.net/static/develop/ui/compose/images/components/timepickers.png?hl=zh-cn)
API Surface
如需实现时间选择器,请使用 TimePicker
或 TimeInput
可组合项:
TimePicker
:实现拨号时间选择器。TimeInput
:实现输入时间选择器。
状态
对于 TimePicker
和 TimeInput
,您还必须传递一个
TimePickerState
。通过此设置,您可以设置默认的所选时间,
。它还会捕获用户使用
选择器。
对话框
时间选择器会显示在对话框中。本指南中的示例不使用对话框。 如需查看使用对话框的示例,请参阅时间选择器的对话框指南。
拨号时间选择器
此代码段演示了如何实现基本拨号时间选择器。
@Composable fun DialExample( onConfirm: () -> Unit, onDismiss: () -> Unit, ) { val currentTime = Calendar.getInstance() val timePickerState = rememberTimePickerState( initialHour = currentTime.get(Calendar.HOUR_OF_DAY), initialMinute = currentTime.get(Calendar.MINUTE), is24Hour = true, ) Column { TimePicker( state = timePickerState, ) Button(onClick = onDismiss) { Text("Dismiss picker") } Button(onClick = onConfirm) { Text("Confirm selection") } } }
考虑此代码段中的以下内容:
Calendar.getInstance()
会使用当前的TimePickerState
。- 本示例使用
java.util.Calendar
。启用 Java 您的项目中有超过 8 种以上的 API 脱糖,以供替代使用java.time.LocalTime
(所有 Android 版本)。
- 本示例使用
TimePicker
可组合项用于显示时间选择器,timePickerState
作为参数。- 该实现包括两个按钮:一个用于确认选择, 另一个用于关闭选择器。
此实现如下所示:
![拨号时间选择器。用户可以使用拨号选择时间。](https://android-dot-google-developers.gonglchuangl.net/static/develop/ui/compose/images/components/timepicker-dial.png?hl=zh-cn)
输入时间选择器
此代码段演示了如何实现基本输入样式时间选择器。
@Composable fun InputExample( onConfirm: () -> Unit, onDismiss: () -> Unit, ) { val currentTime = Calendar.getInstance() val timePickerState = rememberTimePickerState( initialHour = currentTime.get(Calendar.HOUR_OF_DAY), initialMinute = currentTime.get(Calendar.MINUTE), is24Hour = true, ) Column { TimeInput( state = timePickerState, ) Button(onClick = onDismiss) { Text("Dismiss picker") } Button(onClick = onConfirm) { Text("Confirm selection") } } }
在此实现中需要注意的要点:
- 其结构与拨号时间选择器基本相同,只不过主要
区别在于使用
TimeInput
而不是TimePicker
。 timePickerState
的is24Hour
参数已明确设置为true
。 默认情况下,此值为false
。
此实现如下所示:
![输入时间选择器。用户可以使用文本字段输入时间。](https://android-dot-google-developers.gonglchuangl.net/static/develop/ui/compose/images/components/timepicker-input.png?hl=zh-cn)
使用状态
要利用用户在时间选择器中选择的时间,请将
为 onConfirm
函数添加适当的 TimePickerState
。父级
然后,可组合项可以通过 TimePickerState.hour
访问所选时间,
TimePickerState.minute
。
以下代码段演示了如何执行此操作:
@Composable fun DialUseStateExample( 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, ) Column { TimePicker( state = timePickerState, ) Button(onClick = onDismiss) { Text("Dismiss picker") } Button(onClick = { onConfirm(timePickerState) }) { Text("Confirm selection") } } }
然后,您可以调用可组合项,如下所示:
var selectedTime: TimePickerState? by remember { mutableStateOf(null) }
// ...
DialUseStateExample(
onDismiss = {
showDialExample = false
},
onConfirm = {
time ->
selectedTime = time
showDialExample = false
},
)
// ...
if (selectedTime != null) {
val cal = Calendar.getInstance()
cal.set(Calendar.HOUR_OF_DAY, selectedTime!!.hour)
cal.set(Calendar.MINUTE, selectedTime!!.minute)
cal.isLenient = false
Text("Selected time = ${formatter.format(cal.time)}")
} else {
Text("No time selected.")
}
有关详情,请参阅代码段中的完整实现 app。