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

2025-03-13
北京
本文字数：4055 字
阅读完需：约 13 分钟

1、HarmonyOS 功能实现（拖拽调整列表顺序）？

可参考：

import curves from '@ohos.curves';import Curves from '@ohos.curves'
@Entry@Componentstruct 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 = -1  private dragRefOffset: number = 0  @State offsetX: number = 0  @State offsetY: number = 0  private ITEM_INTV: number = 120  scaleSelect(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 = item                  this.dragRefOffset = 0                })                .onActionUpdate((event: GestureEvent) => {                  this.offsetY = event.offsetY - this.dragRefOffset                  // console.log('Y:' + this.offsetY.toString())                  this.neighborItem = -1                  let 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_INTV                      this.dragRefOffset += this.ITEM_INTV                      this.itemMove(index, index + 1)                    })                  } else if (this.offsetY < -this.ITEM_INTV / 2) {                    animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {                      this.offsetY += this.ITEM_INTV                      this.dragRefOffset -= this.ITEM_INTV                      this.itemMove(index, index - 1)                    })                  }                })                .onActionEnd((event: GestureEvent) => {                  animateTo({ curve: curves.interpolatingSpring(0, 1, 400, 38) }, () => {                    this.dragItem = -1                    this.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 = -1                  this.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@Componentstruct 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 修饰的枚举报错。具体原因如下：

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

5、HarmonyOS loading 跨页面实现方式?

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

@Entry@Componentexport 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)  }}