HarmonyOS NEXT星河版之模拟图片选择器(下)---使用CustomDialog展示图片

文章目录

- 一、目标
- 二、开撸
- - 2.1 自定义弹窗
  - 2.2 主页面事件处理
  - 2.3 主页面完整代码
- 三、小结

一、目标

在这里插入图片描述

二、开撸

2.1 自定义弹窗

@CustomDialog
export struct SinglePreviewDialog {
  // 弹窗控制器 must
  controller: CustomDialogController
  // 展示图片URL
  imgUrl: ResourceStr = ''

  build() {
    Column() {
      Image(this.imgUrl)
        .width('100%')
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.Black)
    .onClick(() => {
      // 关闭弹窗
      this.controller.close()
    })
  }
}

2.2 主页面事件处理

声明变量，记录当前选择图片地址：

selectImgUrl: ResourceStr = ''

声明自定义Dialog对象：

singlePreviewDialog: CustomDialogController = new CustomDialogController({
  builder: SinglePreviewDialog({
    imgUrl: this.selectImgUrl
  }),
  customStyle: true //使用自定义Dialog的样式
})

图片注册点击事件：

Image(item.imgUrl)
    .aspectRatio(1)
    .onClick(() => {
      this.selectImgUrl = item.imgUrl
      this.singlePreviewDialog.open()
    })

2.3 主页面完整代码

import { PhotoAlbumView } from './components/PhotoAlbumView';
import { SelectImageItem } from './models';
import { promptAction } from '@kit.ArkUI';
import { SinglePreviewDialog } from './dialog/SinglePreviewDialog';

@Entry
@Component
struct PhotoAlbumDemoPage {
  @State message: string = 'Hello World';
  @State showPhotoAlbum: boolean = false
  @State selectImgList: SelectImageItem[] = []
  // 当前选中图片
  selectImgUrl: ResourceStr = ''
  // 单图预览dialog
  singlePreviewDialog: CustomDialogController = new CustomDialogController({
    builder: SinglePreviewDialog({
      imgUrl: this.selectImgUrl
    }),
    customStyle: true //使用自定义Dialog的样式
  })

  build() {
    Column() {
      Button('打开相册')
        .onClick(() => {
          this.showPhotoAlbum = true
        })
      Text('已选择图片：')
        .width('100%')
        .textAlign(TextAlign.Start)
      if (this.selectImgList && this.selectImgList.length) {
        Grid() {
          ForEach(this.selectImgList, (item: SelectImageItem) => {
            GridItem() {
              Stack() {
                Image(item.imgUrl)
                  .aspectRatio(1)
                  .onClick(() => {
                    this.selectImgUrl = item.imgUrl
                    this.singlePreviewDialog.open()
                  })
              }
            }
          }, (item: SelectImageItem) => JSON.stringify(item))
        }
        .columnsTemplate('1fr 1fr 1fr')
        .columnsGap(5)
        .rowsGap(5)
        .padding(10)
        .layoutWeight(1)
      }
      if (this.showPhotoAlbum) {
        PhotoAlbumView({
          maxNumber: 5,
          cancel: () => {
            this.showPhotoAlbum = false
          },
          confirm: (selectImgList: SelectImageItem[]) => {
            this.showPhotoAlbum = false
            this.selectImgList = [...this.selectImgList, ...selectImgList]
          }
        })
      }
    }
    .width('100%')
    .height('100%')
  }
}