Android原生Jetpack Compose是否内置数字选择器？需实现示例样式

原生Jetpack Compose并没有提供开箱即用的滚轮式数字选择器组件，但可以基于现有基础组件快速实现类似图中的效果。

核心实现思路 #

使用VerticalPager（来自androidx.compose.foundation:foundation-pager库）作为滚动载体，配合状态管理控制选中数字，再通过样式调整模拟滚轮选择器的视觉效果。

示例代码 #

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.pager.VerticalPager
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

@Composable
fun NumberPicker(
    minValue: Int = 0,
    maxValue: Int = 100,
    initialValue: Int = 50,
    onValueChange: (Int) -> Unit
) {
    val pagerState = rememberPagerState(
        initialPage = initialValue - minValue,
        pageCount = { maxValue - minValue + 1 }
    )

    // 滚动结束后同步选中值
    LaunchedEffect(pagerState.currentPage) {
        onValueChange(minValue + pagerState.currentPage)
    }

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(120.dp)
    ) {
        VerticalPager(
            state = pagerState,
            modifier = Modifier.align(Alignment.Center)
        ) { page ->
            val number = minValue + page
            Text(
                text = number.toString(),
                fontSize = if (page == pagerState.currentPage) 24.sp else 18.sp,
                fontWeight = if (page == pagerState.currentPage) FontWeight.Bold else FontWeight.Normal,
                color = if (page == pagerState.currentPage) Color.Black else Color.Gray,
                modifier = Modifier.align(Alignment.Center)
            )
        }

        // 添加上下渐变遮罩，模拟滚轮视觉效果
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(40.dp)
                .align(Alignment.TopCenter)
                .background(
                    brush = Brush.verticalGradient(
                        colors = listOf(Color.White, Color.Transparent)
                    )
                )
        )
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(40.dp)
                .align(Alignment.BottomCenter)
                .background(
                    brush = Brush.verticalGradient(
                        colors = listOf(Color.Transparent, Color.White)
                    )
                )
        )
    }
}

// 使用示例
@Composable
fun NumberPickerDemo() {
    var selectedNumber by rememberSaveable { mutableStateOf(50) }
    NumberPicker(
        minValue = 0,
        maxValue = 100,
        initialValue = selectedNumber,
        onValueChange = { selectedNumber = it }
    )
}

关键细节说明 #

• 状态同步：通过LaunchedEffect监听PagerState的currentPage变化，将页面索引转换为对应数字后回调给外部。
• 视觉区分：选中的数字使用更大字号、加粗和深色，未选中项用灰色和常规字号，突出当前选择。
• 渐变遮罩：上下添加白色到透明的渐变层，让中间选中区域更突出，模拟传统滚轮选择器的视觉效果。

内容的提问来源于stack exchange，提问作者Tippu Fisal Sheriff