时间选择器

时间选择器为用户提供了选择时间的方式。您可以 使用 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. 输入时间选择器。

使用状态

要利用用户在时间选择器中选择的时间，请将 为 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")
        }
    }
}
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.")
}

有关详情，请参阅代码段中的完整实现 app。

其他资源