滑桿

Slider 可組合函式可讓使用者從多種選項中選擇 輕鬆分配獎金您可以使用滑桿讓使用者執行下列操作：

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

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

  • 軌跡：軌跡是水平列，代表 滑桿可容納的值
  • 喜歡：拇指是位於滑桿上的可拖曳控制元素 可讓使用者選取 軌道。
  • 勾號：勾號是選用性質的視覺標記或指標， 。
包含拇指、軌跡和刻點的滑桿。
圖 1. 滑桿的實作。

基本導入

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

實作內容如下所示：

在這裡輸入替代文字
圖 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. 範圍滑桿的實作。

其他資源