Question

我正在尝试编写一个类似日历/excel 的屏幕，您可以在其中对角滚动内容并且列/行标题保持原位。

它使用带有可放置元素的自定义布局，其中布局是整个可绘制空间，然后将事件绘制在需要它们的框中。

例如

第 0 列从 X=0 Y=0 开始，每列都有一定的宽度。因此，第 1 列在 0 处绘制，第 2 列在 20 处绘制，第 3 列在 40 处以此类推。

一切正常，直到内容大小变得大于屏幕的可见宽度，从位置 0 开始的内容开始被绘制到屏幕外，例如在 -20 处。几乎就像是将内容居中...

以下是尺寸合身但不合身时发生的一些照片

我认为它可能与自定义布局中的对齐线有关，但如果确实如此，我无法弄清楚它想让我做什么...我也尝试过对列设置进行对齐以开始无济于事。

这是一个简单的问题示例

@Composable
fun ScheduleTest(columnList: List<String>) {
    val headerWidth = 150

    Column {
        HeaderTest(columnList, headerWidth)
    }
}


@Composable
fun HeaderTest(
    columnList: List<String>,
    headerWidth: Int,
    headerContent: @Composable (title: String) -> Unit = { title ->
        Text(title)
    },
) {
    val numberOfHeaders = columnList.count()

    Layout(
        content = {
            columnList.forEach { header ->
                Box {
                    headerContent(header)
                }
            }
        }
    ) { measureables, constraints ->

        val height = 45.dp.roundToPx()
        val totalWidth = headerWidth * numberOfHeaders

        val placeWithHeader = measureables.map { measurable ->
            val placeable = measurable.measure(
                constraints.copy(
                    minWidth = headerWidth,
                    maxWidth = headerWidth,
                    minHeight = height,
                    maxHeight = height,
                )
            )

            placeable
        }

        layout(width = totalWidth, height = height) {
            placeWithHeader.forEachIndexed { index, placeable ->
                val offset = index * headerWidth
                placeable.place(offset, 0)
            }
        }
    }
}

Answer 1

我在另一个论坛上得到了帮助，但他们没有在这里回答。

我没有限制主要布局的宽度和高度

val height = 45.dp.roundToPx()
val totalWidth = headerWidth * numberOfHeaders

<块引用>

layout 的约定是传给 layout 的 width/height 必须在约束范围内，如果你违反了，你的可衡量的受到约束，并且您的展示位置位于你父母安置你的地方

我需要给它添加约束

val height = 45.dp.roundToPx().coerceIn(constraints.minHeight, constraints.maxHeight)
val totalWidth = headerWidth * numberOfHeaders.coerceIn(constraints.minWidth, constraints.maxWidth)

当内容大于屏幕时，自定义布局在屏幕外绘制位置 0

1 个答案: