如何在 Jetpack Compose 中從卡片中顯示 lazylist 項目

Question

我在卡片中有 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)
        )
    }
}

結果：