Jetpack Compose构建类Outlook日历：事件布局宽度对齐问题

一、「默认日历+事件覆盖」两层方案的可行性 #

这个分层方案完全适合在Jetpack Compose中构建类Outlook日历：

• 符合Compose的UI组合思想，默认网格层与事件层职责分离，各自维护自身逻辑，易于后续扩展和维护
• 通过同步滚动状态能保证两层视觉一致性，完美匹配Outlook日历的交互逻辑
• 自定义Layout可以灵活控制事件的定位、跨列/跨行排版，满足复杂日历场景的展示需求

二、解决EventLayout与DefaultEventLayout宽度对齐问题 #

问题根源 #

1. 当前EventLayout的宽度是基于事件的最大X坐标+宽度计算，未与DefaultEventLayout的网格单元格尺寸绑定，导致两者宽度约束不一致
2. 两层布局的滚动容器层级分散，约束传递路径不同，引发宽度适配偏差

具体解决步骤 #

1. 统一网格单元格尺寸，绑定布局基准

定义全局常量规范单元格尺寸，确保两层布局基于同一基准计算：

private val CELL_WIDTH = 120.dp // 单日历列宽度
private val CELL_HEIGHT = 60.dp // 单小时行高度

2. 统一滚动容器层级

将滚动修饰符移至外层Box，让两层布局共享相同的约束和滚动范围：

Box(
    modifier = Modifier
        .weight(1f)
        .fillMaxHeight()
        .verticalScroll(verticalScrollState)
        .horizontalScroll(horizontalScrollState)
) {
    DefaultEventLayout()
    EventLayout(...) { ... }
}

同时移除DefaultEventLayout和EventLayout内部的滚动修饰符。

3. 修正EventLayout的布局计算逻辑

• 直接继承父容器的宽度约束，确保与DefaultEventLayout宽度一致
• 事件的位置和尺寸基于单元格索引计算，而非硬编码的DP值

修改后的关键代码 #

日历单元格组件

@Composable
fun DefaultEventCell() {
    Box(
        modifier = Modifier
            .width(CELL_WIDTH)
            .height(CELL_HEIGHT)
            .border(1.dp, Color.LightGray)
    )
}

默认网格布局

@Composable
fun DefaultEventLayout() {
    Column {
        repeat(24) { rowIndex ->
            Row {
                repeat(7) { columnIndex ->
                    DefaultEventCell()
                }
            }
        }
    }
}

事件布局（优化版）

// 更合理的事件数据类
data class CalendarEvent(
    val columnIndex: Int, // 所在列（0-6对应一周7天）
    val startRowIndex: Int, // 开始行（0-23对应小时）
    val duration: Int, // 持续小时数
    val columnSpan: Int = 1 // 跨列数，默认1列
)

@Composable
fun EventLayout(
    showLayout: Boolean,
    itemData: List<CalendarEvent>,
    content: @Composable () -> Unit,
) {
    if (showLayout) {
        Layout(
            content = content,
            modifier = Modifier.background(Color.Blue.copy(0.5f)),
        ) { measurables, constraints ->
            val placeables = measurables.mapIndexed { index, measurable ->
                val event = itemData[index]
                val eventWidth = CELL_WIDTH.toPx().toInt() * event.columnSpan
                val eventHeight = CELL_HEIGHT.toPx().toInt() * event.duration
                measurable.measure(
                    constraints.copy(
                        minWidth = eventWidth,
                        maxWidth = eventWidth,
                        minHeight = eventHeight,
                        maxHeight = eventHeight
                    )
                )
            }

            // 直接使用父容器的最大宽度，确保与网格层对齐
            val layoutWidth = constraints.maxWidth
            val layoutHeight = constraints.constrainHeight(CELL_HEIGHT.toPx().toInt() * 24)

            layout(width = layoutWidth, height = layoutHeight) {
                placeables.forEachIndexed { index, placeable ->
                    val event = itemData[index]
                    val x = event.columnIndex * CELL_WIDTH.toPx().toInt()
                    val y = event.startRowIndex * CELL_HEIGHT.toPx().toInt()
                    placeable.place(x = x, y = y)
                }
            }
        }
    }
}

主布局中事件层调用示例

EventLayout(
    showLayout = true,
    itemData = listOf(
        CalendarEvent(columnIndex = 0, startRowIndex = 1, duration = 1),
        CalendarEvent(columnIndex = 2, startRowIndex = 3, duration = 2, columnSpan = 2)
    )
) {
    itemData.forEach { event ->
        Box(
            modifier = Modifier
                .background(colorResource(android.R.color.holo_orange_light))
                .padding(4.dp)
        ) {
            Text("日程事件")
        }
    }
}

内容的提问来源于stack exchange，提问作者Hosein.m.barazandeh