时间选择器通常显示在对话框中。您可以使用相对通用的 对话框的最小实现方式，您也可以使用 灵活性更高
有关一般对话框的更多信息，包括如何使用时间选择器 请参阅时间选择器指南。
基本示例
为时间选择器创建对话框的最直接方法是
创建一个实现 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包括：- 标有“关闭”的关闭按钮。
- 标有“OK”的确认按钮。
- 时间选择器内容以
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可在两种模式之间切换，相应更新图标。- 对话框内容会根据以下因素在
TimePicker和TimeInput之间切换：showDial状态。
这种高级实现提供高度可定制且可重复使用的时间 可适应应用中不同用例的选择器对话框。
此实现如下所示：
