Jetpack Compose - Slider
阿新 • • 發佈：2021-02-07
技術標籤：Jetpack-ComposeJetpackComposeSlider拖動條滑塊
Jetpack Compose - Slider
Compose系列文章，請點原文閱讀。原文，是時候學習Compose了！
0、介紹
拖動條，預設包含了一個滑塊和一個滑動軌道。其允許使用者在一個數值範圍內進行選擇。
1、屬性一覽
【目前基於alpha 11版本】請看該函式：
@Composable fun Slider( value: Float, onValueChange: (Float) -> Unit, modifier: Modifier = Modifier, valueRange: ClosedFloatingPointRange<Float> = 0f..1f, steps: Int = 0, onValueChangeEnd: () -> Unit = {}, interactionState: InteractionState = remember { InteractionState() }, thumbColor: Color = MaterialTheme.colors.primary, activeTrackColor: Color = MaterialTheme.colors.primary, inactiveTrackColor: Color = activeTrackColor.copy(alpha = InactiveTrackColorAlpha), activeTickColor: Color = MaterialTheme.colors.onPrimary.copy(alpha = TickColorAlpha), inactiveTickColor: Color = activeTrackColor.copy(alpha = TickColorAlpha) ): Unit
屬性引數含義：
| 引數 | 含義 |
|---|---|
| modifier: Modifier = Modifier | 應用於佈局的修飾符 |
| value: Float | 滑塊的當前值，如果設定的值超過滑塊可選值範圍，則會強制為可選範圍 |
| onValueChange: (Float) -> Unit | 滑動滑塊時候的回調當前的值 |
| valueRange: ClosedFloatingPointRange = 0f…1f | 滑塊可選值的範圍，預設0-1f |
| steps: Int = 0 | 該值代表將拖動條均分為幾等份。如果為0，那麼是連續的值。如果是大於0，那麼可選值範圍會是指定的離散值（請見下文示例相關） |
| onValueChangeEnd: () -> Unit = {} | 滑塊值更改結束時候的回撥。注意該回調不是用來更新滑塊的進度的，而是使用者通過拖動或者點選滑塊完成選擇新的數值後才有的回撥 |
| interactionState: InteractionState = remember { InteractionState() } | 自定義滑塊的屬性相關，可以參見Button自定義的相關內容 |
| thumbColor: Color = MaterialTheme.colors.primary | 拖動條的滑塊的顏色 |
| inactiveTrackColor: Color = activeTrackColor.copy(alpha = InactiveTrackColorAlpha) | 拖動條預設軌道的背景色 |
| activeTrackColor: Color = MaterialTheme.colors.primary | 拖動條拖動滑塊後啟用部分軌道的顏色（請見下文示例） |
| inactiveTickColor: Color = activeTrackColor.copy(alpha = TickColorAlpha) | 設定了steps屬性後的離散值預設顏色（請見下文示例） |
| activeTickColor: Color = MaterialTheme.colors.onPrimary.copy(alpha = TickColorAlpha) | 設定了steps屬性後的啟用的離散值的顏色（請見下文示例） |
2、使用示例
我們先來看下一個極簡的拖動條，程式碼如下：
@Composable
fun SliderDemo() {
val progress = remember { mutableStateOf(0f) }
Slider(
value = progress.value,
onValueChange = {
progress.value = it
},
)
}
實現效果如下所示，所有的顏色是基於預設的主題色：
現在我們先設定下如下三個屬性，分別是紅、灰、藍：
thumbColor = myRed,
inactiveTrackColor = myGray,
activeTrackColor = myBlue,
請自行體會，對照上述屬性：
OK，現在繼續設定下steps屬性，還有另外兩個可以自定義的顏色值：
steps = 10,
inactiveTickColor = myYellow,
activeTickColor = Color.White
效果如下所示，請自行對照屬性理解：
3、版本更新
- 暫無
4、未解決問題
以上只是實現了基本的拖動條功能，但是實際使用中UI設計可能完全不同，我們可以根據interactionState、自定義檢視等的功能去實現，具體使用我們在自定義檢視篇章中統一去處理。