Jetpack Compose 分页器 Pager

如需以左右或上下方式浏览内容，您可以分别使用 [HorizontalPager] 和 [VerticalPager] 可组合项。这些可组合项的功能与视图系统中的 [ViewPager] 类似。默认情况下，HorizontalPager 占据屏幕的整个宽度，VerticalPager 占据整个高度，并且分页器一次仅快速滑动一页。这些默认值均可配置。

@OptIn(ExperimentalFoundationApi::class)
@Composable
private fun example1() {
  // Display 10 items
  val pagerState = rememberPagerState(pageCount = {
        10
  })
  val fontColors = arrayListOf(Color.White, Color.White, Color.Black, Color.White, Color.White,Color.Black)
  val bgColors = arrayListOf(Color.Black, Color.Gray, Color.Green, Color.Blue, Color.Red,Color.Yellow)
  Column {
      customTitle(title = "HorizontalPager 效果")
      HorizontalPager(state = pagerState) { page ->
          Box(modifier = Modifier
              .fillMaxWidth()
              .height(200.dp)
              .background(bgColors[page % bgColors.size])) {
              // Our page content
              Text(
                  modifier = Modifier.align(Alignment.Center),
                  text = "Page: $page",
                  fontSize = 20.sp,
                  color = fontColors[page % fontColors.size],
              )
          }
      }      
  }
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
private fun example2() {
  // Display 10 items
  val pagerState = rememberPagerState(pageCount = {
        10
  })
  val fontColors = arrayListOf(Color.White, Color.White, Color.Black, Color.White, Color.White,Color.Black)
  val bgColors = arrayListOf(Color.Black, Color.Gray, Color.Green, Color.Blue, Color.Red,Color.Yellow)
  Column {
      customTitle(title = "HorizontalPager 自定义效果")
      HorizontalPager(state = pagerState) { page ->
          Card(
              modifier = Modifier
                  .graphicsLayer {
                      val pageOffset = (
                              (pagerState.currentPage - page) + pagerState
                                  .currentPageOffsetFraction
                              ).absoluteValue

                      // 动画控制 scaleX + scaleY,  大小范围 85% ~ 100%
                      lerp(
                          start = 0.85f,
                          stop = 1f,
                          fraction = 1f - pageOffset.coerceIn(0f, 1f)
                      ).also { scale ->
                          scaleX = scale
                          scaleY = scale
                      }
                      // 动画控制 alpha, 范围 50% ~ 100%
                      alpha = lerp(
                          start = 0.5f,
                          stop = 1f,
                          fraction = 1f - pageOffset.coerceIn(0f, 1f)
                      )
                  }
                  .fillMaxWidth()
                  .padding(10.dp),
              shape = RoundedCornerShape(17.dp),
              ) {
              Box(modifier = Modifier
                  .fillMaxWidth()
                  .height(200.dp)
                  .background(bgColors[page % bgColors.size])) {
                  // Our page content
                  Text(
                      modifier = Modifier.align(Alignment.Center),
                      text = "Page: $page",
                      fontSize = 20.sp,
                      color = fontColors[page % fontColors.size],
                  )
              }
          }
      }
  }
}

上一篇 Jetpack Compose 快捷信息栏 SnackbarHost

下一篇 Jetpack Compose 列表