如何在Jetpack Compose时间选择器中显示AM/PM标识

核心问题分析 #

你当前的代码仅格式化了小时和分钟，未利用timePickerState提供的hourOfDay字段判断时段（AM/PM）；同时若需在组件重建（如屏幕旋转）时保留用户选择，需要确保状态被正确持久化。

1. 实现AM/PM标识显示 #

当is24Hour=false时，timePickerState.hour返回12小时制数值（1-12），而hourOfDay始终为24小时制（0-23），可通过后者精准判断时段：

• hourOfDay < 12 对应AM
• hourOfDay >= 12 对应PM

修改时间格式化逻辑：

// 生成带AM/PM的格式化时间
val period = if (timePickerState.hourOfDay < 12) "AM" else "PM"
val formattedTime = "%02d:%02d %s".format(timePickerState.hour, timePickerState.minute, period)

2. 保存用户时段选择偏好 #

rememberTimePickerState内部已基于rememberSaveable实现组件内状态保存，若需进一步确保状态不丢失，可显式监听时间变化并持久化：

// 用rememberSaveable保存初始时间，确保组件重建时保留用户选择
val savedHourOfDay = rememberSaveable { mutableStateOf(currentTime[Calendar.HOUR_OF_DAY]) }
val savedMinute = rememberSaveable { mutableStateOf(currentTime[Calendar.MINUTE]) }

val timePickerState = rememberTimePickerState(
    initialHour = savedHourOfDay.value,
    initialMinute = savedMinute.value,
    is24Hour = false,
)

// 监听时间选择变化，更新保存的状态
LaunchedEffect(timePickerState.hourOfDay, timePickerState.minute) {
    savedHourOfDay.value = timePickerState.hourOfDay
    savedMinute.value = timePickerState.minute
}

完整修正代码 #

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.Center,
) {
    val currentTime = Calendar.getInstance()

    // 持久化用户选择的时间状态
    val savedHourOfDay = rememberSaveable { mutableStateOf(currentTime[Calendar.HOUR_OF_DAY]) }
    val savedMinute = rememberSaveable { mutableStateOf(currentTime[Calendar.MINUTE]) }

    val timePickerState = rememberTimePickerState(
        initialHour = savedHourOfDay.value,
        initialMinute = savedMinute.value,
        is24Hour = false,
    )

    // 同步时间选择到持久化状态
    LaunchedEffect(timePickerState.hourOfDay, timePickerState.minute) {
        savedHourOfDay.value = timePickerState.hourOfDay
        savedMinute.value = timePickerState.minute
    }

    // 格式化带AM/PM的时间
    val period = if (timePickerState.hourOfDay < 12) "AM" else "PM"
    val formattedTime = "%02d:%02d %s".format(timePickerState.hour, timePickerState.minute, period)

    Text(text = formattedTime)

    TimePicker(
        state = timePickerState,
    )
}

关键说明 #

• is24Hour参数仅控制时间选择器的显示模式，和当前时段（AM/PM）无关，不能直接用来判断时段。
• hour是12小时制数值（1-12），hourOfDay是24小时制数值（0-23），后者更适合用于判断AM/PM。

内容的提问来源于stack exchange，提问作者Bob Rasner