# hm_image_select_view

**Repository Path**: pzrrzp/hm_image_select_view

## Basic Information

- **Project Name**: hm_image_select_view
- **Description**: Harmony Next 图片选择库，可设置最大选择数量、单行显示数量、横向竖向间隔；点击图片后全屏预览
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2024-07-19
- **Last Updated**: 2025-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# hm_image_select_view

#### 介绍
Harmony Next 图片选择库，可设置最大选择数量、单行显示数量、横向竖向间隔；点击图片后全屏预览

#### 软件架构
**Harmony** next版本，兼容API12

#### 效果图
<img alt="图片选择器" height="672" src="https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select0.jpg" width="304"/><img alt="图片选择器" height="672" src="https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select2.png" width="304"/>

#### 安装教程

1.  ohpm install image_select_view

#### 使用说明

1.  引入仓库

基础使用：

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

@Component
export struct ImagePage {
  @State imgList: string[] = []

  aboutToAppear(): void {
    // 模拟网络延迟更新数据
    setTimeout(() => {
      this.imgList = [
        "https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select1.png",
        "https://hm-pzr.obs.cn-east-3.myhuaweicloud.com/hm/image_select2.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_select2.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",]
    }, 2000)
  }

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

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

          ImageSelectView({
            maxSelect: 9, // 最大选择数
            columns: 4, // 一行显示数
            gutterX: 10, // 横向间隔
            gutterY: 10, // 竖向间隔
            onImageListChange: (images) => {

            }
          })
            .margin({
              left: 10,
              right: 10,
            })

          Text("展示图片、全屏预览")

          ImageSelectView({
            columns: 4, // 一行显示数
            gutterX: 10, // 横向间隔
            gutterY: 10, // 竖向间隔
            isPreview: true, // 仅做预览
            imageList: this.imgList,
          })
            .margin({
              left: 10,
              right: 10,
            })

        }
      }
    }
    .backgroundColor($r('sys.color.comp_background_focus'))
    .hideTitleBar(true)
  }
}
```