HarmonyOS ArkUI之仿微信圖片選擇

作者：佚名 2021-11-23 10:00:55

開發 OpenHarmony

本文介紹仿照微信選擇圖片、多選圖片、點擊瀏覽大圖，刪除選擇的圖片，因為用的ets語言開發，為了方便演示，圖片數據沒有獲取手機本地圖片，使用內置資源。

[[435292]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

前言

本項目就是基于ArkUI中的聲明式編程開發，語言ETS(Extended Type Script)，代碼都在ets文件中編寫，這個文件用于描述 UI 布局、樣式、事件交互和頁面邏輯。

官方文檔地址：基于TS擴展的聲明式開發范式1 基于TS擴展的聲明式開發范式2

前文回顧【HarmonyOS ArkUI之仿微信朋友圈圖片預覽】仿微信朋友圈實現列表展示，九宮格小圖圖片展示，點擊圖片進行圖片預覽，圖片左右滑動切換。

效果演示

項目類說明

主要知識點

九宮格列表和選擇圖片列表：網格容器組件(Grid)

瀏覽大圖切換頁面：滑動容器組件(Swiper)

循環渲染迭代數組：渲染組件(ForEach) (目前第二個參數中 itemGenerator: (item: any, index?: number) => void index不能使用)

基礎的組件：圖片顯示(Image) 文本顯示(Text) 按鈕(Button)

代碼解析

1、圖片列表

主要是網格容器Grid組件和渲染組件ForEach，注釋也很清楚，讓你更快掌握知識點。(簡單示例)

@Entry 
@Component 
struct Test { 
  @State private listPicture: Array<Resource> = [ 
    $r("app.media.ic_picture1"), $r("app.media.ic_picture2"), $r("app.media.ic_picture3"), 
    $r("app.media.ic_picture4"), $r("app.media.ic_picture5"), $r("app.media.ic_picture6"), 
    $r("app.media.ic_picture7"), $r("app.media.ic_picture8"), $r("app.media.ic_picture9"), 
    $r("app.media.ic_picture10"), $r("app.media.ic_picture11"), $r("app.media.ic_picture12") 
  ] 
 
  build() { 
    Column() { 
      // 網格圖片列表 
      Grid() { 
        ForEach(this.listPicture, item => { 
          GridItem() { 
            // 圖片 
            Image(item) 
              .width('100%') 
              .height(90) 
              .objectFit(ImageFit.Cover) // 縮放類型 
          } 
        }, item => item.toString()) // ForEach第三個參數需要設置，否則模擬器不顯示 
      }.columnsTemplate('1fr 1fr 1fr 1fr') // 4等分列 
      .columnsGap(2) // 列間距 
      .rowsGap(2) // 行間距 
    } 
    .width('100%') 
    .height('100%') 
  } 
}

2、點擊選擇框

處理選中和未選中效果，主要點擊當前項時，根據選中狀態進行替換列表中的對象，設置按鈕的文字和啟用狀態，框架會自動更新界面。(項目中部分代碼)

...... 
  /** 
   * 點擊是否選中 
   */ 
  clickIsSelected(item:PictureData) { 
    // 點擊未選中 且 選中數大于總數，則返回 
    if (!item.isSelected && this.listSelectPicture.length >= this.total) { 
      return 
    } 
 
    //全部列表：替換元素、更新選中狀態 
    let newItem = { 
      id: item.id, 
      picResource: item.picResource, 
      isSelected: !item.isSelected 
    } 
    this.listAllPicture.splice(item.id, 1, newItem) 
 
    //選中的列表：選中就添加，未選中刪除 
    if (newItem.isSelected) { 
      this.listSelectPicture.push(item.picResource) 
    } else { 
      let index = this.listSelectPicture.indexOf(item.picResource) 
      this.listSelectPicture.splice(index, 1) 
    } 
 
    // 根據選中的數量，顯示按鈕狀態和文字 
    this.isEnabledComplete = this.listSelectPicture.length != 0 
    if(this.listSelectPicture.length == 0){ 
      this.completeText = '完成'; 
    }else{ 
      this.completeText = `完成(${this.listSelectPicture.length}/${this.total})`; 
    } 
  } 
......

3、顯示選中的圖片

需要注意的點：根據選擇的圖片總數，顯示或隱藏添加按鈕。(項目中部分代碼)

...... 
  /** 
   * 在build函數之前執行 
   */ 
  private aboutToAppear() { 
    // 首次進入顯示添加按鈕 
    let showAddData = new HomePictureData(-1, $r('app.media.ic_add'), true) 
    this.listPicture.push(showAddData) 
  } 
 
  /** 
   * 頁面顯示觸發 
   */ 
  private onPageShow() { 
    try { 
      let list: Array<Resource> = router.getParams().listSelectPicture 
      // 存入圖片 
      for (let listKey of list) { 
        this.listSelectPicture.push(listKey) 
      } 
      // 清空舊數據 
      this.listPicture = [] 
      // 添加新的數據，存入id 
      for (var i = 0;i < this.listSelectPicture.length; i++) { 
        let resource = this.listSelectPicture[i] 
        this.listPicture.push(new HomePictureData(i, resource, false)) 
      } 
      // 判斷是否小于總數，設置最后一位顯示加號 
      if (this.listSelectPicture.length < this.total) { 
        let showAddData = new HomePictureData(-1, $r('app.media.ic_add'), true) 
        this.listPicture.push(showAddData) 
      } 
    } catch (err) { 
      console.log(`router錯誤 code: ${err.code}, msg: ${err.msg}`) 
    } 
  } 
......

4、瀏覽大圖

主要使用滑動容器組件Swiper，根據上個頁面傳的操作值：是否刪除、顯示刪除按鈕。(簡單示例)

@Entry 
@Component 
struct Test { 
  @State private listPicture: Array<Resource> = [ 
    $r("app.media.ic_picture1"), $r("app.media.ic_picture2"), $r("app.media.ic_picture3"), 
    $r("app.media.ic_picture4"), $r("app.media.ic_picture5"), $r("app.media.ic_picture6"), 
    $r("app.media.ic_picture7"), $r("app.media.ic_picture8"), $r("app.media.ic_picture9"), 
    $r("app.media.ic_picture10"), $r("app.media.ic_picture11"), $r("app.media.ic_picture12") 
  ] 
  @State imageIndex:number = 0 
 
  build() { 
    Column() { 
      // 切換頁面 
      Swiper() { 
        ForEach(this.listPicture, item => { 
 
          // 圖片 
          Image(item) 
            .width('100%') 
            .height('100%') 
            .objectFit(ImageFit.Cover) //縮放類型 
 
        }, item => item.toString()) 
      } 
      .width('100%') 
      .height('100%') 
      .index(this.imageIndex)// 設置當前索引 
      .indicator(false)// 不顯示指示器 
      .loop(false) // 關閉循環 
      .onChange((index: number) => {// 索引變化監聽 
        // 更新索引值 
        this.imageIndex = index 
      }) 
    } 
    .width('100%') 
    .height('100%') 
  } 
}