Jetpack Compose 滚动条

Question

有没有办法添加滚动条来添加LazyColumn（ScrollableColumn已弃用）。 Javadoc 没有提到有关 Jetpack Compose 中滚动条的任何内容。

澄清一下，这是我想要实现的设计：

现在还可以在 Jetpack Compose 中做到这一点吗？或者不支持滚动条？

Answer 1

这在 LazyColumn/LazyRow 中尚无法实现。

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

Answer 2

现在实际上是可能的（他们已经在 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() 因为前者在内容后面绘制，因此在某些情况下它可能会绘制在滚动条的顶部，这很可能是不可取的。