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()) } }