HarmonyOS NEXT星河版之模拟图片选择器(下)---使用Swiper实现图片滑动预览

文章目录

    • 一、目标
    • 二、开撸
      • [2.1 改造图片预览Dialog](#2.1 改造图片预览Dialog)
      • [2.2 改造主页面](#2.2 改造主页面)
      • [2.3 主页面完整代码](#2.3 主页面完整代码)
    • 三、小结

一、目标

在前面的介绍中,查看选中的图片都是单张预览,接下来要改造成多张可滑动预览,如下:

二、开撸

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组件基本使用
相关推荐
齐行超17 天前
vue3 使用swiper轮播组件
vue·vue3·swiper
lichong9511 个月前
【Harmony】轮播图特效,持续更新中。。。。
android·linux·服务器·harmonyos·鸿蒙·swiper
Amewin3 个月前
解决:uniapp 小程序 使用swiper 内部嵌套另外一个拥有左右滑动组件导致滑动冲突
小程序·uni-app·swiper·ucharts
张雨zy4 个月前
HarmonyOS几种列表方式,List列表容器、Grid网格容器、Swiper轮播图
华为·list·harmonyos·swiper·grid
酒茶白开水4 个月前
SwiftUI八与UIKIT交互
ios·swiftui·交互·轮播图·page·uikit·扫动
.陌路4 个月前
H5、Vue3、UniApp实现抖音短视频功能
uni-app·vue·html5·swiper·抖音短视频
熬耶4 个月前
微信小程序之横向列表展示
微信小程序·小程序·轮播图·列表横向展示
熬耶5 个月前
微信小程序轮播图
微信小程序·小程序·轮播图
小洋人最happy5 个月前
HarmonyOS NEXT星河版之自定义List下拉刷新与加载更多
list·refresh·鸿蒙next开发·refreshstatus·onreachend