【每日学点HarmonyOS Next知识】拖拽调整列表顺序、tab回弹、自定义弹窗this、状态变量修饰枚举

1、HarmonyOS 功能实现(拖拽调整列表顺序)?

可参考:

import curves from '@ohos.curves';
import Curves from '@ohos.curves'@Entry
@Component
struct ListItemExample {@State private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]@State dragItem: number = -1@State scaleItem: number = -1@State neighborItem: number = -1@State neighborScale: number = -1private dragRefOffset: number = 0@State offsetX: number = 0@State offsetY: number = 0private ITEM_INTV: number = 120scaleSelect(item: number): number {if (this.scaleItem == item) {return 1.05} else if (this.neighborItem == item) {return this.neighborScale} else {return 1}}itemMove(index: number, newIndex: number): void {let tmp = this.arr.splice(index, 1)this.arr.splice(newIndex, 0, tmp[0])}build() {Stack() {List({ space: 20, initialIndex: 0 }) {ForEach(this.arr, (item: number) => {ListItem() {Text('' + item).width('100%').height(100).fontSize(16).textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF).shadow(this.scaleItem == item ? { radius: 70, color: '#15000000', offsetX: 0, offsetY: 0 } :{ radius: 0, color: '#15000000', offsetX: 0, offsetY: 0 }).animation({ curve: Curve.Sharp, duration: 300 })}.margin({ left: 12, right: 12 }).scale({ x: this.scaleSelect(item), y: this.scaleSelect(item) }).zIndex(this.dragItem == item ? 1 : 0).translate(this.dragItem == item ? { y: this.offsetY } : { y: 0 }).gesture(// 以下组合手势为顺序识别,当长按手势事件未正常触发时则不会触发拖动手势事件GestureGroup(GestureMode.Sequence,LongPressGesture({ repeat: true }).onAction((event?: GestureEvent) => {animateTo({ curve: Curve.Friction, duration: 300 }, () => {this.scaleItem = item})}).onActionEnd(() => {animateTo({ curve: Curve.Friction, duration: 300 }, () => {this.scaleItem = -1})}),PanGesture({ fingers: 1, direction: null, distance: 0 }).onActionStart(() => {this.dragItem = itemthis.dragRefOffset = 0}).onActionUpdate((event: GestureEvent) => {this.offsetY = event.offsetY - this.dragRefOffset// console.log('Y:' + this.offsetY.toString())this.neighborItem = -1let index = this.arr.indexOf(item)let curveValue = Curves.initCurve(Curve.Sharp)let value: number = 0//根据位移计算相邻项的缩放if (this.offsetY < 0) {value = curveValue.interpolate(-this.offsetY / this.ITEM_INTV)this.neighborItem = this.arr[index-1]this.neighborScale = 1 - value / 20;console.log('neighborScale:' + this.neighborScale.toString())} else if (this.offsetY > 0) {value = curveValue.interpolate(this.offsetY / this.ITEM_INTV)this.neighborItem = this.arr[index+1]this.neighborScale = 1 - value / 20;}//根据位移交换排序if (this.offsetY > this.ITEM_INTV / 2) {animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {this.offsetY -= this.ITEM_INTVthis.dragRefOffset += this.ITEM_INTVthis.itemMove(index, index + 1)})} else if (this.offsetY < -this.ITEM_INTV / 2) {animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {this.offsetY += this.ITEM_INTVthis.dragRefOffset -= this.ITEM_INTVthis.itemMove(index, index - 1)})}}).onActionEnd((event: GestureEvent) => {animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {this.dragItem = -1this.neighborItem = -1})animateTo({curve: curves.interpolatingSpring(14, 1, 170, 17), delay: 150}, () => {this.scaleItem = -1})})).onCancel(() => {animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {this.dragItem = -1this.neighborItem = -1})animateTo({curve: curves.interpolatingSpring(14, 1, 170, 17), delay: 150}, () => {this.scaleItem = -1})}))}, (item: number) => item.toString())}}.width('100%').height('100%').backgroundColor(0xDCDCDC).padding({ top: 5 })}}
2、HarmonyOS tab组件滑到最后一个index的时候,可以关闭回弹效果吗?

tab组件滑倒最后一个index的时候,可以关闭回弹效果吗

边缘tab继续滑动可以通过给TabContent添加手势进行限制。参考方案如下: 最左侧的TabContent添加.gesture(PanGesture(new PanGestureOptions({ direction: PanDirection.Right }))),限制组件内置的右滑动。 最右侧的TabContent添加.gesture(PanGesture(new PanGestureOptions({ direction: PanDirection.Left }))),限制组件内置的左滑动。参考demo:

@Entry
@Component
struct TabsExample {private controller: TabsController = new TabsController();build() {Column() {Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Green)}.tabBar('green').gesture(PanGesture(new PanGestureOptions({ direction: PanDirection.Right })))TabContent() {Column().width('100%').height('100%').backgroundColor(Color.Blue)}.tabBar('blue').gesture(PanGesture(new PanGestureOptions({ direction: PanDirection.Left })))// ...}.barMode(BarMode.Scrollable).barWidth('100%').barHeight(60).width('100%').height('100%').backgroundColor(0xF5F5F5)}}
}
3、HarmonyOS 自定义弹窗是否可以不绑定 this ?

可以尝试将弹窗设置成全局,可以不使用this

自定义弹窗不需要绑定this

4、HarmonyOS @State 是不是不能修饰枚举?

@State 是不是不能修饰枚举?修饰了枚举会报错:[nodict][page_router_manager.cpp(LoadPage)-(100000:100000:scope)] Update RootComponent Failed or LoadNamedRouter Failed

在ArkTS中,不支持使用declare关键字修饰类。这意味着如果在struct页面中创建了使用declare关键字修饰的类,可能会导致一些问题,包括@State修饰的枚举报错。具体原因如下:

  1. 不支持declare关键字:ArkTS不支持使用declare关键字定义类。这是因为declare关键字主要用于声明变量或类型,而不是定义类。因此,如果你在struct页面中使用declare关键字定义类,会导致编译错误。
  2. @State修饰枚举报错:由于类使用了declare关键字,导致类的定义不符合ArkTS的规范,从而引发编译错误。这可能会影响其他依赖该类的代码,包括使用@State修饰的枚举。
5、HarmonyOS loading 跨页面实现方式?

可以在页面转换时加入一个闪屏页实现,通过router.replaceUrl用需要切换的页面替换这个闪屏页实现,如:

@Entry
@Component
export struct LoadingPage {@Prop flag: boolean;build() {Row() {LoadingProgress().color(Color.White).width(50).height(50)}.height(this.flag ? '100%' : 0).width('100%').position({ x: 0, y: 0 }).backgroundColor('#4D000000').justifyContent(FlexAlign.Center)}
}

replaceUrl参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-router-V5

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Django部署Filemanagement

Pycharm搭建项目安装虚拟环境 mysqlclient对mysql的安装&#xff0c;配置有要求 pymsql伪装成mysqlclient&#xff0c;pymysql可以操纵mysql pip install pymysql操作sql5.7 mysql8.0会出现与pycharm不兼容问题&#xff0c;会报错&#xff0c;所以降到5.7 # 进入mysql 需要…

【病毒分析】熊猫烧香病毒分析及其查杀修复

目录 前言 一、样本概况 1.1 样本信息 1.2 测试环境及工具 1.3 分析目标 二、具体行为分析 2.1 主要行为 2.1.1 恶意程序对用户造成的危害 2.2 恶意代码分析 2.2.1 加固后的恶意代码树结构图(是否有加固) 2.2.2 恶意程序的代码分析片段 三、解决方案(或总结) 3.1 …

Spring Boot集成Spring Statemachine

Spring Statemachine 是 Spring 框架下的一个模块&#xff0c;用于简化状态机的创建和管理&#xff0c;它允许开发者使用 Spring 的特性&#xff08;如依赖注入、AOP 等&#xff09;来构建复杂的状态机应用。以下是关于 Spring Statemachine 的详细介绍&#xff1a; 主要特性 …

数组总和 (leetcode 40

leetcode系列 文章目录 一、核心操作二、外层配合操作三、核心模式代码总结 去重方式和之前三数之和一样&#xff0c;也可以用used数组去重&#xff0c;但本次尝试使用set去重 一、核心操作 如果count为0了&#xff0c;则证明正好减到了0&#xff0c;就可以收获&#xff0c;…

sqli-lab靶场学习(八)——Less26-28

前言 25关已经出现了初步的一些关键字过滤&#xff0c;通过双写可以绕过。后面的关卡&#xff0c;我们会遇到更多关键字过滤&#xff0c;需要各种技巧绕过。 Less26 第26关写了会过滤空格和注释符。有很多的答案&#xff0c;会用%a0替代空格&#xff0c;但据说这是sqli-labs部…

python:VOC格式数据集转换为YOLO数据集格式

作者&#xff1a;CSDN _养乐多_ 本文将介绍如何将目标检测中常用的VOC格式数据集转换为YOLO数据集&#xff0c;并进行数据集比例划分&#xff0c;从而方便的进行YOLO目标检测。 如果不想分两步&#xff0c;可以直接看第三节代码。 文章目录 一、将VOC格式数据集转换为YOLO格…

Docker容器安装软件(完整版)

文章目录 一、安装Docker1.1 docker 相关的命令1.2 配置镜像加速 二. 安装es2.1 创建网络2.2 拉取镜像2.3 创建挂载点目录2.4 部署单点es&#xff0c;创建es容器2.5 编写elasticsearch.yml2.6 重启es容器2.7 测试Elasticsearch是否安装成功 三. 基于Docker安装Kibana3.1 拉取镜…

LINUX 指令大全

Linux服务器上有许多常用的命令&#xff0c;可以帮助你管理文件、目录、进程、网络和系统配置等。以下是一些常用的Linux命令&#xff1a; 文件和目录管理 ls&#xff1a;列出当前目录中的文件和子目录 bash lspwd&#xff1a;显示当前工作目录的路径 bash pwdcd&#xff1a;切…

燃气对我们生活的重要性体现在哪里?

燃气在我们的生活中有 多方面的重要性 &#xff0c;以下是燃气对我们生活的重要性的详细说明&#xff1a; 烹饪和热水供应 &#xff1a; 燃气是家庭烹饪的主要能源&#xff0c;能够快速、高效地加热食物&#xff0c;使家庭聚餐更加便捷和愉快。 燃气热水器能够在短时间内提供…

NetAssist 5.0.14网络助手基础使用及自动应答使用方案

以下是NetAssist v5.0.14自动应答功能的详细使用步骤&#xff1a; 一、基础准备&#xff1a; 工具下载网址页面&#xff1a;https://www.cmsoft.cn/resource/102.html 下载安装好后&#xff0c;根据需要可以创建多个server&#xff0c;双击程序图标运行即可&#xff0c;下面…

node.js-node.js作为服务器,前端使用WebSocket(单个TCP连接上进行全双工通讯的协议)

1.WebSocket全双工通信协议 WebSocket是HTML5开始提供的一种单个TCP连接上进行全双工通讯的协议。让客户端和服务器间的数据交互变得简单&#xff0c;允许服务端向客户端主动推送数据。浏览器和服务器间只需要完成一次握手&#xff0c;两者间创建持久性的连接&#xff0c;并进行…

java后端开发day31--集合进阶(一)-----Collection集合List集合数据结构1

&#xff08;以下内容全部来自上述课程&#xff09; 1.集合体系结构 List系列集合&#xff1a;添加的元素是有序、可重复、有索引。 Set系列集合&#xff1a;添加的元素是无序、不重复、无索引。 2.Collection集合 Collection是单列集合的祖宗接口&#xff08;不可直接创建…

Qt配置OpenGL相机踩的坑

项目根据LearnOpenGL配置Qt的相机&#xff0c;更新view矩阵和project矩阵的位移向量变得很大&#xff0c;我设置的明明相机位置是(0,0,3)&#xff0c;理想的位移向量刚好是相反数(0,0,-3)&#xff0c;对应的view矩阵位置向量可以变成(0,0,1200)…离模型非常远矩阵模型也看不见&…

【C++设计模式】第十六篇:迭代器模式(Iterator)

注意&#xff1a;复现代码时&#xff0c;确保 VS2022 使用 C17/20 标准以支持现代特性。 遍历聚合对象的统一方式 1. 模式定义与用途 核心思想 ​迭代器模式&#xff1a;提供一种方法顺序访问聚合对象的元素&#xff0c;而无需暴露其内部表示。关键用途&#xff1a; 1.​统一…

关于WPS的Excel点击单元格打开别的文档的两种方法的探究【为单元格添加超链接】

问题需求 目录和文件结构如下&#xff1a; E:\Dir_Level1 │ Level1.txt │ └─Dir_Level2│ Level2.txt│ master.xlsx│└─Dir_Level3Level3.txt现在要在master.xlsx点击单元格进而访问Level1.txt、Level2.txt、Level3.txt这些文件。 方法一&#xff1a;“单元格右键…

聚类中的相似矩阵和拉普拉斯矩阵

前言&#xff08;可以略过&#xff09; 最近在看的是关于聚类的论文&#xff0c;之前对聚类的步骤和相关内容不太了解&#xff0c;为了读懂论文就去学习了一下&#xff0c;这里将自己的理解记录下来。学习的不全面&#xff0c;主要是为了看懂论文&#xff0c;后续如果有涉及到聚…

前端笔记 --- vue框架

目录 基础知识 指令的修饰符 计算属性 watch侦听器的写法 Vue的生命周期 工程化开发&脚手架 VUE CLI 组件注册的方式 scoped样式冲突与原理 data 组件之间的关系和组件通信 v-model详解 sync修饰符 Dom介绍 操作HTML标签 总结 ref 和 $refs $nextTick 自…

智能双剑合璧:基于语音识别与大模型的技术沙龙笔记整理实战

智能双剑合璧&#xff1a;基于语音识别与大模型的技术沙龙笔记整理实战 ——记一次网络安全技术沙龙的高效知识沉淀 引言&#xff1a;当网络安全遇上AI生产力工具 在绿盟科技举办的"AI驱动的未来网络安全"内部技术沙龙中&#xff0c;笔者亲历了一场关于网络安全攻…

数据结构(蓝桥杯常考点)

数据结构 前言&#xff1a;这个是针对于蓝桥杯竞赛常考的数据结构内容&#xff0c;基础算法比如高精度这些会在下期给大家总结 数据结构 竞赛中&#xff0c;时间复杂度不能超过10的7次方&#xff08;1秒&#xff09;到10的8次方&#xff08;2秒&#xff09; 空间限制&#x…

使用 UNIX 命令在设计中搜索标识符:vcsfind 的入门指南

在现代软件开发和硬件设计中&#xff0c;快速准确地定位和搜索特定标识符是提高开发效率的关键。本文将介绍如何使用 UNIX 命令 vcsfind 在设计中搜索标识符&#xff0c;帮助您更高效地管理您的项目。 什么是 vcsfind&#xff1f; vcsfind 是一个强大的 UNIX 命令行工具&#x…