如何在Jetpack Compose中实现此类数字选择器？

自定义Fling Behavior修正锚定逻辑 #

默认带Fling Behavior的Lazy List没有针对选中条目做锚定优化，你可以自定义一个SnapFlingBehavior，让滚动结束时自动将最近的条目对齐到视口中心，并标记为选中状态：

// Jetpack Compose 示例
class CustomSnapFlingBehavior(private val itemHeight: Dp) : FlingBehavior {
    override suspend fun ScrollScope.performFling(initialVelocity: Float): Float {
        val targetOffset = calculateTargetOffset(initialVelocity, itemHeight.toPx())
        scrollTo(targetOffset)
        // 标记对应位置的条目为选中状态
        return 0f
    }

    private fun calculateTargetOffset(velocity: Float, itemHeightPx: Float): Float {
        val currentPosition = scrollState.value
        val targetIndex = (currentPosition / itemHeightPx + if (velocity > 0) 0.5f else -0.5f).roundToInt()
        return targetIndex * itemHeightPx
    }
}

使用时给LazyList设置这个自定义Behavior，同时维护一个选中索引状态，滚动结束后更新即可。

直接使用第三方成熟库 #

没必要重复造轮子，移动端有很多现成的滚动选择组件：

• Android Jetpack Compose：可以用com.github.skydoves:compose-number-picker，支持自定义样式和滚动锚定
• 原生Android：系统自带的NumberPicker组件，直接在布局中使用即可
• iOS：UIPickerView或者SwiftUI的Picker搭配WheelPickerStyle

手动监听滚动状态实现选中逻辑 #

如果不想依赖第三方库，也可以给LazyList添加滚动状态监听：

val scrollState = rememberLazyListState()
LaunchedEffect(scrollState.isScrollInProgress) {
    if (!scrollState.isScrollInProgress) {
        // 滚动停止时，计算视口中心对应的条目索引
        val centerY = scrollState.layoutInfo.viewportEndOffset / 2f
        val targetItem = scrollState.layoutInfo.visibleItemsInfo.find {
            it.offset + it.size / 2f == centerY
        }
        targetItem?.let {
            selectedIndex = it.index
            // 平滑滚动到该条目中心
            scrollState.animateScrollToItem(it.index)
        }
    }
}

内容的提问来源于stack exchange，提问作者Harsh Vardhan Tewari