滑桿

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

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

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

  • 軌道:軌道是代表滑桿可取值範圍的水平長條。
  • Thumb:Thumb 是滑桿上可拖曳的控制項元件,可讓使用者在軌道定義的範圍內選取特定值。
  • 刻度標記:刻度標記是選用的視覺標記或指標,會沿著滑桿的軌跡顯示。
滑桿,包含滑桿指標、軌道和勾號。
圖 1. 滑桿的實作方式。

基本導入

如需完整的 API 定義,請參閱 Slider 參考資料。Slider 可組合項的一些重要參數如下:

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

以下範例是簡單的滑桿。這樣一來,使用者就能從 0.01.0 中選取值。由於使用者可以選取該範圍內的任何值,因此滑桿是「連續」

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

此實作方式如下所示:

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

進階導入

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

  • colorsSliderColors 的執行個體,可讓您控制滑桿顏色。
  • valueRange:滑桿可用的值範圍。
  • steps:大拇指對齊的滑桿凹槽數量。

以下程式碼片段會實作具有三個步驟的滑桿,範圍從 0.050.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())
    }
}

實作方式如下:

在這裡輸入替代文字
圖 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())
    }
}

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

其他資源