如何在 Jetpack Compose 中从卡片中显示 lazylist 项目

Question

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

预先感谢您的帮助。

Answer 1

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

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)
        )
    }
}

结果：

如何在 Jetpack Compose 中从卡片中显示 lazylist 项目

How to show items of lazylist out of the Card in Jetpack Compose

android

scroll

lazylist

kotlin

android-jetpack-compose