Rich TimePicker:拨盘、输入与滚轮 · AndroidX 源码指南
AAndroidX 源码指南
M3E 设计系统
M3E 设计系统 · androidx.compose.material3

Rich TimePicker:拨盘、输入与滚轮1.5.0-alpha25

在普通与 Rich TimePicker 之间选择,并共享 TimePickerState、shapes 和 richColors。

最后更新 2026-08-01

拨盘 TimePicker

输入 TimePicker

Rich 重载如何识别

普通重载接收 state;Rich 重载额外要求 TimePickerShapes,并默认使用 TimePickerDefaults.richColors()

val state = rememberTimePickerState()
val shapes = TimePickerDefaults.shapes()

TimePicker(
    state = state,
    shapes = shapes,
)

同样的 Rich 入口还包括 TimeInput(state, shapes)TimeScroll(state, shapes)

三种输入方式

  • TimePicker:模拟时钟拨盘。
  • TimeInput:小时、分钟文本输入。
  • TimeScroll:两个 ScrollField,适合滚轮选择。

三者共享 TimePickerState.hourminute,因此切换视图时不应复制三份时间状态。

布局与可访问性

layoutType 支持 Horizontal/Vertical。源码在辅助功能服务或键盘输入场景中会调整自动切换行为,应用不应强行覆盖成只适合触摸的流程。

复制即用

拨盘 / 输入 / 滚轮三种时间选择器共享同一状态:

import androidx.compose.material3.TimeInput
import androidx.compose.material3.TimePicker
import androidx.compose.material3.TimePickerDefaults
import androidx.compose.material3.TimeScroll
import androidx.compose.material3.rememberTimePickerState
import androidx.compose.runtime.Composable

@Composable
fun DialTimePicker() {
    val state = rememberTimePickerState()
    val shapes = TimePickerDefaults.shapes()

    TimePicker(
        state = state,
        shapes = shapes,
    )
}

@Composable
fun InputTimePicker() {
    val state = rememberTimePickerState()
    val shapes = TimePickerDefaults.shapes()

    TimeInput(
        state = state,
        shapes = shapes,
    )
}

@Composable
fun ScrollTimePicker() {
    val state = rememberTimePickerState()
    val shapes = TimePickerDefaults.shapes()

    TimeScroll(
        state = state,
        shapes = shapes,
    )
}

三种视图共享 state.hour / state.minute,切换视图时不要复制时间状态。