Slider
可組合函式可讓使用者從多種選項中選擇
輕鬆分配獎金您可以使用滑桿讓使用者執行下列操作:
- 調整使用範圍值 (例如音量和亮度) 的設定。
- 篩選圖表中的資料,就像設定價格範圍一樣。
- 使用者輸入內容,例如在評論中設定評分。
滑桿包含軌道、指標、值標籤和刻度標記:
- 軌跡:軌跡是水平列,代表 滑桿可容納的值
- 喜歡:拇指是位於滑桿上的可拖曳控制元素 可讓使用者選取 軌道。
- 勾號:勾號是選用性質的視覺標記或指標, 。
![包含拇指、軌跡和刻點的滑桿。](https://developer.android.com/static/develop/ui/compose/images/components/slider.png?authuser=0000&hl=zh-tw)
基本導入
如需完整 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()) } }
實作內容如下所示:
![滑桿元件:已在賽道上選取值約四分之三。](https://developer.android.com/static/develop/ui/compose/images/components/slider-basic.png?authuser=0000&hl=zh-tw)
進階導入
實作較複雜的滑桿時,您可以另外使用 以下參數。
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()) } }
實作內容如下所示:
![在這裡輸入替代文字](https://developer.android.com/static/develop/ui/compose/images/components/slider-advanced.png?authuser=0000&hl=zh-tw)
範圍滑桿
您也可以使用專屬的 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()) } }
![已選取兩個值的範圍滑桿元件。標籤會顯示所選項目的上下限。](https://developer.android.com/static/develop/ui/compose/images/components/slider-range.png?authuser=0000&hl=zh-tw)