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)}`)
          }
        }
      }
    })
  }



}
相关推荐
努力变厉害的小超超3 小时前
ArkTS中的组件基础、状态管理、样式处理、class语法以及界面渲染
笔记·鸿蒙
sanzk3 小时前
华为鸿蒙应用开发
华为·harmonyos
SoraLuna8 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
ClkLog-开源埋点用户分析9 小时前
ClkLog企业版(CDP)预售开启,更有鸿蒙SDK前来助力
华为·开源·开源软件·harmonyos
mg6689 小时前
鸿蒙系统的优势 开发 环境搭建 开发小示例
华为·harmonyos
lqj_本人9 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人9 小时前
使用 Flutter 绘制一个棋盘
harmonyos
lqj_本人12 小时前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
青瓷看世界14 小时前
华为HarmonyOS打造开放、合规的广告生态 - 插屏广告
华为·harmonyos·广告投放
青瓷看世界14 小时前
华为HarmonyOS借助AR引擎帮助应用实现虚拟与现实交互的能力2-管理AR会话
华为·ar·harmonyos·虚拟现实