时间选择器

时间选择器可让用户选择时间。您可以使用 TimePicker 和 TimeInput 可组合项在应用中实现时间选择器。

类型

时间选择器有两种类型：

  • 表盘：允许用户通过在表盘上移动手柄来设置时间。
  • 输入：允许用户使用键盘设置时间。

下图显示了左侧是拨号式时间选择器，右侧是输入式时间选择器的示例：

一个表盘和一个输入时间选择器。
图 1. 一个表盘和一个输入时间选择器。

API Surface

如需实现时间选择器，请使用 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")
        }
    }
}
TimePickers.kt

考虑此代码段中的以下内容：

  • Calendar.getInstance() 会使用当前时间初始化 TimePickerState。
  • TimePicker 可组合项会显示时间选择器，并将 timePickerState 作为参数。
  • 此实现包含两个按钮：一个用于确认选择，另一个用于关闭选择器。

此实现如下所示：

拨号时间选择器。用户可以使用旋转拨号器选择时间。
图 2. 拨号式时间选择器。

输入时间选择器

此代码段演示了如何实现基本输入样式时间选择器。

@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")
        }
    }
}
TimePickers.kt

此实现中需要注意的要点：

  • 其结构与拨号式时间选择器基本相同，主要区别在于使用 TimeInput 而非 TimePicker。
  • timePickerState 的 is24Hour 参数已明确设置为 true。默认情况下，此值为 false。

此实现如下所示：

输入时间选择器。用户可以使用文本字段输入时间。
图 3. 输入时间选择器。

使用状态

如需利用用户在时间选择器中选择的时间，请将相应的 TimePickerState 传递给 onConfirm 函数。然后，父级可组合项可以通过 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")
        }
    }
}
TimePickers.kt

然后，您可以按如下方式调用可组合项：

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.")
}

如需了解详情，请参阅代码段应用中的完整实现。

其他资源