鸿蒙学习笔记 06 滑动条

引入

滑动条, 就是可以拖动, 或者自己运动的一个条条, 主要是用来给用户提供自定义调整设置, 或者是作为进度回显用的. 我会在本文中带你实现下面的效果, 并且带你熟悉滑动条这个组件.

目标

本次的目标非常简单:

• 能够熟练运用滑动条组件
• 了解滑动条的相关属性设置
• 了解滑动条的交互逻辑

好啦, 那我们直接开始吧!

实现案例

搭建框架

首先就是框架, 这个滑动条和文字都是剧中的, 那么我们可以直接使用Column嵌套一个Row, 并且设置宽高为100%, 从而实现内部元素居中的效果.

// 定义一个状态, 方便和组件交互
@State now: number = 10;

Row() {
    Column() {
      // 内部组件
    }
    .width('100%')
}
.height('100%')

内部组件的话, 你可以直接抄下面的代码, 也可以自己想一想: 一个文本控件, 一个滑动条Slider()组件:

Text(`滑动条 ${this.now}`)
    .fontSize(40)
    .fontWeight(FontWeight.Bold)
Slider()

配置滑动条

一般的, 一个滑动条, 都需要设置一个最小值min, 最大值max. 这两个东西都不能通过后置.来调用, 而是作为配置项目, 以对象的形式传入这个滑动条:

Slider({
	min: 0,
	max: 100
})

到现在为止, 你已经实现了一个最基本的滑动条, 并且可以通过拖动来滑动这个进度体条:

可是数据并没有变化呀? 我应该怎么办呢?

不知道你还记不记得前面讲过的输入框组件, 其实这里大差不差, 甚至可以说一摸一样, 就是当滑动条发生改变的时候, 把自动传入的value赋值给设置的状态变量即可

Slider({
    min: 0,
    max: 100
})
  .onChange(value => {
  	this.now = value;
  })

恭喜, 现在已经可以正常运行了!

剩下的其实就是一些额外的配置项目了, 不过该介绍, 还是得介绍的√

其他配置项目

opstion: value

这个也是一个参数配置项, 你可以直接在花括号中使用, 配置滑动条默认的一个值.

注意, 这里配置的value, 不会和一开始定义的State冲突, 最好把这两个东西设置成一样的, 否则会出现还没有滑动, 值就改变的情况.

opstion: step

rt, 就是步长的意思, 可以设置滑动的步长, 默认是1, 你可以设置为其他的值, 推荐1/20左右就可以了.

option: style

就是滑动条的样式, 有如下几种选择:

Inset就是一开始的演示中的样子, Outset就是你实现后的样子, 可以在options中配置这个参数.

option: direction

顾名思义, 就是滑动条的一个方向了, 默认是横着的滑动条, 你也可以设置为Axis.Vertical来获取一个竖着的滑动条:

option: reverse

就是是否让滑动条反着走, 不过value其实没变化, 只是看起来方向变了而已

相关属性

除了上面哪些配置项目, 就是属性配置了, 也就是可以通过.来设定的内容.

.showTips

这个就是名字的意思, 展示一个提示信息, 如下面这样子, 有一个小的黑色提示框

.blockColor

就是中间那个点点的颜色, 默认是白色, 如果你使用的是OutSet的样式, 那么你可能需要设置一下这个点的颜色, 让它更醒目一些√

.trackThickness

就是滑动条的粗细, 根据实际需要进行设定即可

End

结合上面学过的东西, 我们可以做一个有意思的东西出来:

好啦, 本期教程结束~, 感谢阅读, 希望有帮到你!