介紹

本示例使用滑動(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)切換圖片效果的功能。

效果圖預(yù)覽

使用說(shuō)明

1. 點(diǎn)擊中間按鈕進(jìn)行左右拖動(dòng)切換圖片。

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

本例涉及的關(guān)鍵特性和實(shí)現(xiàn)方案如下：

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

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'))

2. 將Image組件放在Row容器里，將Row容器的寬度設(shè)置為狀態(tài)變量，再利用clip屬性對(duì)于Row容器進(jìn)行裁剪。 源碼參考DragToSwitchPicturesView.ets。

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)效果。

3. 右邊的Image組件與左邊同樣的操作，但是新增了一個(gè)direction屬性，使元素從右至左進(jìn)行布局，為的是讓Row從左側(cè)開(kāi)始裁剪。 源碼參考DragToSwitchPicturesView.ets。

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)效果。

4. 中間的Image組件通過(guò)手勢(shì)事件中的滑動(dòng)手勢(shì)對(duì)Image組件滑動(dòng)進(jìn)行監(jiān)聽(tīng)，對(duì)左右Image組件的寬度進(jìn)行計(jì)算從而重新布局渲染。 源碼參考DragToSwitchPicturesView.ets。

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視圖

模塊依賴

routermodule

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

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

本示例使用了LazyForEach進(jìn)行數(shù)據(jù)懶加載，WaterFlow布局時(shí)會(huì)根據(jù)可視區(qū)域按需創(chuàng)建FlowItem組件，并在FlowItem滑出可視區(qū)域外時(shí)銷(xiāo)毀以降低內(nèi)存占用。

本示例使用了cachedCount設(shè)置預(yù)加載的FlowItem的數(shù)量，只在LazyForEach中生效，設(shè)置該屬性后會(huì)緩存cachedCount個(gè)FlowItem，LazyForEach超出顯示和緩存范圍的FlowItem會(huì)被釋放。

參考資料

LazyForEach：數(shù)據(jù)懶加載

Tabs

WaterFlow

ZIndex

PanGesture

clip

direction