[[435292]]

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

前言

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

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

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

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

效果演示

項目類說明

主要知識點

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

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

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

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

代碼解析

1、圖片列表

主要是網(wǎng)格容器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() { 
      // 網(wǎng)格圖片列表 
      Grid() { 
        ForEach(this.listPicture, item => { 
          GridItem() { 
            // 圖片 
            Image(item) 
              .width('100%') 
              .height(90) 
              .objectFit(ImageFit.Cover) // 縮放類型 
          } 
        }, item => item.toString()) // ForEach第三個參數(shù)需要設(shè)置，否則模擬器不顯示 
      }.columnsTemplate('1fr 1fr 1fr 1fr') // 4等分列 
      .columnsGap(2) // 列間距 
      .rowsGap(2) // 行間距 
    } 
    .width('100%') 
    .height('100%') 
  } 
} 

2、點擊選擇框

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

...... 
  /** 
   * 點擊是否選中 
   */ 
  clickIsSelected(item:PictureData) { 
    // 點擊未選中 且 選中數(shù)大于總數(shù)，則返回 
    if (!item.isSelected && this.listSelectPicture.length >= this.total) { 
      return 
    } 
 
    //全部列表：替換元素、更新選中狀態(tài) 
    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) 
    } 
 
    // 根據(jù)選中的數(shù)量，顯示按鈕狀態(tài)和文字 
    this.isEnabledComplete = this.listSelectPicture.length != 0 
    if(this.listSelectPicture.length == 0){ 
      this.completeText = '完成'; 
    }else{ 
      this.completeText = `完成(${this.listSelectPicture.length}/${this.total})`; 
    } 
  } 
...... 

3、顯示選中的圖片

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

...... 
  /** 
   * 在build函數(shù)之前執(zhí)行 
   */ 
  private aboutToAppear() { 
    // 首次進入顯示添加按鈕 
    let showAddData = new HomePictureData(-1, $r('app.media.ic_add'), true) 
    this.listPicture.push(showAddData) 
  } 
 
  /** 
   * 頁面顯示觸發(fā) 
   */ 
  private onPageShow() { 
    try { 
      let list: Array<Resource> = router.getParams().listSelectPicture 
      // 存入圖片 
      for (let listKey of list) { 
        this.listSelectPicture.push(listKey) 
      } 
      // 清空舊數(shù)據(jù) 
      this.listPicture = [] 
      // 添加新的數(shù)據(jù)，存入id 
      for (var i = 0;i < this.listSelectPicture.length; i++) { 
        let resource = this.listSelectPicture[i] 
        this.listPicture.push(new HomePictureData(i, resource, false)) 
      } 
      // 判斷是否小于總數(shù)，設(shè)置最后一位顯示加號 
      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，根據(jù)上個頁面?zhèn)鞯牟僮髦担菏欠駝h除、顯示刪除按鈕。(簡單示例)

@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)// 設(shè)置當前索引 
      .indicator(false)// 不顯示指示器 
      .loop(false) // 關(guān)閉循環(huán) 
      .onChange((index: number) => {// 索引變化監(jiān)聽 
        // 更新索引值 
        this.imageIndex = index 
      }) 
    } 
    .width('100%') 
    .height('100%') 
  } 
} 

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com