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修飾的枚舉報錯。具體原因如下:
- 不支持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