Jetpack Compose DatePicker年月导航栏及箭头颜色修改方法

方法一：通过DatePickerDefaults.colors()直接设置 #

你提到的包含年月和导航箭头的行是DatePicker的Header区域，在Material3的DatePickerDefaults.colors()中，有两个参数可以直接控制该区域的颜色：

• headerContentColor：设置年月文本的颜色
• iconContentColor：设置左右导航箭头的颜色

修改后的代码示例：

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    val datePickerState = rememberDatePickerState(initialSelectedDateMillis = 1578096000000)
    DatePicker(
        state = datePickerState,
        modifier = Modifier.padding(16.dp),
        colors = DatePickerDefaults.colors(
            titleContentColor = Color.Green,
            headlineContentColor = Color.Red,
            headerContentColor = Color.Blue, // 年月文本颜色
            iconContentColor = Color.Blue    // 导航箭头颜色
        )
    )
}

方法二：自定义Header组件（精细控制） #

如果需要给年月文本和箭头设置不同颜色，或者自定义布局样式，可以通过DatePicker的title参数完全替换顶部Header：

Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
    val datePickerState = rememberDatePickerState(initialSelectedDateMillis = 1578096000000)
    // 获取选中日期的年月
    val calendar = Calendar.getInstance().apply {
        datePickerState.selectedDateMillis?.let { timeInMillis = it }
    }
    val year = calendar.get(Calendar.YEAR)
    val month = calendar.get(Calendar.MONTH) + 1 // 月份从0开始，需+1

    DatePicker(
        state = datePickerState,
        modifier = Modifier.padding(16.dp),
        colors = DatePickerDefaults.colors(
            titleContentColor = Color.Green,
            headlineContentColor = Color.Red
        ),
        title = {
            Row(
                modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically
            ) {
                // 自定义年月文本
                Text(
                    text = "${year}年${month}月",
                    color = Color.Purple,
                    style = MaterialTheme.typography.titleLarge
                )
                // 自定义导航箭头
                Row {
                    IconButton(onClick = { datePickerState.navigateToPrevious() }) {
                        Icon(
                            Icons.Rounded.KeyboardArrowLeft,
                            contentDescription = "切换到上月",
                            tint = Color.Orange
                        )
                    }
                    IconButton(onClick = { datePickerState.navigateToNext() }) {
                        Icon(
                            Icons.Rounded.KeyboardArrowRight,
                            contentDescription = "切换到下月",
                            tint = Color.Orange
                        )
                    }
                }
            }
        }
    )
}

这种方式可以完全掌控Header区域的每一个元素样式，包括颜色、字体大小、间距等。

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