如何在Jetpack Compose中实现类似iOS日期选择器的循环滚动滚轮？

实现思路 #

• 通过复制首尾元素实现滚动循环效果，核心基于LazyColumn实现滚动交互逻辑
• 计算滚动偏移量锁定选中项，每次滚动结束后自动吸附到最近的item位置
• 添加选中态放大、未选中态半透明的渐变效果，模拟iOS滚轮的视觉层次
• 中间绘制分割线标识选中区域，和系统iOS选择器样式对齐

注意：rememberSnapFlingBehavior 需要依赖 Compose Material3 1.2.0 及以上版本，低版本可自定义吸附逻辑替代。

核心组件代码 #

@Composable
fun LoopWheelPicker(
    items: List<String>,
    selectedIndex: Int,
    onIndexSelected: (Int) -> Unit,
    modifier: Modifier = Modifier,
    visibleItemCount: Int = 5, // 可见item数量，建议设置为奇数
    itemHeight: Dp = 40.dp // 单个item的固定高度
) {
    val extendedItems = remember(items) {
        // 首尾各插入一份相邻元素实现无限滚动效果
        listOf(items.last()) + items + items.first()
    }
    val listState = rememberLazyListState(
        initialFirstVisibleItemIndex = selectedIndex + 1 // 跳过首部插入的重复元素
    )
    val itemHeightPx = with(LocalDensity.current) { itemHeight.toPx() }

    // 滚动结束后自动吸附到最近的选中项
    LaunchedEffect(listState.isScrollInProgress) {
        if (!listState.isScrollInProgress) {
            val offset = listState.firstVisibleItemScrollOffset
            val index = listState.firstVisibleItemIndex
            val targetIndex = if (offset > itemHeightPx / 2) index + 1 else index
            // 边界校正，实现滚动循环
            val correctedIndex = when (targetIndex) {
                0 -> extendedItems.size - 2
                extendedItems.size - 1 -> 1
                else -> targetIndex
            }
            listState.animateScrollToItem(correctedIndex, 0)
            onIndexSelected(correctedIndex - 1)
        }
    }

    Box(modifier = modifier.height(itemHeight * visibleItemCount)) {
        LazyColumn(
            state = listState,
            modifier = Modifier.fillMaxSize(),
            flingBehavior = rememberSnapFlingBehavior(lazyListState = listState)
        ) {
            items(extendedItems.size) { index ->
                val isSelected = index == listState.firstVisibleItemIndex + visibleItemCount / 2 + 1
                Box(
                    modifier = Modifier
                        .height(itemHeight)
                        .fillMaxWidth()
                        .alpha(if (isSelected) 1f else 0.5f)
                        .scale(if (isSelected) 1.1f else 1f),
                    contentAlignment = Alignment.Center
                ) {
                    Text(
                        text = extendedItems[index],
                        fontSize = if (isSelected) 18.sp else 16.sp,
                        color = if (isSelected) Color.Black else Color.Gray
                    )
                }
            }
        }
        // 绘制选中区域上下分割线
        Column(Modifier.fillMaxSize()) {
            Spacer(modifier = Modifier.height(itemHeight * (visibleItemCount / 2)))
            Divider(color = Color.LightGray, thickness = 1.dp)
            Spacer(modifier = Modifier.height(itemHeight))
            Divider(color = Color.LightGray, thickness = 1.dp)
        }
    }
}

日期选择器使用示例 #

@Composable
fun DateWheelPickerDemo() {
    val years = (1990..2030).map { it.toString() }
    val months = (1..12).map { it.toString() }
    val days = (1..31).map { it.toString() }
    
    var selectedYear by remember { mutableIntStateOf(2024) }
    var selectedMonth by remember { mutableIntStateOf(5) }
    var selectedDay by remember { mutableIntStateOf(20) }

    Row(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp),
        horizontalArrangement = Arrangement.SpaceEvenly
    ) {
        LoopWheelPicker(
            items = years,
            selectedIndex = years.indexOf(selectedYear.toString()),
            onIndexSelected = { selectedYear = years[it].toInt() },
            modifier = Modifier.weight(1f)
        )
        LoopWheelPicker(
            items = months,
            selectedIndex = selectedMonth - 1,
            onIndexSelected = { selectedMonth = months[it].toInt() },
            modifier = Modifier.weight(1f)
        )
        LoopWheelPicker(
            items = days,
            selectedIndex = selectedDay - 1,
            onIndexSelected = { selectedDay = days[it].toInt() },
            modifier = Modifier.weight(1f)
        )
    }
}

自定义优化提示 #

• 可调整visibleItemCount和itemHeight参数修改滚轮显示密度
• 可替换item内的Text为自定义布局，实现其他类型的滚轮选择器
• 联动场景下可监听选中值动态更新下级列表数据源，比如根据年、月自动计算当月天数

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