如何用Jetpack compose实现轮播（卡片滑块）？

Question

我一直在使用这个库在View系统中实现轮播。 如何在 Jetpack Compose 中实现轮播？

Answer 1

嗯...这取决于您需要从该库中获得哪些功能，但是对于“简单”寻呼机，您可以使用寻呼伴奏库。

https://github.com/google/accompanist/tree/main/pager

您可以在这里查看文档：

https://google.github.io/accompanist/pager/

Answer 2

尝试这种方式使用

HorizontalPager

@Composable
fun BuildLoginSlider() {
  val pagerState = rememberPagerState(initialPage = 1)
  val sliderList = listOf()

  HorizontalPager(
    count = sliderList.size, state = pagerState,
    contentPadding = PaddingValues(horizontal = 150.dp),
    verticalAlignment = Alignment.CenterVertically,
  ) { page ->
    Card(
      colors = CardDefaults.cardColors(Color.Transparent),
      shape = RoundedCornerShape(10.dp),
      elevation = CardDefaults.cardElevation(0.dp),
      modifier = Modifier
        .graphicsLayer {

          val pageOffset = calculateCurrentOffsetForPage(page).absoluteValue

          lerp(
            start = 0.85f,
            stop = 1f,
            fraction = 1f - pageOffset.coerceIn(0f, 1f)
          ).also { scale ->
            scaleX = scale
            scaleY = scale
          }
          alpha = lerp(
            start = 0.5f,
            stop = 1f,
            fraction = 1f - pageOffset.coerceIn(0f, 1f)
          )
        }
      // .aspectRatio(0.5f)
    ) {
      AsyncImage(
        model = Builder(LocalContext.current)
          .data(sliderList[page])
          .crossfade(true)
          .scale(FILL)
          .build(),
        contentDescription = null,
        modifier = Modifier
          .offset {
            // Calculate the offset for the current page from the
            // scroll position
            val pageOffset =
              [email protected](page)
            // Then use it as a multiplier to apply an offset
            IntOffset(
              x = (70.dp * pageOffset).roundToPx(),
              y = 0,
            )
          }
      )
    }

  }
}

输出

Answer 3

使用 Jetpack Compose 小部件 https://developer.android.com/reference/kotlin/androidx/constraintlayout/helper/widget/Carousel