HarmonyOS实战开发-slider组件的使用

介绍

本篇Codelab主要介绍slider滑动条组件的使用。如图所示拖动对应滑动条调节风车的旋转速度以及缩放比例。

相关概念

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

环境搭建

软件要求

• DevEco Studio版本：DevEco Studio 3.1 Release及以上版本。
• OpenHarmony SDK版本：API version 9及以上版本。

硬件要求

• 开发板类型：润和RK3568开发板。
• OpenHarmony系统：3.2 Release及以上版本。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：

1. 获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：

2.搭建烧录环境。

1. 完成DevEco Device Tool的安装
2. 完成RK3568开发板的烧录

3.搭建开发环境。

1. 开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。
2. 开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”）。
3. 工程创建完成后，选择使用真机进行调测。

代码结构解读

本篇Codelab只对核心代码进行讲解。

├──entry/src/main/js                          // 代码区
│  └──MainAbility
│     ├──common
│     │  ├──constants
│     │  │  └──constants.js                   // 常量定义文件
│     │  └──images
│     │     ├──ic_speed.png                   // 速度标识图片
│     │     └──ic_windmill.png                // 风车图片
│     ├──i18n
│     │  ├──en-US.json                        // 英文国际化
│     │  └──zh-CN.json                        // 中文国际化
│     ├──pages
│     │   └──index
│     │     ├──index.css                      // 界面样式
│     │     ├──index.hml                      // 主界面
│     │     └──index.js                       // slider组件事件逻辑
│     └───app.js                              // 程序入口
└──entry/src/main/resource                    // 应用静态资源目录

页面布局

界面主要由上方风车图片展示区域及下方滑动条功能区域两部分组成，