如何在 Jetpack Compose 中自定义日历视图？

Question

我正在使用底部工作表中的日历视图来显示日历视图。 现在我想更改导航左右箭头图标并减少日历中两个图标之间的空间。 我还想要“今日”文本label当今天的日期选择下面的日期时。

目前我得到这样的观点：

这是我想要获得的视图：

        Row(modifier = Modifier
            .padding(6.dp),
            verticalAlignment = Alignment.Top) {

            AndroidView(
                { CalendarView(it) },
                modifier = Modifier.wrapContentWidth(),
                update = { views ->
                    views.date = scheduleViewModel.selectedCalender.value.timeInMillis
                    views.setOnDateChangeListener { calendarView, year, month, dayOfMonth ->
                        val cal = Calendar.getInstance()
                        cal.set(year, month, dayOfMonth)
                        scheduleViewModel.onEvent(ScheduleEvent.DateSelected(cal))
                        onDateSelect()

                    }
                }
            )

            Text(
                text = "Today",
                modifier = Modifier
                    .wrapContentWidth(),
                fontFamily = appFontFamily,
                fontWeight = FontWeight.SemiBold,
                fontSize = 10.sp,
                color = Color(0xFF0A70C4),
                textAlign = TextAlign.Center,
            )

        }

Answer 1

当您使用 XML 视图时，您需要寻找非 Compose 解决方案，例如查看此问题下的答案如何为CalendarView定义自定义 XML 主题。

要将主题应用于AndroidView ，您可以使用ContextThemeWrapper ：

AndroidView(
    { CalendarView(ContextThemeWrapper(it, R.style.your_custom_style)) },
    // ...