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

Question

我正在使用LazyColumnand Rows 进行网格布局。我还想一次缩放一个元素。当缩放的元素在被（至少部分）剪裁时位于边缘时，就会出现问题。

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

这是预期的行为（因此我的代码有问题）还是 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() },
        )
    }
}

结果：

标签： androidandroid-jetpack-compose

Answer 1

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

我没有使用Modifier.padding()onLazyColumn我使用了LazycolumnscontentPadding参数：

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

我需要做但没有立即意识到的是禁用clipToPadding. 我根据这个答案找到了解决方案。