HarmonyOS NEXT星河版之模拟图片选择器(下)---使用Swiper实现图片滑动预览

一、目标

在前面的介绍中，查看选中的图片都是单张预览，接下来要改造成多张可滑动预览，如下：

二、开撸

2.1 改造图片预览Dialog

@CustomDialog
export struct SinglePreviewDialog {
  // 弹窗控制器 must
  controller: CustomDialogController
  // 展示图片URL列表
  imgUrlList: ResourceStr[] = []
  // 当前点击索引
  selectIndex: number = 0

  build() {
    if (this.imgUrlList && this.imgUrlList.length) {
      Column() {
        // 使用Swiper组件
        Swiper() {
          ForEach(this.imgUrlList, (item: ResourceStr) => {
            Image(item)
              .width('100%')
          })
        }
        // 绑定当前index
        .index(this.selectIndex)
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .backgroundColor(Color.Black)
      .onClick(() => {
        // 关闭弹窗
        this.controller.close()
      })
    }

  }
}

2.2 改造主页面

声明当前点击图片索引：

// 当前图片索引
selectIndex: number = 0

点击图片时，给索引赋值：

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

对预览Dialog在初始化时，更改传参：

singlePreviewDialog: CustomDialogController = new CustomDialogController({
  builder: SinglePreviewDialog({
    imgUrlList: this.selectImgList.map(item => item.imgUrl),
    selectIndex: this.selectIndex
  }),
  customStyle: true //使用自定义Dialog的样式
})

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 = ''
  // 当前图片索引
  selectIndex: number = 0
  // 单图预览dialog
  singlePreviewDialog: CustomDialogController = new CustomDialogController({
    builder: SinglePreviewDialog({
      imgUrlList: this.selectImgList.map(item => item.imgUrl),
      selectIndex: this.selectIndex
    }),
    customStyle: true //使用自定义Dialog的样式
  })

  @Builder
  sheetPhotoAlbum() {
    Column() {
      PhotoAlbumView({
        maxNumber: 5,
        cancel: () => {
          this.showPhotoAlbum = false
        },
        confirm: (selectImgList: SelectImageItem[]) => {
          this.showPhotoAlbum = false
          this.selectImgList = [...this.selectImgList, ...selectImgList]
        }
      })
    }
  }

  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, index: number) => {
            GridItem() {
              Stack() {
                Image(item.imgUrl)
                  .aspectRatio(1)
                  .onClick(() => {
                    // this.selectImgUrl = item.imgUrl
                    this.selectIndex = index
                    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%')
    .bindSheet($$this.showPhotoAlbum, this.sheetPhotoAlbum(), {
      showClose: false, // 是否显示右上角关闭按钮
      height: '70%' // 显示高度占比
    })
  }
}

三、小结

• Swiper组件基本使用