Android 中的卡片輪播與 Jetpack Compose

Question

我想創建可組合的 function，它可以顯示如下圖所示的元素（卡片）。 有什么辦法可以用 LazyList 或 LazyColumn 做到這一點

我試過谷歌伴奏的 VerticalPager，但我不知道如何像圖片上那樣設置它們

Answer 1

我也想在 Compose 中制作輪播，但我找不到，所以我做了。 結果並不完美（太高會導致身高問題），但可以舉個例子。

我制作了一個無限的 LazyColumn 並更改了內容的比例和 zIndex 以產生輪播效果。

這是我的 function：

@Composable
fun Carousel(
  count: Int,
  parentModifier: Modifier = Modifier.fillMaxWidth().height(540.dp),
  contentWidth: Dp,
  contentHeight: Dp,
  content: @Composable (modifier: Modifier, index: Int) -> Unit
) {
val listState = rememberLazyListState(Int.MAX_VALUE / 2)

BoxWithConstraints(
    modifier = parentModifier
) {
    val halfRowWidth = constraints.maxWidth / 2

    LazyColumn(
        state = listState,
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(top = 10.dp),
        verticalArrangement = Arrangement.spacedBy(-contentHeight / 2),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        items(
            count = Int.MAX_VALUE,
            itemContent = { globalIndex ->
                val scale by remember {
                    derivedStateOf {
                        val currentItem = listState.layoutInfo.visibleItemsInfo.firstOrNull { it.index == globalIndex } ?: return@derivedStateOf 0.85f

                        (1f - minOf(1f, abs(currentItem.offset + (currentItem.size / 2) - halfRowWidth).toFloat() / halfRowWidth) * 0.25f)
                    }
                }

                content(
                    index = globalIndex % count,
                    modifier = Modifier
                        .width(contentWidth)
                        .height(contentHeight)
                        .scale(scale)
                        .zIndex(scale * 10)
                )
            }
        )
    }
  }
}

我這樣稱呼 function：

Carousel(
   count = list.size,
   contentWidth = maxWidth,
   contentHeight = 200.dp,
   content = { modifier, index ->
        MyComposableContent(
            item = list[index],
            modifier = modifier
        )
   }
)

輪播組合結果