HarmonyOS开发之使用Picker（从相册选择图片），并且通过Swiper组件实现图片预览

一：效果图：

二：添加依赖

import picker from '@ohos.file.picker';

三：创建showDialog

 showDialog() {AlertDialog.show({message: '从相册选择',alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -12 },primaryButton: {value: '取消',fontColor: '#0A59F7',action: () => {}},secondaryButton: {value: '确定',fontColor: '#0A59F7',action: () => {try {let photoSelectOptions = new picker.PhotoSelectOptions()photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE//文件类型photoSelectOptions.maxSelectNumber = 5// 单次选择壁纸数量let photoPicker = new picker.PhotoViewPicker()photoPicker.select(photoSelectOptions).then((photoSelectResult: picker.PhotoSelectResult) => {console.log("photoUris ====="+photoSelectResult.photoUris)this.addImages(photoSelectResult.photoUris)}).catch((err: string) => {console.error(TAG, `'PhotoViewPicker.select failed with err: ${JSON.stringify(err)}`)});} catch (err) {console.error(TAG, `'PhotoViewPicker failed with err: ${JSON.stringify(err)}`)}}}})}

四：通过Swiper来实现图片预览

Swiper(this.swiperController) {ForEach(this.imageList, (item: string) => {Image(item).width('100%').height('auto')}, item => item)}.cachedCount(2).index(this.currentImageIndex) // 设置当前图片索引.autoPlay(false).interval(4000).indicator(true).loop(true).duration(1000).itemSpace(0).curve(Curve.Linear).onClick(()=>{this.isSwiperVisible = false; // 关闭 Swiperthis.isVisibility=Visibility.Visible})

五：完整代码

import picker from '@ohos.file.picker';const TAG: string = 'AddPictures';@Extend(Image) function imageStyle() {.width('100%').aspectRatio(1).objectFit(ImageFit.Fill).backgroundColor('#F1F3F5').borderRadius(12)
}@Component
export struct AddPictures{@Provide imageList: Array<string> = []; // 定义并初始化 imageList@State isSwiperVisible: boolean = false; // 控制 Swiper 可见性@State currentImageIndex: number = 0; // 当前展示的图片索引@State isVisibility:Visibility=Visibility.Visibleprivate swiperController: SwiperController = new SwiperController()build() {Column() {Text('有什么想说的就留言吧！...').fontColor($r('app.color.text_color')).fontWeight(400).fontFamily('HarmonyHeiTi').fontSize(14).opacity(0.4).margin({ top:'16vp', bottom: '48vp' }).width('100%').visibility(this.isVisibility)GridRow({ columns: { sm: 3, md: 6, lg: 8 }, gutter: 12 }) {ForEach(this.imageList, (item: string,index:number) => {GridCol({ span: 1 }) {Image(item).imageStyle().onClick(()=>{console.log(TAG+'======'+item)this.currentImageIndex = index // 记录当前索引this.isSwiperVisible = true // 打开 Swiperthis.isVisibility=Visibility.None})}})GridCol({ span: 1 }) {Row() {Image($r('app.media.ic_add')).size({ width: 24, height: 24 }).objectFit(ImageFit.Contain)}.width('100%').height('100%').justifyContent(FlexAlign.Center)}.width('100%').aspectRatio(1).backgroundColor($r('app.color.start_window_background')).borderRadius(12).onClick(() => {this.showDialog()})}.visibility(this.isVisibility)if (this.isSwiperVisible){Swiper(this.swiperController) {ForEach(this.imageList, (item: string) => {Image(item).width('100%').height('auto')}, item => item)}.cachedCount(2).index(this.currentImageIndex) // 设置当前图片索引.autoPlay(false).interval(4000).indicator(true).loop(true).duration(1000).itemSpace(0).curve(Curve.Linear).onClick(()=>{this.isSwiperVisible = false; // 关闭 Swiperthis.isVisibility=Visibility.Visible})}}.backgroundColor('#fff8f9fb').width('90%').height('100%')}addImages = (images: Array<string>) => {images.forEach((item: string) => {if (!this.imageList.includes(item)) {this.imageList.push(item);}})console.log(TAG, `addImages imageList=${JSON.stringify(this.imageList)}`)}showDialog() {AlertDialog.show({message: '从相册选择',alignment: DialogAlignment.Bottom,offset: { dx: 0, dy: -12 },primaryButton: {value: '取消',fontColor: '#0A59F7',action: () => {}},secondaryButton: {value: '确定',fontColor: '#0A59F7',action: () => {try {let photoSelectOptions = new picker.PhotoSelectOptions()photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE//文件类型photoSelectOptions.maxSelectNumber = 5// 单次选择壁纸数量let photoPicker = new picker.PhotoViewPicker()photoPicker.select(photoSelectOptions).then((photoSelectResult: picker.PhotoSelectResult) => {console.log("photoUris ====="+photoSelectResult.photoUris)this.addImages(photoSelectResult.photoUris)}).catch((err: string) => {console.error(TAG, `'PhotoViewPicker.select failed with err: ${JSON.stringify(err)}`)});} catch (err) {console.error(TAG, `'PhotoViewPicker failed with err: ${JSON.stringify(err)}`)}}}})}}