Question

我正在使用 LazyColumn 和 Row 制作网格布局。我也想一次缩放一个元素。当缩放元素位于边缘时会出现问题，因为它被（至少部分）剪裁了。

为什么它发生在顶部，而没有发生在侧面？如何纠正？

这是预期的行为（因此我的代码有问题）还是 Jetpack Compose 中的错误？

private const val NUMBER_OF_COLUMNS = 5
private val SPACING = 20.dp

@Composable
fun MainScreen(
    elements: List<String>,
) {
    LazyColumn(
        modifier = Modifier
            .background(Color.Blue)
            .padding(50.dp),
        verticalArrangement = Arrangement.Absolute.spacedBy(SPACING)
    ) {
        val numberOfRows = ceil(elements.size / NUMBER_OF_COLUMNS.toFloat()).roundToInt()
        for (rowIndex in 0 until numberOfRows) {
            item {
                Row(
                    horizontalArrangement = Arrangement.Absolute.spacedBy(SPACING)
                ) {
                    for (columnIndex in 0 until NUMBER_OF_COLUMNS) {
                        val itemIndex = (rowIndex * NUMBER_OF_COLUMNS) + columnIndex
                        if (itemIndex < elements.size) {
                            GridElement(
                                text = elements[itemIndex]
                            )
                        }
                    }
                }
            }
        }
    }
}

@Composable
private fun GridElement(
    text: String,
) {
    val scale by remember {
        mutableStateOf(
            if (text == "1" || text == "9" || text == "11") 1.6f else 1f
        )
    }
    val zIndex by remember {
        mutableStateOf(
            if (text == "1" || text == "9" || text == "11") 30f else 0f
        )
    }

    Card(
        modifier = Modifier
            .size(width = 130.dp, height = 100.dp)
            .graphicsLayer(
                scaleX = scale,
                scaleY = scale,
            )
            .zIndex(zIndex = zIndex),
        border = BorderStroke(width = 1.dp, Color.Red),
    ) {
        Text(text = text)
    }
}

@Preview(
    backgroundColor = 0x666666,
    widthDp = 900,
    heightDp = 500,
)
@Composable
private fun MainScreenPreview() {
    MaterialTheme {
        MainScreen(
            (1 until 14).map { it.toString() },
        )
    }
}

结果：

Answer 1

我找到了裁剪问题本身的解决方案：

我没有在 Modifier.padding() 上使用 LazyColumn，而是使用了 Lazycolumn 的 contentPadding 参数：

LazyColumn(
    modifier = Modifier
        .background(Color.Blue)
        .padding(50.dp),
    verticalArrangement = Arrangement.Absolute.spacedBy(SPACING),
    contentPadding = PaddingValues(50.dp),
)

我需要做但没有立即意识到的是禁用clipToPadding。我找到了基于 this answer 的解决方案。

填充剪辑缩放元素在顶部，但不是（真的）在侧面

1 个答案: