滑桿

Slider 可組合項可讓使用者從多種值中選擇。您可使用滑桿，讓使用者執行下列操作：

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

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

• 追蹤：軌跡是水平長條，代表滑桿可使用的值範圍。
• 指標：拇指是滑桿上的可拖曳控制項元素，可讓使用者選取軌跡定義範圍內的特定值。
• 勾號：勾號是選用的視覺標記或指標，會顯示在滑桿軌道上。

基本導入

如需完整的 API 定義，請參閱 Slider 參考資料。Slider 可組合項的部分主要參數如下：

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

以下範例是簡單明瞭的滑桿。可讓使用者選取 0.0 到 1.0 的值。由於使用者可以選擇該範圍中的任何值，因此滑桿為「連續」。

@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 UI 文件