android - 如何在 Jetpack Compose 中显示卡片外的惰性列表项目

Question

我在卡片中有 LazyRow，并且我希望滚动项目出现在卡片之外， 你能指导一下我吗？我该怎么做？

预先感谢您的帮助。

Answer 1

当您需要在Card上显示某些内容时，可以使用Box。您可以计算出与卡匹配所需的填充量。在这种情况下，将 Card 视为背景 View 。

val outerPadding = 20.dp
val innerPadding = 20.dp
Box {
    Card(
        backgroundColor = Color.White,
        elevation = 10.dp,
        modifier = Modifier.padding(outerPadding).aspectRatio(1f).fillMaxWidth()
    ) {

    }
    Column(
        Modifier
            .matchParentSize()
            .padding(vertical = outerPadding + innerPadding)
    ) {
        Text(
            "Your title",
            modifier = Modifier.padding(horizontal = outerPadding + innerPadding)
        )
        HorizontalPager(
            count = 10,
            contentPadding = PaddingValues(horizontal = outerPadding + innerPadding),
            itemSpacing = innerPadding / 2,
            modifier = Modifier.weight(1f)
        ) {
            Box(Modifier.fillMaxSize().background(Color.Green))
        }
        Text(
            "Your indicator",
            modifier = Modifier
                .padding(horizontal = outerPadding + innerPadding)
                .align(Alignment.CenterHorizontally)
        )
    }
}

结果: