Composable TimePicker设置23点显示为12点问题求助

问题详情 #

使用基于rememberTimePickerState的Compose TimePicker时，手动设置时间为23:59，组件显示为12:59。其他时间设置均正常，仅小时为23时出现该问题，且12小时制、24小时制下都存在此异常。

相关代码 #

val timePickerState = rememberTimePickerState(
    initialHour = 23,
    initialMinute = 59
)

TimePicker(
    state = timePickerState,
    colors = TimePickerDefaults.colors(
        clockDialColor = md_theme_accessible_blue,
        timeSelectorSelectedContainerColor = MaterialTheme.colorScheme.primary,
        timeSelectorSelectedContentColor = md_theme_accessible_blue,
        timeSelectorUnselectedContainerColor = md_theme_accessible_blue,
        periodSelectorSelectedContainerColor = md_theme_accessible_blue,
        periodSelectorSelectedContentColor = MaterialTheme.colorScheme.primary,
        periodSelectorUnselectedContainerColor = md_theme_accessible_blue,
    )
)

显示效果 #

Gradle配置 #

//Compose
val composeBom = platform("androidx.compose:compose-bom:2023.08.00")
implementation(composeBom)
implementation("androidx.compose.material:material")
implementation("androidx.compose.material3:material3:1.2.0-alpha05")
implementation("androidx.activity:activity-compose")
implementation("androidx.compose.ui:ui-tooling-preview")
implementation("androidx.compose.ui:ui")
implementation("androidx.compose.runtime:runtime-livedata")

解决方法 #

这个异常是Material3 1.2.0-alpha05版本的已知bug，该测试版本的TimePicker在处理23小时的显示逻辑上存在错误，解决步骤如下：

1. 升级Material3依赖到稳定版
   建议通过Compose BOM统一管理版本，避免版本冲突。修改Gradle配置：

   //Compose
   val composeBom = platform("androidx.compose:compose-bom:2024.06.00") // 升级至最新稳定BOM
   implementation(composeBom)
   implementation("androidx.compose.material:material")
   implementation("androidx.compose.material3:material3") // 由BOM自动管理稳定版本
   implementation("androidx.activity:activity-compose")
   implementation("androidx.compose.ui:ui-tooling-preview")
   implementation("androidx.compose.ui:ui")
   implementation("androidx.compose.runtime:runtime-livedata")
   

   若不想升级BOM，也可直接指定Material3稳定版：

   implementation("androidx.compose.material3:material3:1.2.0")
   

2. 验证修复效果
   升级依赖后重新运行项目，设置时间为23:59时，TimePicker将正确显示：

   • 24小时制下显示23:59
   • 12小时制下显示11:59 PM

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