android - Jetpack Compose 滚动条

Question

有什么办法可以添加滚动条来添加LazyColumn (ScrollableColumn 已弃用)。 Javadoc 没有提及 Jetpack Compose 中的滚动条。
澄清一下，这是我要实现的设计:

甚至有可能在 Jetpack Compose 中做到这一点吗？还是不支持滚动条？

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