Jetpack Compose

Jetpack Compose - Slider

0、介绍
1、属性一览
2、使用示例
3、版本更新
4、未解决问题

Compose系列文章，请点原文阅读。原文，是时候学习Compose了！

0、介绍

拖动条，默认包含了一个滑块和一个滑动轨道。其允许用户在一个数值范围内进行选择。

1、属性一览

【目前基于beta01版本】请看该函数：

@Composable fun Slider(value: Float, onValueChange: (Float) -> Unit, modifier: Modifier = Modifier, enabled: Boolean = true, valueRange: ClosedFloatingPointRange<Float> = 0f..1f, steps: Int = 0, onValueChangeFinished: () -> Unit = null, interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, colors: SliderColors = SliderDefaults.colors()
): Unit

属性参数含义：

参数	含义
modifier: Modifier = Modifier	应用于布局的修饰符
value: Float	滑块的当前值，如果设置的值超过滑块可选值范围，则会强制为可选范围
onValueChange: (Float) -> Unit	滑动滑块时候的回调当前的值
valueRange: ClosedFloatingPointRange = 0f…1f	滑块可选值的范围，默认0-1f
steps: Int = 0	该值代表将拖动条均分为几等份。如果为0，那么是连续的值。如果是大于0，那么可选值范围会是指定的离散值（请见下文示例相关）
onValueChangeFinished: () -> Unit = null	滑块值更改结束时候的回调。注意该回调不是用来更新滑块的进度的，而是用户通过拖动或者点击滑块完成选择新的数值后才有的回调
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }	自定义滑块的属性相关，可以参见Button自定义的相关内容
colors: SliderColors = SliderDefaults.colors()	拖动条各种状态滑块和轨道的颜色设置（具体请看下文属性）
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、版本更新

beta01
在该版本中对于各种颜色的定义统一放在了SliderDefaults.colors中，请自行修改。

4、未解决问题

以上只是实现了基本的拖动条功能，但是实际使用中UI设计可能完全不同，我们可以根据interactionState、自定义视图等的功能去实现，具体使用我们在自定义视图篇章中统一去处理。

Jetpack Compose - Slider相关推荐

Jetpack Compose中的Accompanist
accompanist是Jetpack Compose官方提供的一个辅助工具库,以提供那些在Jetpack Compose sdk中目前还没有的功能API. 权限依赖配置: repositories ...
Jetpack Compose学习笔记
在前不久的 Android Dev Summit '19 上,Jetpack Compose 终于发布了一个可直接获得的预览版.现在的版本还是 0.1.0-dev02,处于非常早期的版本,官方也再三强 ...
随输入动态改变ui_深入详解 Jetpack Compose | 优化 UI 构建
人们对于 UI 开发的预期已经不同往昔.现如今,为了满足用户的需求,我们构建的应用必须包含完善的用户界面,其中必然包括动画 (animation) 和动效 (motion),这些诉求在 UI 工具包创 ...
移动开发 Jetpack Compose 组件布局
Jetpack Compose 是用于构建原生 Android 界面的新工具包.它可简化并加快 Android 上的界面开发,使用更少的代码.强大的工具和直观的 Kotlin API,快速让应用生动而 ...
在 Jetpack Compose 中安全地使用数据流
/ 今日科技快讯 / 11月17日下午,暴雪中国官方微博发布公告称,各位暴雪游戏的国服玩家,我们很遗憾地通知大家,随着我们与网之易公司现有授权协议的到期,自2023年1月24日0点起,所有&l ...
Jetpack Compose 自定义绘制——高仿Keep周运动数据页面
废话之前先上图吧,如果不是有人告诉,你可以一眼看出哪个是真哪个是假吗? 仿制整个页面(仅仅页面)大概花了我两个小时,不过仅仅是静态的.不可点击的.图有形似而无功能. 自定义绘制 Jetpack Com ...
使用Jetpack Compose竟能做出如此漂亮的倒计时APP
Compose开发者挑战赛二周目迎合Jetpack Compose beta版的发布,Google官方发起了Compose开发者挑战赛活动,目前已经入二周目 android-dev-challeng ...
Jetpack Compose - Switch
Jetpack Compose - Switch 1.属性一览 2.使用示例 3.版本更新 4.未解决问题 Compose系列文章,请点原文阅读.原文:是时候学习Compose了! 1.属性一览 [目 ...
Jetpack Compose Animations 超简单教程
Node:本文基于Jetpack Compose 1.0.0-beta01 Animation是由state驱动的 Compose的核心思想状态驱动UI刷新,这一思想同样体现在动画上. Compose ...

Jetpack Compose - Slider

Jetpack Compose - Slider

0、介绍

1、属性一览

2、使用示例

3、版本更新

4、未解决问题

Jetpack Compose - Slider相关推荐

最新文章

热门文章