【每日學點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.pswp.cn/pingmian/72133.shtml
繁體地址,請注明出處:http://hk.pswp.cn/pingmian/72133.shtml
英文地址,請注明出處:http://en.pswp.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…