滑桿

Slider 可組合項可讓使用者從某個範圍內的值選取。您可以使用滑桿讓使用者執行下列操作：

• 調整使用範圍值 (例如音量和亮度) 的設定。
• 篩選圖表中的資料，就像設定價格範圍一樣。
• 使用者輸入內容，例如在評論中設定評分。

滑桿包含軌道、指標、值標籤和刻度標記：

• Track：軌跡是水平列，代表滑桿可採用的值範圍。
• 喜歡：拇指是滑桿上的可拖曳控制元素，可讓使用者選取歷程定義範圍內的特定值。
• 勾號：勾號是可顯示在滑桿軌跡上的選用視覺標記或指標。

基本導入

如需完整 API 定義，請參閱 Slider 參考資料。以下列舉一些 Slider 可組合函式的金鑰參數：

• value：滑桿目前的值。
• onValueChange：每次值變更時呼叫的 lambda。
• enabled：是一個布林值，指出使用者是否能與滑桿互動。

以下範例是簡單滑桿。藉此讓使用者選取 0.0 到 1.0 的值。由於使用者可以選取該範圍內任何值，因此滑桿是 Continuous。

@Preview
@Composable
fun SliderMinimalExample() {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it }
        )
        Text(text = sliderPosition.toString())
    }
}
Slider.kt

實作內容如下所示：

進階導入

實作較複雜的滑桿時，您也可以另外使用下列參數。

• colors：SliderColors 的執行個體，可讓您控制滑桿顏色。
• valueRange：滑桿可採用的值範圍。
• steps：大拇指對齊的滑桿凹槽數量。

下列程式碼片段實作一個包含三個步驟的滑桿，範圍從 0.0 到 50.0。由於拇指會與每個步驟貼齊，因此這個滑桿會分開。

@Preview
@Composable
fun SliderAdvancedExample() {
    var sliderPosition by remember { mutableFloatStateOf(0f) }
    Column {
        Slider(
            value = sliderPosition,
            onValueChange = { sliderPosition = it },
            colors = SliderDefaults.colors(
                thumbColor = MaterialTheme.colorScheme.secondary,
                activeTrackColor = MaterialTheme.colorScheme.secondary,
                inactiveTrackColor = MaterialTheme.colorScheme.secondaryContainer,
            ),
            steps = 3,
            valueRange = 0f..50f
        )
        Text(text = sliderPosition.toString())
    }
}
Slider.kt

實作內容如下所示：

範圍滑桿

您也可以使用專屬的 RangeSlider 可組合函式。這可讓使用者選取兩個值。這在使用者想選取最低和最高價格時相當實用。

以下範例是相對簡單明瞭的連續範圍滑桿範例。

@Preview
@Composable
fun RangeSliderExample() {
    var sliderPosition by remember { mutableStateOf(0f..100f) }
    Column {
        RangeSlider(
            value = sliderPosition,
            steps = 5,
            onValueChange = { range -> sliderPosition = range },
            valueRange = 0f..100f,
            onValueChangeFinished = {
                // launch some business logic update with the state you hold
                // viewModel.updateSelectedSliderValue(sliderPosition)
            },
        )
        Text(text = sliderPosition.toString())
    }
}
Slider.kt

其他資源

• Material Design 使用者介面說明文件