本頁面由 Cloud Translation API 翻譯而成。

滑桿

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

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

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

軌道：軌道是代表滑桿可取值範圍的水平長條。
Thumb：Thumb 是滑桿上可拖曳的控制項元件，可讓使用者在軌道定義的範圍內選取特定值。
刻度標記：刻度標記是選用的視覺標記或指標，會沿著滑桿的軌跡顯示。

基本導入

如需完整的 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

此實作方式如下所示：

滑桿元件，其值選取了軌道上大約四分之三的範圍。 — **圖 2.** 滑桿的基本實作方式。

進階導入

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

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

範圍滑桿元件，已選取兩個值。標籤會顯示所選範圍的上限和下限。 — **圖 4.** 範圍滑桿的實作方式。

其他資源

Material UI 說明文件