AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當(dāng)前位置：首頁(yè) > 科技  > 軟件

左右拖動(dòng)切換圖片效果案例

來(lái)源： 責(zé)編： 時(shí)間：2024-03-18 09:40:45 180觀看
導(dǎo)讀想了解更多關(guān)于開(kāi)源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：51CTO 鴻蒙開(kāi)發(fā)者社區(qū)https://ost.51cto.com介紹本示例使用滑動(dòng)手勢(shì)監(jiān)聽(tīng)，實(shí)時(shí)調(diào)整左右兩側(cè)內(nèi)容顯示區(qū)域大小和效果。通過(guò)綁定gesture事件中的PanGesture平移手勢(shì)，實(shí)時(shí)獲取拖動(dòng)距離。當(dāng)拖

64e28資訊網(wǎng)——每日最新資訊28at.com

想了解更多關(guān)于開(kāi)源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：64e28資訊網(wǎng)——每日最新資訊28at.com

51CTO 鴻蒙開(kāi)發(fā)者社區(qū)64e28資訊網(wǎng)——每日最新資訊28at.com

https://ost.51cto.com64e28資訊網(wǎng)——每日最新資訊28at.com

介紹

本示例使用滑動(dòng)手勢(shì)監(jiān)聽(tīng)，實(shí)時(shí)調(diào)整左右兩側(cè)內(nèi)容顯示區(qū)域大小和效果。通過(guò)綁定gesture事件中的PanGesture平移手勢(shì)，實(shí)時(shí)獲取拖動(dòng)距離。當(dāng)拖動(dòng)時(shí)，實(shí)時(shí)地調(diào)節(jié)左右兩個(gè)Image組件的寬度，從而成功實(shí)現(xiàn)左右拖動(dòng)切換圖片效果的功能。64e28資訊網(wǎng)——每日最新資訊28at.com

效果圖預(yù)覽

64e28資訊網(wǎng)——每日最新資訊28at.com

使用說(shuō)明

點(diǎn)擊中間按鈕進(jìn)行左右拖動(dòng)切換圖片。64e28資訊網(wǎng)——每日最新資訊28at.com

實(shí)現(xiàn)思路

本例涉及的關(guān)鍵特性和實(shí)現(xiàn)方案如下：64e28資訊網(wǎng)——每日最新資訊28at.com

創(chuàng)建三個(gè)Stack組件，用來(lái)展示裝修前后對(duì)比圖，第一個(gè)和第三個(gè)Stack分別存放裝修前的圖片和裝修后的圖片，zIndex設(shè)置為1。第二個(gè)Stack存放按鈕的圖片，zIndex設(shè)置為2，這樣按鈕的圖片就會(huì)覆蓋在兩張裝修圖片之上。
源碼參考DragToSwitchPicturesView.ets。64e28資訊網(wǎng)——每日最新資訊28at.com

Row() {  Stack() {...}  .zIndex(CONFIGURATION.ZINDEX1)  .width(this.leftImageWidth) // z序設(shè)為1，為了使按鈕圖片浮在裝修圖片上。  Stack() {...}  .width($r('app.integer.drag_button_stack_width'))  .zIndex(CONFIGURATION.ZINDEX2) // z序設(shè)為2，為了使按鈕圖片浮在裝修圖片上。  Stack() {...}  .zIndex(CONFIGURATION.ZINDEX1) // z序設(shè)為1，為了使按鈕圖片浮在裝修圖片上。  .width(this.rightImageWidth)}.justifyContent(FlexAlign.Center).width($r('app.string.full_size'))

將Image組件放在Row容器里，將Row容器的寬度設(shè)置為狀態(tài)變量，再利用clip屬性對(duì)于Row容器進(jìn)行裁剪。
源碼參考DragToSwitchPicturesView.ets。64e28資訊網(wǎng)——每日最新資訊28at.com

Row() {  Image($r('app.media.before_decoration'))    .width($r('app.integer.decoration_width'))// Image的width固定，Row的寬度變化，通過(guò)裁剪實(shí)現(xiàn)布局效果。    .height($r('app.integer.decoration_height'))    .draggable(false) // 設(shè)置Image不能拖動(dòng)，不然長(zhǎng)按Image會(huì)被拖動(dòng)。  }  .width(this.leftImageWidth) // 將左側(cè)Row的width設(shè)置為leftImageWidth，這樣左側(cè)Row的width隨leftImageWidth的變化而變化。  .clip(true) // clip屬性設(shè)置為true，裁剪超出Row寬度的圖片。  .zIndex(CONFIGURATION.ZINDEX1) // z序設(shè)為1，為了使水印浮在裝修圖片上。  .borderRadius({    topLeft: $r('app.integer.borderradius'),    bottomLeft: $r('app.integer.borderradius')  }) // 將Row的左上角和左下角弧度設(shè)為10實(shí)現(xiàn)效果。

右邊的Image組件與左邊同樣的操作，但是新增了一個(gè)direction屬性，使元素從右至左進(jìn)行布局，為的是讓Row從左側(cè)開(kāi)始裁剪。
源碼參考DragToSwitchPicturesView.ets。64e28資訊網(wǎng)——每日最新資訊28at.com

Row() { Image($r('app.media.after_decoration'))   .width($r('app.integer.decoration_width'))   .height($r('app.integer.decoration_height'))   .draggable(false)}.width(this.rightImageWidth).clip(true).zIndex(CONFIGURATION.ZINDEX1) // z序設(shè)為1，為了使水印浮在裝修圖片上。// TODO: 知識(shí)點(diǎn)：左邊Row使用clip時(shí)從右邊開(kāi)始裁剪，加了Direction.Rtl后，元素從右到左布局，右邊Row使用clip時(shí)從左邊開(kāi)始裁剪，這是實(shí)現(xiàn)滑動(dòng)改變視圖內(nèi)容大小的關(guān)鍵。.direction(Direction.Rtl).borderRadius({ topRight: $r('app.integer.borderradius'), bottomRight: $r('app.integer.borderradius')}) // 將Row的右上角和右下角弧度設(shè)為10實(shí)現(xiàn)效果。

中間的Image組件通過(guò)手勢(shì)事件中的滑動(dòng)手勢(shì)對(duì)Image組件滑動(dòng)進(jìn)行監(jiān)聽(tīng)，對(duì)左右Image組件的寬度進(jìn)行計(jì)算從而重新布局渲染。
源碼參考DragToSwitchPicturesView.ets。64e28資訊網(wǎng)——每日最新資訊28at.com

Image($r('app.media.drag_button'))  .width($r('app.integer.drag_button_image_width'))  .height($r('app.integer.decoration_height'))  .draggable(false)  .gesture( // TODO: 知識(shí)點(diǎn)：拖動(dòng)手勢(shì)事件設(shè)置一個(gè)手指，滑動(dòng)的最小距離設(shè)置為1vp，實(shí)現(xiàn)滑動(dòng)時(shí)按鈕跟手動(dòng)效。    PanGesture({ fingers: CONFIGURATION.PANGESTURE_FINGERS, distance: CONFIGURATION.PANGESTURE_DISTANCE })      .onActionStart(() => {        this.dragRefOffset = CONFIGURATION.INIT_VALUE; // 每次拖動(dòng)開(kāi)始時(shí)將圖標(biāo)拖動(dòng)的距離初始化。      })      // TODO: 性能知識(shí)點(diǎn): 該函數(shù)是系統(tǒng)高頻回調(diào)函數(shù)，避免在函數(shù)中進(jìn)行冗余或耗時(shí)操作，例如應(yīng)該減少或避免在函數(shù)打印日志，會(huì)有較大的性能損耗。      .onActionUpdate((event: GestureEvent) => {        // 通過(guò)監(jiān)聽(tīng)GestureEvent事件，實(shí)時(shí)監(jiān)聽(tīng)圖標(biāo)拖動(dòng)距離        this.dragRefOffset = event.offsetX;        this.leftImageWidth = this.imageWidth + this.dragRefOffset;        this.rightImageWidth = CONFIGURATION.IMAGE_FULL_SIZE - this.leftImageWidth;        if (this.leftImageWidth >= CONFIGURATION.LEFT_IMAGE_RIGHT_LIMIT_SIZE) { // 當(dāng)leftImageWidth大于等于310vp時(shí)，設(shè)置左右Image為固定值，實(shí)現(xiàn)停止滑動(dòng)效果。          this.leftImageWidth = CONFIGURATION.LEFT_IMAGE_RIGHT_LIMIT_SIZE;          this.rightImageWidth = CONFIGURATION.RIGHT_IMAGE_RIGHT_LIMIT_SIZE;        } else if (this.leftImageWidth <= CONFIGURATION.LEFT_IMAGE_LEFT_LIMIT_SIZE) { // 當(dāng)leftImageWidth小于等于30vp時(shí)，設(shè)置左右Image為固定值，實(shí)現(xiàn)停止滑動(dòng)效果。          this.leftImageWidth = CONFIGURATION.LEFT_IMAGE_LEFT_LIMIT_SIZE;          this.rightImageWidth = CONFIGURATION.RIGHT_IMAGE_LEFT_LIMIT_SIZE;        }      })      .onActionEnd((event: GestureEvent) => {        if (this.leftImageWidth <= CONFIGURATION.LEFT_IMAGE_LEFT_LIMIT_SIZE) {          this.leftImageWidth = CONFIGURATION.LEFT_IMAGE_LEFT_LIMIT_SIZE;          this.rightImageWidth = CONFIGURATION.RIGHT_IMAGE_LEFT_LIMIT_SIZE;          this.imageWidth = CONFIGURATION.LEFT_IMAGE_LEFT_LIMIT_SIZE;        } else if (this.leftImageWidth >= CONFIGURATION.LEFT_IMAGE_RIGHT_LIMIT_SIZE) {          this.leftImageWidth = CONFIGURATION.LEFT_IMAGE_RIGHT_LIMIT_SIZE;          this.rightImageWidth = CONFIGURATION.RIGHT_IMAGE_RIGHT_LIMIT_SIZE;          this.imageWidth = CONFIGURATION.LEFT_IMAGE_RIGHT_LIMIT_SIZE;        } else {          this.leftImageWidth = this.imageWidth + this.dragRefOffset; // 滑動(dòng)結(jié)束時(shí)leftImageWidth等于左邊原有Width+拖動(dòng)距離。          this.rightImageWidth = CONFIGURATION.IMAGE_FULL_SIZE - this.leftImageWidth; // 滑動(dòng)結(jié)束時(shí)rightImageWidth等于340-leftImageWidth。          this.imageWidth = this.leftImageWidth; // 滑動(dòng)結(jié)束時(shí)ImageWidth等于leftImageWidth。        }      })  )

工程結(jié)構(gòu)&模塊類型

dragtoswitchpictures                             // har包   |---common   |   |---Constants.ets                            // 常量類   |---data   |   |---DragToSwitchPicturesData.ets             // 生成模擬數(shù)據(jù)   |---datasource   |   |---BasicDataSource.ets                      // Basic數(shù)據(jù)控制器   |   |---DragToSwitchPicturesDataSource.ets       // 左右拖動(dòng)切換圖片數(shù)據(jù)控制器   |---mainpage   |   |---DragToSwitchPictures.ets                 // 主頁(yè)面   |---model   |   |---DragToSwitchPicturesModule.ets           // 左右拖動(dòng)切換圖片數(shù)據(jù)模型   |---view   |   |---DragToSwitchPicturesView.ets             // 左右拖動(dòng)切換圖片視圖   |   |---DesignCattleView.ets                     // AI設(shè)計(jì)視圖   |   |---TabsWaterFlowView.ets                    // 瀑布流嵌套Tabs視圖

模塊依賴

routermodule64e28資訊網(wǎng)——每日最新資訊28at.com

高性能知識(shí)點(diǎn)

本例使用了onActionUpdate函數(shù)。該函數(shù)是系統(tǒng)高頻回調(diào)函數(shù)，避免在函數(shù)中進(jìn)行冗余或耗時(shí)操作，例如應(yīng)該減少或避免在函數(shù)打印日志，會(huì)有較大的性能損耗。64e28資訊網(wǎng)——每日最新資訊28at.com

本示例使用了LazyForEach進(jìn)行數(shù)據(jù)懶加載，WaterFlow布局時(shí)會(huì)根據(jù)可視區(qū)域按需創(chuàng)建FlowItem組件，并在FlowItem滑出可視區(qū)域外時(shí)銷毀以降低內(nèi)存占用。64e28資訊網(wǎng)——每日最新資訊28at.com

本示例使用了cachedCount設(shè)置預(yù)加載的FlowItem的數(shù)量，只在LazyForEach中生效，設(shè)置該屬性后會(huì)緩存cachedCount個(gè)FlowItem，LazyForEach超出顯示和緩存范圍的FlowItem會(huì)被釋放。64e28資訊網(wǎng)——每日最新資訊28at.com

想了解更多關(guān)于開(kāi)源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：64e28資訊網(wǎng)——每日最新資訊28at.com

51CTO 鴻蒙開(kāi)發(fā)者社區(qū)64e28資訊網(wǎng)——每日最新資訊28at.com

https://ost.51cto.com64e28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-76513-0.html左右拖動(dòng)切換圖片效果案例

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 實(shí)戰(zhàn) | 生產(chǎn)環(huán)境中如何動(dòng)態(tài)調(diào)整線程池大小？

下一篇： 2024 年這五個(gè) Node.js 后端框架最受歡迎！

標(biāo)簽：
  • 熱門(mén)焦點(diǎn)

  • Redmi Pad評(píng)測(cè)：紅米充滿野心的一次嘗試

    從Note系列到K系列，從藍(lán)牙耳機(jī)到筆記本電腦，紅米不知不覺(jué)之間也已經(jīng)形成了自己頗有競(jìng)爭(zhēng)力的產(chǎn)品體系，在中端和次旗艦市場(chǎng)上甚至要比小米新機(jī)的表現(xiàn)來(lái)得更好，正所謂“大丈夫生居

  • 自動(dòng)化在DevOps中的力量：簡(jiǎn)化軟件開(kāi)發(fā)和交付

    自動(dòng)化在DevOps中扮演著重要角色，它提升了DevOps的效能。通過(guò)自動(dòng)化工具和方法，DevOps團(tuán)隊(duì)可以實(shí)現(xiàn)以下目標(biāo)：消除手動(dòng)和重復(fù)性任務(wù)。簡(jiǎn)化流程。在整個(gè)軟件開(kāi)發(fā)生命周期中實(shí)現(xiàn)更

  • 拼多多APP上線本地生活入口，群雄逐鹿萬(wàn)億市場(chǎng)

    Tech星球（微信ID：tech618）文 | 陳橋輝 Tech星球獨(dú)家獲悉，拼多多在其APP內(nèi)上線了&ldquo;本地生活&rdquo;入口，位置較深，位于首頁(yè)的&ldquo;充值中心&rdquo;內(nèi)，目前主要售賣美食相關(guān)的

  • 自律，給不了Keep自由！

    來(lái)源 | 互聯(lián)網(wǎng)品牌官作者 | 李大為編排 | 又耳 審核 | 谷曉輝自律能不能給用戶自由暫時(shí)不好說(shuō)，但大概率不能給Keep自由。近日，全球最大的在線健身平臺(tái)Keep正式登陸港交所，努力

  • 大廠卷向扁平化

    來(lái)源：新熵作者丨南枝 編輯丨月見(jiàn)大廠職級(jí)不香了。俗話說(shuō)，兵無(wú)常勢(shì)，水無(wú)常形，互聯(lián)網(wǎng)企業(yè)調(diào)整職級(jí)體系并不稀奇。7月13日，淘寶天貓集團(tuán)啟動(dòng)了近年來(lái)最大的人力制度改革，目前已形成一

  • 東方甄選單飛：有些鳥(niǎo)注定是關(guān)不住的

    文/彭寬鴻編輯/羅卿東方甄選創(chuàng)始人俞敏洪帶隊(duì)的&ldquo;7天甘肅行&rdquo;直播活動(dòng)已在近日順利收官。成立后一年多時(shí)間里，東方甄選要脫離抖音自立門(mén)戶的傳聞不絕于耳，&ldquo;7

  • 華為HarmonyOS 4升級(jí)計(jì)劃公布：首批34款機(jī)型今日開(kāi)啟公測(cè)

    8月4日消息，今天下午華為正式發(fā)布了HarmonyOS 4系統(tǒng)，在更流暢的前提下，還帶來(lái)了不少新功能，UI設(shè)計(jì)也有變化，會(huì)讓手機(jī)煥然一新。華為宣布，首批機(jī)型將會(huì)在

  • 三星折疊屏手機(jī)去年銷售近1000萬(wàn)臺(tái) 今年目標(biāo)定為1500萬(wàn)

    7月29日消息，三星率先發(fā)力可折疊手機(jī)市場(chǎng)，在全球市場(chǎng)已經(jīng)取得了非常亮眼的成績(jī)，接下來(lái)會(huì)進(jìn)一步鞏固和擴(kuò)大這一優(yōu)勢(shì)。三星在推出Galaxy Z Flip5和Galax

  • 滴滴違法違規(guī)被罰80.26億 共存在16項(xiàng)違法事實(shí)

    滴滴違法違規(guī)被罰80.26億 存在16項(xiàng)違法事實(shí)開(kāi)始于2121年7月，歷經(jīng)一年時(shí)間，網(wǎng)絡(luò)安全審查辦公室對(duì)“滴滴出行”網(wǎng)絡(luò)安全審查終于有了一個(gè)暫時(shí)的結(jié)束。據(jù)“網(wǎng)信
Top