Slider
可組合項可讓使用者從某個範圍內的值選取。您可以使用滑桿讓使用者執行下列操作:
- 調整使用範圍值 (例如音量和亮度) 的設定。
- 篩選圖表中的資料,就像設定價格範圍一樣。
- 使用者輸入內容,例如在評論中設定評分。
滑桿包含軌道、指標、值標籤和刻度標記:
- Track:軌跡是水平列,代表滑桿可採用的值範圍。
- 喜歡:拇指是滑桿上的可拖曳控制元素,可讓使用者選取歷程定義範圍內的特定值。
- 勾號:勾號是可顯示在滑桿軌跡上的選用視覺標記或指標。
基本導入
如需完整 API 定義,請參閱 Slider
參考資料。以下列舉一些 Slider
可組合函式的金鑰參數:
value
:滑桿目前的值。onValueChange
:每次值變更時呼叫的 lambda。enabled
:是一個布林值,指出使用者是否能與滑桿互動。
以下範例是簡單滑桿。藉此讓使用者選取 0.0
到 1.0
的值。由於使用者可以選取該範圍內任何值,因此滑桿是 Continuous。
@Preview @Composable fun SliderMinimalExample() { var sliderPosition by remember { mutableFloatStateOf(0f) } Column { Slider( value = sliderPosition, onValueChange = { sliderPosition = it } ) Text(text = sliderPosition.toString()) } }
實作內容如下所示:
進階導入
實作較複雜的滑桿時,您也可以另外使用下列參數。
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()) } }
實作內容如下所示:
範圍滑桿
您也可以使用專屬的 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()) } }