Jetpack Compose Scrollbar

Question

有没有办法添加滚动条来添加LazyColumn (ScrollableColumn已被弃用)。Javadoc在Jetpack Compose中没有提到任何关于Scrollbar的内容。

为了澄清，这是我想要实现的设计：

​

有没有可能在Jetpack Compose中这样做呢？或者没有对Scrollbar的支持？

Answer 1

这实际上是可能的(他们已经在LazyListState中添加了更多的东西)，而且很容易做到。这是一个非常原始的滚动条(总是可见/不能拖动/等等)，它使用项目索引来确定拇指的位置，所以在只有几个项目的列表中滚动时可能看起来不太好：

  @Composable
  fun Modifier.simpleVerticalScrollbar(
    state: LazyListState,
    width: Dp = 8.dp
  ): Modifier {
    val targetAlpha = if (state.isScrollInProgress) 1f else 0f
    val duration = if (state.isScrollInProgress) 150 else 500

    val alpha by animateFloatAsState(
      targetValue = targetAlpha,
      animationSpec = tween(durationMillis = duration)
    )

    return drawWithContent {
      drawContent()

      val firstVisibleElementIndex = state.layoutInfo.visibleItemsInfo.firstOrNull()?.index
      val needDrawScrollbar = state.isScrollInProgress || alpha > 0.0f

      // Draw scrollbar if scrolling or if the animation is still running and lazy column has content
      if (needDrawScrollbar && firstVisibleElementIndex != null) {
        val elementHeight = this.size.height / state.layoutInfo.totalItemsCount
        val scrollbarOffsetY = firstVisibleElementIndex * elementHeight
        val scrollbarHeight = state.layoutInfo.visibleItemsInfo.size * elementHeight

        drawRect(
          color = Color.Red,
          topLeft = Offset(this.size.width - width.toPx(), scrollbarOffsetY),
          size = Size(width.toPx(), scrollbarHeight),
          alpha = alpha
        )
      }
    }
  }

更新:我已经更新了代码。我已经知道如何在滚动或不滚动LazyColumn时显示/隐藏滚动条，并添加淡入/淡出动画。我还将drawBehind()更改为drawWithContent()，因为前者在内容后面绘制，所以在某些情况下，它可能会绘制在滚动条的顶部，这很可能不是我们所希望的。

Answer 2

这在LazyColumn/LazyRow中是不可能的。

它计划在某个时候添加，但还没有具体的计划发布。我会在可能的时候更新这个答案。

Answer 3

这可能会有帮助：https://github.com/sahruday/Carousel是一种类似于Compose as Composable function的方法。

可以与CarouselScrollState (在ScrollState上添加的参数)和LazyList一起使用。

如果高度是变化的或混合项目，我不建议添加滚动指示器。