HarmonyOS NEXT实战:滑动条

简介: 本节介绍HarmonyOS Next中Slider滑动条组件的使用,涵盖横向与竖向滑动条实现。通过实战演示如何调节音量、亮度等场景,讲解Slider参数配置及样式设置,帮助开发者快速掌握滑动条应用开发技巧。

HarmonyOS Next实战##HarmonyOS SDK应用服务##教育

目标:实现横向和竖向滑动条

Slider滑动条组件,通常用于快速调节设置值,如音量调节、亮度调节等应用场景。

知识点:
SliderOptions对象属性

  • value:当前进度值。默认值:与参数min的取值一致。从API version 10开始,该参数支持$$双向绑定变量。取值范围: [min, max]。小于min时取min,大于max时取max。
  • min:设置最小值。默认值:0
  • max:设置最大值。默认值:100。说明:min >= max异常情况,min取默认值0,max取默认值100。value不在[min, max]范围之内,取min或者max,靠近min取min,靠近max取max。
  • step:设置Slider滑动步长。默认值:1。取值范围:[0.01, max - min]。说明:若设置的step值小于0或大于max值时,则按默认值显示。
  • style:设置Slider的滑块与滑轨显示样式。默认值:SliderStyle.OutSet
  • direction:设置滑动条滑动方向为水平或竖直方向。默认值:Axis.Horizontal
  • reverse:设置滑动条取值范围是否反向。默认值:false。值为true时,横向Slider从右往左滑动,竖向Slider从下往上滑动。值为false时,横向Slider从左往右滑动,竖向Slider从上往下滑动

组件属性

blockColor(value: ResourceColor)

设置滑块的颜色。默认值:$r('sys.color.ohos_id_color_foreground_contrary')

  • 当滑块形状设置为SliderBlockType.DEFAULT时,blockColor可设置默认圆形滑块颜色。
  • 当滑块形状设置为SliderBlockType.IMAGE时,滑块无填充,设置blockColor不生效。
  • 当滑块形状设置为SliderBlockType.SHAPE时,blockColor可设置自定义形状的填充颜色。
trackColor(value: ResourceColor | LinearGradient)

设置滑轨的背景颜色。说明: 设置渐变色时,若颜色断点颜色值为非法值或者渐变色断点为空时,渐变色不起效果。默认值:$r('sys.color.ohos_id_color_component_normal')。该接口中的LinearGradient类型不支持在元服务中使用。

selectedColor(value: ResourceColor)

设置滑轨的已滑动部分颜色。默认值:$r('sys.color.ohos_id_color_emphasize')

showSteps(value: boolean)

设置当前是否显示步长刻度值。值为true时显示刻度值,值为false时不显示刻度值。默认值:false

实战:SliderPage

@Entry
@Component
struct SliderPage {
   
  @State outSetValueOne: number = 40
  @State vInSetValueOne: number = 40

  build() {
   
    Column({
    space: 10 }) {
   
      Text('Slider实战')
      Text('横向滑动条')
      Row() {
   
        Slider({
   
          value: this.outSetValueOne,
          min: 0,
          max: 100,
          style: SliderStyle.OutSet
        })
          .showTips(true)
          .onChange((value: number, mode: SliderChangeMode) => {
   
            this.outSetValueOne = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        // toFixed(0)将滑动条返回值处理为整数精度
        Text(this.outSetValueOne.toFixed(0)).fontSize(12)
      }
      .width('80%')

      Text('竖向滑动条')
      Slider({
   
        value: this.vInSetValueOne,
        style: SliderStyle.InSet,
        direction: Axis.Vertical,
        reverse: true // 竖向的Slider默认是上端是min值,下端是max值,因此想要从下往上滑动,需要设置reverse为true
      })
        .showTips(true)
        .height(300)
        .onChange((value: number, mode: SliderChangeMode) => {
   
          this.vInSetValueOne = value
          console.info('value:' + value + 'mode:' + mode.toString())
        })
    }.width('100%')
  }
}
目录
相关文章
|
4月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
3月前
|
移动开发 前端开发 JavaScript
鸿蒙NEXT时代你所不知道的全平台跨端框架:CMP、Kuikly、Lynx、uni-app x等
本篇基于当前各大活跃的跨端框架的现状,对比当前它们的情况和未来的可能,帮助你在选择框架时更好理解它们的特点和差异。
312 0
|
4月前
|
安全 API 开发工具
【HarmonyOS NEXT】一键扫码功能
这些Kit为我们应用开发提升了极大地效率。很多简单的功能,如果不需要太深的定制化需求,直接调用kit提供的API就可以实现,在android或者ios上需要很多代码才能实现的功能效果。
119 0
HarmonyOS NEXT仓颉开发语言实战案例:电影App
周末好!本文分享使用仓颉语言重构ArkTS实现的电影App案例,对比两者在UI布局、组件写法及语法差异。内容包括页面结构、列表分组、分类切换与电影展示等。通过代码演示仓颉在HarmonyOS开发中的应用。##仓颉##ArkTS##HarmonyOS开发
|
4月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
HarmonyOS NEXT仓颉开发语言实战案例:小而美的旅行App
本文分享了一个旅行App首页的设计与实现,使用List容器搭配Row、Column布局完成个人信息、功能列表及推荐模块的排版,详细展示了HarmonyOS下的界面构建技巧。
|
18天前
|
存储 缓存 5G
鸿蒙 HarmonyOS NEXT端云一体化开发-云存储篇
本文介绍用户登录后获取昵称、头像的方法,包括通过云端API和AppStorage两种方式,并实现上传头像至云存储及更新用户信息。同时解决图片缓存问题,添加上传进度提示,支持自动登录判断,提升用户体验。
90 0
|
18天前
|
存储 负载均衡 数据库
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
本文介绍基于华为AGC的端云一体化开发流程,涵盖项目创建、云函数开通、应用配置及DevEco集成。重点讲解云函数的编写、部署、调用与传参,并涉及环境变量设置、负载均衡、重试机制与熔断策略等高阶特性,助力开发者高效构建稳定云端服务。
178 0
鸿蒙 HarmonyOS NEXT端云一体化开发-云函数篇
|
18天前
|
存储 JSON 数据建模
鸿蒙 HarmonyOS NEXT端云一体化开发-云数据库篇
云数据库采用存储区、对象类型、对象三级结构,支持灵活的数据建模与权限管理,可通过AGC平台或本地项目初始化,实现数据的增删改查及端侧高效调用。
50 0
|
18天前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
150 0
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例