picker选择器的初探

Bension-LZ

1042人浏览 · 2025-03-10 16:08:02

Bension-LZ · 2025-03-10 16:08:02 发布

Harmony OS NEXT API12

[picker1.mp4]

picker1

这个功能想必大家再也熟悉不过了吧，它也就是今天我们的主角

今天我们来初步介绍一下有关使用picker选择媒体库资源的使用，在很多的开发场景中我们都需要选择图片或者调用图库选择照片，在鸿蒙中给我们提供了那么一个API让我们可以很轻松的就开发出我们想要的图片选择器业务。

在我们开发之前先要知道这个组件它是在那个开发包中的----因为图片这类属于媒体文件所以他会存在于媒体文件管理服务这个大包里面，也就是如下图片

我们再进一步了解，想要选择图片，在这个包中提供了一个类叫"photoAccessHelper"的大类中定义了很多的方法，其中有个就是我们想要的图片选择的，名字也很直白就叫

okok,总结上面的两个步骤也就是我们先要导入选择器模块然后在创建一个类

然后我们完成了上述两部我们再点进这个PhotoSelectOptions中发现他又是一个类，继承自另外一个类中，父类名字叫做BaseSelectOptions, 我们发现它里面有很多的属性其中有个属性名为"MIMEType"大家或许已经知道它是做什么的了，没错用来配置可选的媒体文件类型是什么，在这里我们直接选择IMAGE_TYPE

可能大家看有些迷惑，设置一个媒体文件类型这么麻烦的吗？是的因为功能强大所以它把内容分的很开

其实在我们点击PhotoSelectOptions中发现这个类型貌似都不需要设置，因为他不是必选的，它是一个可选的参数。没错！但是身为这次的主角我还是尽可能的讲的完整一点。

接下来我们就可以去配置我们图片的最大数目了，虽然他给我们了一个默认值50，但是毕竟我们在大多数的场景中很难需要选择50张图片，所以我们还是进一步了解

设置也是很简单，如下图

这样我们就直接设置好了最大的图片数量

到了我们的第四步，我们上述三步创建了图片文件选择项的实例，配置了文件的类型和文件的最大数目，到了第四步，我们要开始创建以恶搞图库选择器的实例，也就是从这一步开始我真正的要开始进入图库了

通过这个步骤我们创建了一个图库选择器的实例，然后这个实例中有个方法叫select可以拉起图库界面进行文件的选择，我们可以将我们2，3步的配置的属性传递给它也就是如下图

到了这一步我们就完成了，拉起图库，选择照片的功能

[picker2.mp4]

picker2

但是我们想要的是将选择的图片呈现到我们的页面中来，不急我们先看select方法有没有返回结果什么的。

在我们点进之后发现它是有个返回结果的

也就是说我们需要通过这个返回的结果才能达到我们预期的效果。

我们再通过了解发现文件选择成功后他会返回"PhotoSelectResult"的一个结果集，那我们就可以通过这个结果集拿到我们图片的地址然后呈现在我们的页面中，

好了现在我们有了地址那就可以直接把我们的图片呈现出来，我们试一下便知

果然我们完成了我们想要的效果

总结流程如下

完整代码如下

typescript
import { PickerOptions } from '@ohos.file.PhotoPickerComponent'
import { photoAccessHelper } from '@kit.MediaLibraryKit'

@Entry
@Component
struct Index {

@State url: string[] = []

Select() {
    /*创建图片文件选择项实例和配置文件类型和文件的最大数目*/
    const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
    photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE
    photoSelectOptions.maxSelectNumber = 1

    /* 创建图库选择器实例 */
    const photoViewPicker = new photoAccessHelper.PhotoViewPicker()
    photoViewPicker.select(photoSelectOptions).then((photoSelectResult: photoAccessHelper.PhotoSelectResult) => {
      this.url = photoSelectResult.photoUris
    })
}
build() {
    Column() {
      Button("选择图片")
        .onClick(() => { this.Select() })
      Image("" || this.url[0])
    }
}
}