Jetpack Compose LazyColumn 背景太多

Question

我有一个带有一些值的 LazyList：

LazyColumn(
        modifier = modifier
            .padding(start = 20.dp, end = 20.dp)
            .clip(RoundedCornerShape(10.dp))
            .background(color = Color.Red),
        state = listState,
        contentPadding = PaddingValues(top = 15.dp, bottom = 40.dp)
    ) {
        items(collectionListState.value) { collection ->
            CollectionListItem(
                collectionName = collection,
                navigateToCollection = { navController.navigate("DcodeList/${collection}") }
            )
            if (collectionListState.value.indexOf(collection) < collectionListState.value.lastIndex) {
                Divider(
                    modifier = Modifier
                        .padding(
                            start = 6.dp,
                            end = 6.dp,
                            top = 2.dp,
                            bottom = 2.dp
                        ),
                    thickness = 2.dp
                )
            }
        }

    }

我想仅将背景设置为我的项目，而不设置 contentPadding。看起来很糟糕。 我可以仅将背景应用于项目吗？ 或者还有其他选择可以让我在没有 contentPadding 的情况下达到相同的结果吗？

不是世界上最重要的东西，但它看起来会更好。

我看到有一个 Modifier.clipToBounds，但我要么没有足够的能力以正确的方式使用它，要么它有不同的目的。

看起来怎么样
它应该是什么样子

Answer 1

听起来您调整项目装饰和填充的方法是错误的。

试试这个代码。这正是您想要的。

LazyColumn(
    modifier = modifier
        .padding(start = 20.dp, end = 20.dp)
        .clip(RoundedCornerShape(10.dp))
        .background(color = Color.Red)
) {
    items(8) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(60.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(text = "hello")
        }
        HorizontalDivider(thickness = 2.dp)
    }
}