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                    // 应用静态资源目录

页面布局

界面主要由上方风车图片展示区域及下方滑动条功能区域两部分组成,滑动条功能区域包含调节旋转速度的滑动条组件和调节缩放比例的滑动条组件。

图片区域

使用image组件加载示例图片,src属性标识图片路径。transform: scale控制图片大小,animation-duration动画样式用来定义图形旋转一周所用的时间。本篇Codelab设置图片缩放起始倍数为1,旋转一周需要的默认时间为5000ms。

<!-- index.hml -->
<div class="top-block">
    <div class="image-block" style="transform: scale({{ imageSize }});">
        <image class="image-show" src="{{ imgUrl }}" style="animation-duration: {{ animationDuration }}; "/>
    </div>    
</div>
// index.js
export default {
  data: {
    imgUrl: Constants.IMG_URL,
    animationDuration: Constants.ANIMATION_DURATION,
    imageSize: Constants.INIT_IMAGE_SIZE,
    ...
  }
};

// constants.js
export default class Constants {
  static IMG_URL = '/common/images/ic_windmill.png';
  static INIT_IMAGE_SIZE = 1;
  static ANIMATION_DURATION = '5000ms';
  ...
};

滑动条功能区域

创建两个slider组件实现控制风车的转动速度以及风车缩放的大小。配置slider组件最大进度值为100,最小进度值为1,初始进度值为50,滑动条样式设置为滑块在滑杆内inset。分别为两个组件添加事件changeSpeed以及changeSize,用于处理滑块滑动事件。

<!-- index.hml -->
<div class="bottom-block">
    ...
    <div class="slider-block">
        <image class="speed-slow-img" src="{{ speedImg }}"></image>
        <slider min="{{ minSpeed }}" max="{{ maxSpeed }}" value="{{ speed }}" onchange="changeSpeed" mode="inset"></slider>
        <image class="speed-fast-img" src="{{ speedImg }}"></image>
    </div>
    ...
    <div class="slider-block">
        <text class="text-small">A</text>
            <slider min="{{ minSize }}" max="{{ maxSize }}" value="{{ size }}" onchange="changeSize" mode="inset"></slider>
        <text class="text-big">A</text>
    </div>
</div>

风车旋转效果

实现风车旋转的动画效果需要在加载风车图片的image组件上配置如下样式:

  • animation-name:设置动画执行的操作。
  • animation-iteration-count:定义动画播放的次数。
  • animation-timing-function:描述动画执行的速度曲线,使动画更加平滑。
/* index.css */
/* 风车图片布局 */
.image-show {
    /* 动画执行的操作 */
    animation-name: Go;

    /* 动画播放的次数:无限 */
    animation-iteration-count: infinite;

    /* 动画匀速播放 */
    animation-timing-function: linear;
}

/* 图片旋转角度:0°到360° */
@keyframes Go {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

滑动条调整功能

移动控制速度的slider组件滑块时,触发slider组件事件。事件类型为end或click时,表示滑动结束或点击滑动条的某处,此时slider组件的进度值停止改变。获取当前进度值计算动画持续时长数值,使用计算结果更新动画播放时间。

// constants.js
// 动画最长持续时间
static MAX_ANIMATION_DURATION = 10000;

// 动画持续时间倍数
static ANIMATION_DURATION_MULTIPLE = 95;

// 毫秒缩写
static MILLISECOND_ABBREVIATION = "ms";

// index.js
export default {
  /**
   * 修改转速
   * @param event : slider组件事件
   */
  changeSpeed(event) {
    if (event.mode === Constants.SLIDER_EVENT_MODE_END || event.mode === Constants.SLIDER_EVENT_MODE_CLICK) {
      this.speed = event.value;

      // 计算动画播放时间
      this.animationDurationNum = Constants.MAX_ANIMATION_DURATION -
        (event.value * Constants.ANIMATION_DURATION_MULTIPLE);
      this.animationDuration = this.animationDurationNum + Constants.MILLISECOND_ABBREVIATION;
    }
  }
};

移动控制缩放比例的slider组件滑块时,触发slider组件事件。事件类型为end或click时,表示滑动结束或点击滑动条的某处,此时slider组件的进度值停止改变。获取当前进度值计算缩放比例,计算结果保留2位小数。

// constants.js
// 缩放比例计算数值
static HALF_HUNDRED = 50;

// 最小缩放比例 
static MIN_IMAGE_SIZE = 0.1;

// index.js
export default {
  /**
   * 修改缩放比例
   * @param event : slider组件事件
   */
  changeSize(event) {
    if (event.mode === Constants.SLIDER_EVENT_MODE_END || event.mode === Constants.SLIDER_EVENT_MODE_CLICK) {
      this.size = event.value;
      // 图片缩放比例范围:0.1到2
      this.imageSize = (this.size / Constants.HALF_HUNDRED) < Constants.MIN_IMAGE_SIZE ?
        Constants.MIN_IMAGE_SIZE : (this.size / Constants.HALF_HUNDRED);
      this.imageSize = this.imageSize.toFixed(2);
    }
  }
};

总结

您已经完成了本次Codelab的学习,并了解到以下知识点:

  1. image组件旋转动画效果的实现。
  2. slider组件的使用。

为了帮助大家更深入有效的学习到鸿蒙开发知识点,小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源,获取完整版方式请点击→《HarmonyOS教学视频

HarmonyOS教学视频:语法ArkTS、TypeScript、ArkUI等.....视频教程

鸿蒙生态应用开发白皮书V2.0PDF:

获取完整版白皮书方式请点击→《鸿蒙生态应用开发白皮书V2.0PDF》

鸿蒙 (Harmony OS)开发学习手册

一、入门必看

  1. 应用开发导读(ArkTS)
  2. ……

二、HarmonyOS 概念

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全
  5. ........

三、如何快速入门?《做鸿蒙应用开发到底学习些啥?》

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

四、开发基础知识

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

五、基于ArkTS 开发

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

更多了解更多鸿蒙开发的相关知识可以参考:《鸿蒙 (Harmony OS)开发学习手册》

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/505698.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

xftp突然无法连接虚拟机

问题描述 使用xftp连接虚拟机的时候一直显示 连接xxx.xxx.xx.xx失败 问题原因查找 首先打开本地cmd命令提示符 ping 你的虚拟机ip地址 我的是 ping 192.168.xx.xx 显示请求超时 解决方案&#xff1a; 点击打开更改适配器选项 右键vmnet 8——属性 如图前四个选项必选 单…

Linux:ip协议

文章目录 ip协议基本认识ip协议的报头 ip协议基本认识 前面对于TCP的内容已经基本结束了&#xff0c;那么这也就意味着在传输层也已经结束了&#xff0c;那么下一步要进入的是的是网络层&#xff0c;网络层中也有很多种协议&#xff0c;这里主要进行解析的是ip协议 前面的TCP…

【ensp实验】GRE和MGRE相关实验

要求&#xff1a; 1、R5为ISP,只能进行IP地址配置&#xff0c;其所有地址均配为公有IP地址; 2、R1和R5间使用PPP的PAP认证&#xff0c;R5为主认证方 R2与R5之间使用ppp的CHAP认证&#xff0c;R5为主认证方; R3与R5之间使用HDLC封装; 3、R1、R2、R3构建一个MGRE环境&#…

线上系统时间慢八个小时的排查之路

最近有一个新项目上线&#xff0c;在上线时&#xff0c;突然发现时间与正常时间对不上&#xff0c;少了八个小时&#xff1b;但我丝毫不慌&#xff0c;这不就是个时区的问题吗&#xff0c;简单&#xff0c;但是这一次它给我深深的上了一课&#xff0c;一起来看整个排查过程吧。…

K8S之Configmap的介绍和使用

Configmap Configmap概述Configmap的简介Configmap能解决的问题Configmap应用场景局限性 Configmap创建方法通过命令行直接创建通过文件创建指定目录创建编写Configmap资源清单Yaml文件 Configmap的使用案例通过环境变量引入&#xff1a;使用configMapKeyRef通过环境变量引入&a…

工厂方法模式与抽象工厂模式的深度对比

​&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 &#x1f680; 转载自&#xff1a;设计模式深度解析&#xff1a;工厂方法模式与抽象工厂模式的深…

张颂文|永远保持好奇心的人,是永远进步的人。

哈喽,你好啊,我是雷工! 今天看到了张颂文的一段演讲,提到了他因为好奇心而被改变的人生。 如果想把单一和枯燥的工作做的更好,张颂文的办法是像一个孩子一样保持好奇心,不停地提出一些有趣的问题。 在5年的导游经历中,对每次游览的地点都像初次游览般保持好奇心,正因为…

【C语言】【Leetcode】2437. 有效时间的数目

文章目录 题目思路一、枚举思路二、回溯 题目 链接: link 思路一、枚举 这题的可以简单的看成 h1 h2 : m1 m2 的情况&#xff0c;其中 h1 和 h2 有关&#xff0c; m1 和 m2 有关&#xff0c;数目不多可以直接暴力枚举解决 int countTime(char * time) {int countHour 0;i…

【JavaWeb】Day24.Web入门——SPringBootWeb入门

什么是SPring&#xff1f; 我们可以打开Spring的官网(Spring | Home)&#xff0c;去看一下Spring的简介&#xff1a;Spring makes Java simple。Spring的官方提供很多开源的项目&#xff0c;我们可以点击上面的projects&#xff0c;看到spring家族旗下的项目&#xff0c;按照流…

PLC的大脑和心脏——CPU及西门子S7-1200CPU分类、CPU型号及端子接线图示例

CPU不断地采集输入信号&#xff0c;执行用户程序&#xff0c;刷新系统的输出。 根据供电方式和输入/输出方式的不同&#xff0c;西门子S7-1200 CPU分为3类&#xff0c;如下图1。 图1 CPU的分类 第1对字母&#xff0c;表示CPU的供电方式&#xff0c;AC&#xff08;Alternating…

leetcode 不同路径

62. 不同路径 问题描述 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下图中标记为 “Start” &#xff09;。 机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角&#xff08;在下图中标记为 “Finish” &#xff09;。 问总共有多少条不同的…

python_2

文章目录 题目一运行结果 题目二运行结果 题目一 代码如下&#xff1a; def merge():ls_0 input("输入一个列表(空格隔开)&#xff1a;").split()ls_1 []for i in ls_0:ls_1.append(i)ls_1.sort()if ls_0 ls_1:print("这是一个有序列表")else:print(&qu…

国内首个BEV感知全栈系列学习教程:课程总结

目录 前言零. 简述一、BEV感知算法介绍二、BEV感知算法基础模块讲解三、LiDAR和Camera融合的BEV感知算法四、基于环视Camera的BEV感知算法五、BEV感知算法实战总结 前言 自动驾驶之心推出的《国内首个BVE感知全栈系列学习教程》&#xff0c;链接。记录下个人学习笔记&#xff0…

系统慢查询的思考

系统慢查询的思考 在一个系统中发现慢查询的功能或很卡的现象。你是怎么思考的&#xff1f;从哪几个方面去思考&#xff1f;会用什么工具&#xff1f; 一个系统使用了几年后都可能会出现这样的问题。原因可能有以下几点。 数据量的增加。系统中平时的使用中数据量是有一个累…

cdr弧形线条怎么画 cdr弧形线条怎么复制 CoreIDRAW官版 CoreIDRAW2024 平面设计软件

弧形线条可以增加设计的美感和独特性&#xff0c;使其看起来更加优雅和精致&#xff0c;并且弧形线条可以使设计更加流畅&#xff0c;减少直角和生硬的转折&#xff0c;使其看起来更加自然。那在cdr软件中怎么绘制弧形线条呢&#xff1f;下面由我带大家一起来了解cdr弧形线条怎…

c++编程(1)——重载函数、引用

欢迎来到博主的专栏——c编程 博主ID&#xff1a; 代码小豪 文章目录 前言重载函数函数重载的规则函数重载的原理引用引用变量的权限问题 前言 c语言对于编写大型项目有所缺陷&#xff0c;比如最常出现的标识符不能重复的问题&#xff08;软件的代码量通常是数以万计的&#…

机器语言编写helloworld

kvmtool下载编译 git clone https://github.com/kvmtool/kvmtool.git 下载后进入到目录执行make即可。 补码 计算机怎么表示负数&#xff1f;以四位有符号数为例&#xff0c;使用高位作为符号位&#xff0c;最高位为0表示正数&#xff0c;为1表示负数&#xff0c;其余三位用…

基于SSM远程同步课堂系统

基于SSM远程同步课堂系统的设计与实现 摘要 在这样一个网络数据大爆炸的时代&#xff0c;人们获取知识、获取信息的通道非常的多元化&#xff0c;通过网络来实现数据信息的获取成为了现在非常常见的一种方式&#xff0c;而通过网络进行教学&#xff0c;在网络上进行远程的课堂…

【软考】数据流图的设计原则

目录 1. 数据守恒原则2. 守恒加工原则3. 外部实体与外部实体之间不存在数据流4. 外部实体与外部存储之间不存在数据流5. 数据存储与数据存储之间不存在数据流6. 父图与子图的平衡原则7. 数据流与加工有关&#xff0c;且必须经过加工8.例题8.1 例题1 1. 数据守恒原则 1.输入与输…

嵌入式linux学习之opencv交叉编译

1.下载opencv源码 OpenCV官方源码下载链接为https://opencv.org/releases/&#xff0c;选择3.4.16版本下载。放在ubuntu系统~/opencv文件夹中&#xff0c;解压缩&#xff0c;opencv文件夹中新建build和install文件夹用于存放编译文件和安装文件&#xff1a; 2. 安装编译工具…