Jetpack Compose Discrete Slider 未显示确切数字

Question

我已经实现了一个离散的 slider，如下所示：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourProjectNameTheme(darkTheme = false) {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Column(
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(all = 4.dp),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        MyUI()
                    }
                }
            }
        }
    }
}

@Composable
private fun MyUI() {

    var sliderValue by remember {
        mutableStateOf(1f)
    }

    Slider(
        value = sliderValue,
        onValueChange = { sliderValue_ ->
            sliderValue = sliderValue_
        },
        onValueChangeFinished = {
            // this is called when the user completed selecting the value
        },
        valueRange = 1f..21f,
        steps = 6
    )

    Text(text = sliderValue.toString())
}

output：

当我点击刻度线时，我期待确切的数字（如 3、6、9、12、15、18）。 但是，它显示的是最接近的浮点值。 如何解决这个问题？

Answer 1

steps属性如果大于 0，则指定离散值的数量，在整个值范围内均匀分布。

在你的情况下你必须使用valueRange = 0f..21f

    Slider(
        //...
        valueRange = 0f..21f,
        steps = 6
    )

Answer 2

那是因为你是从1而不是0开始的。请相应地规划值和步骤，

@Preview
@Composable
private fun MyUI() {

    var sliderValue by remember {
        mutableStateOf(0)
    }

    Slider(value = sliderValue.toFloat(), onValueChange = { sliderValue_ ->
        sliderValue = sliderValue_.toInt()
    }, onValueChangeFinished = {
        // this is called when the user completed selecting the value
    }, valueRange = 0f..21f, steps = 6
    )

    Text(text = sliderValue.toString())
}