Compose日期选择按钮优化：仅高亮椭圆区域而非整个矩形

问题：现有Compose周日期选择器实现，选中日期时会高亮整个按钮矩形区域，需求改为仅高亮包裹文字的椭圆形状。

修改后的代码 #

单个日期按钮组件 #

@Composable
fun CalendarDayButton(
    date: ZonedDateTime,
    isSelected: Boolean,
    modifier: Modifier = Modifier,
    onSelected: (date: ZonedDateTime) -> Unit
) {
    val fontDayColor = if (isSelected) DarkGray else Gray

    Box(
        modifier = modifier
            .clickable { onSelected(date) }
            .size(width = 40.dp, height = 60.dp),
        contentAlignment = Alignment.Center
    ) {
        // 选中时显示椭圆背景，仅包裹文字区域
        if (isSelected) {
            Box(
                modifier = Modifier
                    .background(color = Orange, shape = RoundedCornerShape(100.dp))
                    .padding(horizontal = 8.dp, vertical = 4.dp)
            )
        }
        Column(
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = date.dayOfWeek.name.first().toString(),
                fontSize = 12.sp,
                color = fontDayColor
            )
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                text = date.dayOfMonth.toString(),
                fontSize = 16.sp,
                color = DarkGray,
                fontWeight = FontWeight.Bold
            )
        }
    }
}

@Composable
@Preview(showBackground = true)
fun PreviewDayDateButtonSelected() {
    BusbyTaskyTheme {
        CalendarDayButton(
            date = ZonedDateTime.now(),
            isSelected = true,
            modifier = Modifier.size(width = 40.dp, height = 60.dp),
            onSelected = {}
        )
    }
}

整周日期选择组件 #

@Composable
fun AgendaDaySelector(
    date: ZonedDateTime = ZonedDateTime.now(),
    isSelectedDay: ZonedDateTime = ZonedDateTime.now(),
    modifier: Modifier = Modifier,
    onSelected: (ZonedDateTime) -> Unit,
) {
    Row(
        modifier = modifier,
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        (0L..6L).forEach { day ->
            val currentDate = date.plusDays(day)
            CalendarDayButton(
                modifier = Modifier.size(width = 40.dp, height = 60.dp),
                date = currentDate,
                isSelected = isSelectedDay.dayOfWeek == currentDate.dayOfWeek,
                onSelected = onSelected
            )
        }
    }
}

@Composable
@Preview(showBackground = true)
fun PreviewAgendaDaySelector() {
    BusbyTaskyTheme {
        var selectedDay by remember {
            mutableStateOf(ZonedDateTime.now())
        }

        AgendaDaySelector(
            date = ZonedDateTime.now(),
            isSelectedDay = selectedDay,
            modifier = Modifier.fillMaxWidth(),
            onSelected = { selectedDay = it }
        )
    }
}

关键修改说明 #

• 分离点击区域与背景区域：外层Box负责整个按钮的可点击范围（保持40x60的尺寸），内部独立Box仅在选中时渲染椭圆背景，避免背景填充整个按钮空间。
• 移除硬编码背景：删除AgendaDaySelector中给按钮设置的固定橙色背景，让选中状态的背景逻辑完全由CalendarDayButton内部控制。
• 适配文字的背景padding：通过调整背景Box的padding，让椭圆形状恰好包裹日期文字，保证视觉效果符合需求。

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