M3E 设计系统
M3E 设计系统 · androidx.compose.material3
Rich TimePicker:拨盘、输入与滚轮1.5.0-alpha25
在普通与 Rich TimePicker 之间选择,并共享 TimePickerState、shapes 和 richColors。
最后更新 2026-08-01


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.hour 与 minute,因此切换视图时不应复制三份时间状态。
布局与可访问性
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,切换视图时不要复制时间状态。