TiTi Side Project | TimeTable 격자 이슈 해결

위 사진을 보면 TiTi 프로젝트에서 TimeTable의 격자가 제대로 그려지지 않는 상황이 발생하고 있습니다.

Compose의 Preview에서는 잘 나오지만 실제 runtime에서는 위와 같이 이슈가 발생하고 있습니다.

fun DrawScope.drawGrid() {
    val itemWidth = size.width / 7
    val itemHeight = size.height / 24

    var startX = 0f
    var startY = 0f

    repeat(7 * 24) { idx ->
        drawRect(
            color = Color(0x80626262),
            topLeft = Offset(
                x = startX,
                y = startY,
            ),
            size = Size(itemWidth, itemHeight),
            style = Stroke(width = 1f),
        )
        startX += itemWidth

        if (startX == itemWidth * 7) {
            startX = 0f
            startY += itemHeight
        }
    }
}

Canvas를 통해 TimeTable의 격자를 그리는 과정에서, 부모의 크기를 고정시켜도 런타임에서 격자가 제대로 그려지지 않는 문제가 발생했습니다.

격자를 그리는 drawGrid() 메서드를 살펴보니, startX와 startY가 recomposition 상황에서 state를 제대로 유지하지 못하여 올바르지 않은 격자를 그리는 것으로 확인되었습니다.

fun DrawScope.drawGrid() {
    val itemWidth = size.width / 7
    val itemHeight = size.height / 24

    repeat(7 * 24) { idx ->
        val startX = (idx % 7) * itemWidth
        val startY = (idx / 7) * itemHeight

        drawRect(
            color = Color(0x80626262),
            topLeft = Offset(
                x = startX,
                y = startY,
            ),
            size = Size(itemWidth, itemHeight),
            style = Stroke(width = 1f),
        )
    }
}

 

위와 같이 repeat 람다 안에서 startX와 startY를 초기화하는 코드를 수정한 후, 격자가 올바르게 그려지는 것을 확인했습니다.