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

news/2025/3/16 5:05:35/
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.ppmy.cn/news/1579498.html

相关文章

【openGauss】物理备份恢复

文章目录 1. gs_backup&#xff08;1&#xff09;备份&#xff08;2&#xff09;恢复&#xff08;3&#xff09;手动恢复的办法 2. gs_basebackup&#xff08;1&#xff09;备份&#xff08;2&#xff09;恢复① 伪造数据目录丢失② 恢复 3. gs_probackup&#xff08;1&#xf…

MySQL隐式依赖引发的字段长度溢出:一次触发器事故的深度剖析

MySQL隐式依赖引发的字段长度溢出&#xff1a;一次触发器事故的深度剖析 场景还原&#xff1a;诡异的字段不存在报错 某日接到生产环境报警&#xff0c;发现核心业务表order_main&#xff08;A表&#xff09;的插入操作频繁报错&#xff0c;错误提示却显示ERROR 1406 (22001)…

极客天成 NVFile 并行文件存储:端到端无缓存新范式,为 AI 训练按下“快进键”

在人工智能的世界里&#xff0c;AI 训练就像一场“数据马拉松”。模型需要从海量数据中学习规律&#xff0c;而这些数据的读取速度往往决定了训练的效率。今天&#xff0c;我们就来聊聊一个有趣的话题&#xff1a;极客天成的 NVFile 并行文件存储&#xff0c;以及它的端到端无缓…

C语言基础知识04

指针 指针概念 指针保存地址&#xff0c;地址是字节的编号 指针类型和保存的地址类型要一直 使用时注意&#xff0c;把地址转换为&变量的格式来看 int a[3]; a转为&a[0] 指针的大小 64bit 固定8字节&#xff0c; 32bit 固定4字节 指针…

【机械视觉】C#+VisionPro联合编程———【五、硬币检测小项目实现(C#+VisionPro联合编程和csv文件格式操作)】

【机械视觉】C#VisionPro联合编程———【五、硬币检测小项目实现(C#VisionPro联合编程和csv文件格式操作)】 项目介绍 总共有十二张检测的图片&#xff0c;当点击检测按钮时检测当前展示的图片并且将检测效果展示在表格中&#xff0c;当点击上一页或下一页时换检测图片&…

G-Star 公益行起航,挥动开源技术点亮公益!

公益组织&#xff0c;一直是社会温暖的传递者&#xff0c;但在数字化浪潮中&#xff0c;也面临着诸多比大众想象中复杂的挑战&#xff1a;项目管理如何更高效&#xff1f;志愿者管理又该如何创新&#xff1f;宣传推广怎么才能更有影响力&#xff1f;内部管理和技术支持又该如何…

通过qemu仿真树莓派系统调试IoT固件和程序

通过qemu仿真树莓派系统调试IoT固件和程序 本文将介绍如何使用 QEMU 模拟器在 x86 架构的主机上运行 Raspberry Pi OS&#xff08;树莓派操作系统&#xff09;。我们将从下载镜像、提取内核和设备树文件&#xff0c;到启动模拟环境&#xff0c;并进行一些常见的操作&#xff0…

微软 System Center Configuration Manager(SCCM)的组件文件

微软 System Center Configuration Manager(SCCM) 或 Microsoft Endpoint Configuration Manager(MECM) 的组件文件,属于企业级设备管理工具的一部分。以下是具体说明: C:\Windows\CCM\smsswd.exe C:\Windows\CCM\tsmanager.exe smsswd.exe 和 tsmanager.exe 是 Micros…