【每日学点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 = -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
@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修饰的枚举报错。具体原因如下：
- 不支持declare关键字：ArkTS不支持使用declare关键字定义类。这是因为declare关键字主要用于声明变量或类型，而不是定义类。因此，如果你在struct页面中使用declare关键字定义类，会导致编译错误。
- @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