一、目标

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

二、开撸

2.1 改造图片预览Dialog

@CustomDialog
export struct SinglePreviewDialog {// 弹窗控制器 mustcontroller: CustomDialogController// 展示图片URL列表imgUrlList: ResourceStr[] = []// 当前点击索引selectIndex: number = 0build() {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.imgUrlthis.selectIndex = indexthis.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// 单图预览dialogsinglePreviewDialog: CustomDialogController = new CustomDialogController({builder: SinglePreviewDialog({imgUrlList: this.selectImgList.map(item => item.imgUrl),selectIndex: this.selectIndex}),customStyle: true //使用自定义Dialog的样式})@BuildersheetPhotoAlbum() {Column() {PhotoAlbumView({maxNumber: 5,cancel: () => {this.showPhotoAlbum = false},confirm: (selectImgList: SelectImageItem[]) => {this.showPhotoAlbum = falsethis.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.imgUrlthis.selectIndex = indexthis.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组件基本使用