Kotlin Multiplatform无原生滚动条？多平台添加滚动条方案求助

一、跨平台简易滚动条实现方案 #

1. 分平台适配实现 #

• Android：直接使用Compose官方Scrollbar组件，配合LazyColumn/LazyRow即可快速实现：

val lazyListState = rememberLazyListState()

LazyColumn(state = lazyListState) {
    items(100) {
        Text("Item $it", modifier = Modifier.padding(16.dp))
    }
}

Scrollbar(
    modifier = Modifier.align(Alignment.CenterEnd),
    adapter = rememberScrollbarAdapter(scrollState = lazyListState)
)

• iOS：由于官方及第三方库支持不足，可自定义轻量滚动条，核心逻辑是监听列表滚动进度并绘制可交互滑块：

val lazyListState = rememberLazyListState()
val scrollProgress by remember {
    derivedStateOf {
        val layoutInfo = lazyListState.layoutInfo
        if (layoutInfo.totalItemsCount == 0) 0f
        else {
            val visibleHeight = layoutInfo.viewportEndOffset - layoutInfo.viewportStartOffset
            val totalScrollRange = layoutInfo.totalItemsCount * layoutInfo.visibleItemsInfo.firstOrNull()?.size ?: visibleHeight
            (-layoutInfo.visibleItemsInfo.firstOrNull()?.offset ?: 0).toFloat() / maxOf(1f, (totalScrollRange - visibleHeight).toFloat())
        }
    }
}

Box(modifier = Modifier.fillMaxSize()) {
    LazyColumn(state = lazyListState) {
        items(100) { Text("Item $it", modifier = Modifier.padding(16.dp)) }
    }
    
    // 自定义滚动条滑块
    Box(
        modifier = Modifier
            .align(Alignment.CenterEnd)
            .width(8.dp)
            .fillMaxHeight()
            .padding(vertical = 8.dp)
    ) {
        Box(
            modifier = Modifier
                .align(Alignment.TopCenter)
                .width(6.dp)
                .height(40.dp)
                .background(Color.Gray.copy(alpha = 0.5f), RoundedCornerShape(3.dp))
                .offset(y = scrollProgress * (this@Box.size.height - 40.dp))
                .pointerInput(Unit) {
                    detectDragGestures { change, dragAmount ->
                        change.consume()
                        val newProgress = (scrollProgress + (dragAmount.y / (this@Box.size.height - 40.dp))).coerceIn(0f, 1f)
                        val totalItems = lazyListState.layoutInfo.totalItemsCount
                        val targetItem = (newProgress * totalItems).toInt().coerceIn(0, totalItems - 1)
                        coroutineScope.launch {
                            lazyListState.animateScrollToItem(targetItem)
                        }
                    }
                }
        )
    }
}

• 桌面端（Windows/Mac JVM）：直接使用Compose Desktop官方Scrollbar，写法与Android端完全一致，无需额外适配。

2. 封装跨平台通用组件 #

通过expect/actual机制封装统一的CommonScrollbar组件，减少重复代码：

1. 共享模块定义期望函数：

expect fun CommonScrollbar(
    adapter: ScrollbarAdapter,
    modifier: Modifier = Modifier
)

2. Android/桌面端实际实现：

actual fun CommonScrollbar(
    adapter: ScrollbarAdapter,
    modifier: Modifier
) {
    Scrollbar(modifier = modifier, adapter = adapter)
}

3. iOS端实际实现：
   将前面的自定义滚动条逻辑封装到actual函数中，上层调用无需关心平台差异。

二、跨平台滚动条无原生支持的原因 #

• 平台交互与视觉差异：各平台滚动条的交互逻辑、默认样式差异显著。比如iOS滚动条默认隐藏，仅滚动时显示；Android和桌面端支持常驻或自动隐藏模式。Compose Multiplatform需兼顾原生体验，统一实现的适配成本较高。
• 功能优先级排序：Compose Multiplatform的核心开发资源优先投入到基础UI组件、状态管理、平台互通等核心能力上，滚动条属于增强型组件，优先级相对靠后。
• 社区生态成熟度：目前iOS端Compose的生态完善度落后于Android和桌面端，第三方库的适配节奏较慢，导致针对iOS的成熟滚动条库较少。

内容的提问来源于stack exchange，提问作者joe1806772