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; // 关闭 Swiper
          this.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.Visible

  private 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 // 打开 Swiper
                this.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; // 关闭 Swiper
          this.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)}`)
          }
        }
      }
    })
  }



}