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

滑桿

使用者可以藉由 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

實作方式如下：

滑桿元件，值大約選在軌道四分之三的位置。 — **圖 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

實作方式如下：

分段式滑桿，範圍為 0 到 50，並以等間隔顯示五個勾號。拇指位於第二個刻度附近，表示選取的亮度為 16。 — **圖 3.** 具有步驟和設定值範圍的滑桿。

範圍滑桿

您也可以使用專屬的 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 文件