文章目录
一、目标
在前面的介绍中,查看选中的图片都是单张预览,接下来要改造成多张可滑动预览,如下:
二、开撸
2.1 改造图片预览Dialog
ts
@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 改造主页面
声明当前点击图片索引:
ts
// 当前图片索引
selectIndex: number = 0
点击图片时,给索引赋值:
ts
Image(item.imgUrl)
.aspectRatio(1)
.onClick(() => {
// this.selectImgUrl = item.imgUrl
this.selectIndex = index
this.singlePreviewDialog.open()
})
对预览Dialog在初始化时,更改传参:
ts
singlePreviewDialog: CustomDialogController = new CustomDialogController({
builder: SinglePreviewDialog({
imgUrlList: this.selectImgList.map(item => item.imgUrl),
selectIndex: this.selectIndex
}),
customStyle: true //使用自定义Dialog的样式
})
2.3 主页面完整代码
ts
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
组件基本使用