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



}
相关推荐
zhanshuo3 小时前
构建可扩展的状态系统:基于 ArkTS 的模块化状态管理设计与实现
harmonyos
zhanshuo3 小时前
ArkTS 模块通信全解析:用事件总线实现页面消息联动
harmonyos
codefish7988 小时前
鸿蒙开发学习之路:从入门到实践的全面指南
harmonyos
yrjw14 小时前
一款基于react-native harmonyOS 封装的【文档】文件预览查看开源库(基于Harmony 原生文件预览服务进行封装)
harmonyos
搜狐技术产品小编20231 天前
搜狐新闻直播间适配HarmonyOs实现点赞动画
华为·harmonyos
zhanshuo1 天前
ArkUI 玩转水平滑动视图:超全实战教程与项目应用解析
harmonyos·arkui
zhanshuo1 天前
ArkUI Canvas 实战:快速绘制柱状图图表组件
harmonyos·arkui
zhanshuo2 天前
手把手教你用 ArkUI 写出高性能分页列表:List + onScroll 实战解析
harmonyos
zhanshuo2 天前
深入解析 ArkUI 触摸事件机制:从点击到滑动的开发全流程
harmonyos
i仙银2 天前
鸿蒙沙箱浏览器 - SandboxFinder
app·harmonyos