HarmonyOS 鸿蒙Next--图片选择器+宫格展示+全屏预览

基本使用

import { CommonTitleBar, TitleType } from '@ohos/commonTitleBar'
import { ImageSelectView } from '@ohos/imageSelectView';

@Component
export struct ImagePage {
  build() {
    NavDestination() {
      Scroll() {
        Column() {
          CommonTitleBar({
            leftType: TitleType.NONE,
            centerType: TitleType.TEXT,
            centerText: "图片选择器",
          })

          Text("选择图片、全屏预览")

          ImageSelectView({
            maxSelect: 9, // 最大选择数
            columns: 4, // 一行显示数
            gutterX: 10, // 横向间隔
            gutterY: 10, // 竖向间隔
            onImageListChange: (images) => {
              console.log("PZR_TAG", "Images:" + JSON.stringify(images))
            }
          })
            .margin({
              left: 10,
              right: 10,
            })
            
           Text("展示图片、全屏预览")

          ImageSelectView({
            columns: 4, // 一行显示数
            gutterX: 10, // 横向间隔
            gutterY: 10, // 竖向间隔
            isPreview: true, // 仅作为展示和预览使用，常用于详情页
            imageList: [
              "https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png",
              "https://i-blog.csdnimg.cn/blog_migrate/4657497328fb148367a4a41c0808e1c2.png",
              "https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png",
              "https://i-blog.csdnimg.cn/blog_migrate/4657497328fb148367a4a41c0808e1c2.png",
              "https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png",
              "https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png",
              "https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png",
              "https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png",],
          })
            .margin({
              left: 10,
              right: 10,
            })
        }
      }
    }
    .backgroundColor($r('sys.color.comp_background_focus'))
    .hideTitleBar(true)
  }
}