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()) } }
此實作方式如下所示:
進階導入
實作較複雜的滑桿時,您可以另外使用 以下參數。
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()) } }