如何在Jetpack Compose中更改DatePicker对话框的颜色？

Question

我希望改变datePicker Dialog的颜色，但我不知道如何做到。我找到了一些关于它的资料，但还没有关于jetpack compose的，你能帮我吗？这是我的DatePicker Dialog代码：

val context = LocalContext.current

 val year: Int
    val month: Int
    val day: Int
    val calendar = Calendar.getInstance()

    year = calendar.get(Calendar.YEAR)
    month = calendar.get(Calendar.MONTH)
    day = calendar.get(Calendar.DAY_OF_MONTH)

 val datePickerDialog = DatePickerDialog(
        context,
        { _: DatePicker, year: Int, month: Int, dayOfMonth: Int ->
            onDateChange("$dayOfMonth/${month + 1}/$year", day, month, year)
        }, year, month, day
    )

 CustomInputField(
                isFocused = isInputFocused,
                placeholder = "Your Birty Day ",
                currentValue = state.date,
                onClick = {
                    onPickerStateChange(BirthDayPickerState.BIRTHDAY)
                    datePickerDialog.show()
                }) 

这是我的所有日期选择器对话框代码。我没有分享它，因为我认为并不是所有的代码都是必要的，我只想分享必要的代码。让我快速解释一下，我有一个自定义输入字段customInputField，它类似于文本字段。当我点击customInputField时，DatePicker对话框会打开，我选择用户的出生日期，并将其显示在customInputField中作为用户的出生日期，但我想更改这个DatePicker对话框，因为我不喜欢它。你有什么建议吗？

- NewPartizal

Answer 1

您可以在构造函数中应用主题叠加层：

val datePickerDialog = DatePickerDialog(
    context,
    R.style.ThemeOverlay_MyApp_Dialog,
    { _: DatePicker, year: Int, month: Int, dayOfMonth: Int ->
        mDate.value = "$dayOfMonth/${month + 1}/$year, day, month, year"
    }, year, month, day
)

主题覆盖是在styles/themes.xml文件中定义的。类似于：

<style name="ThemeOverlay.MyApp.Dialog" parent="@style/ThemeOverlay.MaterialComponents.Dialog">
    <item name="colorSecondary">@color/red500_light</item>
    <item name="colorPrimary">@color/blu500_dark</item> <!-- button text color -->
</style>

您也可以使用 M3 中的新 DatePicker（从 1.1.0-alpha04 开始）

    val datePickerState = rememberDatePickerState(initialSelectedDateMillis = 1578096000000)

    androidx.compose.material3.DatePicker(
        datePickerState = datePickerState,
        modifier = Modifier.padding(16.dp),
        colors = DatePickerDefaults.colors(
            titleContentColor = Blue500,
        )
    )

    Text("Selected date timestamp: ${datePickerState.selectedDateMillis ?: "no selection"}")

- Gabriele Mariotti

---

我在第一个解决方案中将“@style/ThemeOverlay.MaterialComponents.Dialog”更改为“Theme.AppCompat.Light.Dialog”，效果好多了。谢谢您的回答。 - NewPartizal

这不是我的完整答案，但我认为这会让我走上正确的轨道。 - mobibob

Answer 2

可以通过将样式化的主题应用于themeResId参数来自定义DatePickerDialog的强调颜色。 试一试这个，

<style name="DatePickerTheme" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorSecondary">@color/white</item>
    <item name="android:colorAccent">@color/your_custom_color</item>
    <item name="colorAccent">@color/your_custom_color</item>
</style>

应用这个主题为：

DatePickerDialog(
   context = context,
   themeResId = R.style.DatePickerTheme
)

这将会将your_custom_color应用于日历、日期选择器圆圈以及所有的CTA（包括“确定”和“取消”），同时保持背景为白色。

- Happy Dev