如何设置Jetpack Compose中DatePicker文本为白色并修复导航返回异常？

我在Jetpack Compose中通过AndroidView集成原生滚轮样式DatePicker，首次进入页面时显示正常（文本为白色），但从其他页面返回后，DatePicker的文本颜色出现异常（不再是白色）。已尝试在xml和主题中设置相关属性，但问题依旧。

解决方案步骤 #

1. 完善CustomDatePickerStyle主题 #

原生Spinner样式的DatePicker需要覆盖更多文本相关属性，仅设置calendarTextColor不够。在res/values/styles.xml中更新主题：

<style name="CustomDatePickerStyle" parent="@android:style/Widget.Material.DatePicker.Spinner">
    <!-- 滚轮文本颜色 -->
    <item name="android:textColorPrimary">#FFFFFF</item>
    <!-- 辅助文本颜色 -->
    <item name="android:textColorSecondary">#FFFFFF</item>
    <!-- 分隔线颜色 -->
    <item name="android:divider">#FFFFFF</item>
    <!-- 控件激活态颜色 -->
    <item name="android:colorControlActivated">#FFFFFF</item>
    <!-- 控件常态颜色 -->
    <item name="android:colorControlNormal">#FFFFFF</item>
</style>

2. 优化AndroidView的实现 #

AndroidView的factory只在View首次创建时执行，页面返回重组时需要通过update回调确保样式和状态恢复，同时使用带主题的Context加载布局：

@Composable
fun DatePicker(
    selectedDate: Date,
    onDateSelected: (Date) -> Unit
) {
    val themedContext = ContextThemeWrapper(LocalContext.current, R.style.CustomDatePickerStyle)

    AndroidView(
        modifier = Modifier.fillMaxWidth(),
        factory = { ctx ->
            val inflater = LayoutInflater.from(ctx)
            val view = inflater.inflate(R.layout.date_picker, null)
            val datePicker = view.findViewById<DatePicker>(R.id.datePicker)
            setupDatePicker(datePicker, selectedDate, onDateSelected)
            datePicker
        },
        update = { datePicker ->
            // 页面重组时重新初始化，确保样式和选中状态正确
            setupDatePicker(datePicker, selectedDate, onDateSelected)
        }
    )
}

private fun setupDatePicker(
    datePicker: DatePicker,
    selectedDate: Date,
    onDateSelected: (Date) -> Unit
) {
    val calendar = Calendar.getInstance().apply { time = selectedDate }
    datePicker.init(
        calendar.get(Calendar.YEAR),
        calendar.get(Calendar.MONTH),
        calendar.get(Calendar.DAY_OF_MONTH)
    ) { _, year, month, day ->
        val newDate = Calendar.getInstance().apply {
            set(year, month, day)
        }.time
        onDateSelected(newDate)
    }

    // 兜底方案：直接获取滚轮的TextView强制设置白色
    val res = Resources.getSystem()
    datePicker.findViewById<TextView>(res.getIdentifier("day", "id", "android"))?.setTextColor(Color.WHITE)
    datePicker.findViewById<TextView>(res.getIdentifier("month", "id", "android"))?.setTextColor(Color.WHITE)
    datePicker.findViewById<TextView>(res.getIdentifier("year", "id", "android"))?.setTextColor(Color.WHITE)
}

3. 调整组件使用方式 #

将ViewModel中的选中日期传入DatePicker，确保页面返回时能恢复正确状态：

DatePicker(selectedDate = validationViewModel.dateOfBirth) { date ->
    validationViewModel.changeDateOfBirth(date)
}

4. 优化ViewModel日期处理 #

避免截取Date字符串的不安全做法，让验证逻辑直接接收Date参数：

@OptIn(ExperimentalCoroutinesApi::class)
val dateOfBirthError = snapshotFlow { dateOfBirth }
    .mapLatest { validateAge.execute(it) } // 内部用Calendar解析Date获取年龄
    .stateIn(
        scope = viewModelScope,
        started = SharingStarted.WhileSubscribed(5_000),
        initialValue = ValidationResult()
    )

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