如何在 android jetpack compose 中制作滚动条视图

Question

我想要类似这张图片的东西。尝试了很多解决方案但没有结果。

Answer 1

我使用这段代码来显示页面滚动了多少

BoxWithConstraints() {
            val scrollState = rememberScrollState()
            val viewMaxHeight = maxHeight.value
            val columnMaxScroll = scrollState.maxValue
            val scrollStateValue = scrollState.value
            val paddingSize = (scrollStateValue * viewMaxHeight) / columnMaxScroll
            val animation = animateDpAsState(targetValue = paddingSize.dp)
            val scrollBarHeight = viewMaxHeight / items

            Column(
                Modifier
                    .verticalScroll(state = scrollState)
                    .fillMaxWidth(),
                verticalArrangement = Arrangement.spacedBy(8.dp),
            ) {
               if (scrollStateValue < columnMaxScroll) {
                Box(
                    modifier = Modifier
                        .paddingFromBaseline(animation.value)
                        .padding(all = 4.dp)
                        .height(scrollBarHeight.dp)
                        .width(4.dp)
                        .background(
                            color = MaterialTheme.colors.primary.copy(alpha = ContentAlpha.disabled),
                            shape = MaterialTheme.shapes.medium
                        )
                        .align(Alignment.TopEnd),
                ) {}
            }
      }
}

result image