HarmonyOS鸿蒙Next中PhotoPicker怎么动态切换显示视频或者图片

HarmonyOS鸿蒙Next中PhotoPicker怎么动态切换显示视频或者图片 PhotoPicker怎么动态切换显示视频或者图片,有个按钮来控制切换显示视频或者图片，只要有一个PhotoPicker

5 回复

可以参考下我用状态管理V2写的， 可以切换仅显示视频、仅显示图片和显示图片和视频。

关键能力：makeObserved接口：将非观察数据变为可观察数据-其他状态管理-状态管理（V2）

import { PhotoPickerComponent, PickerController, PickerOptions, photoAccessHelper } from '@kit.MediaLibraryKit';
import { UIUtils } from '@kit.ArkUI';

@Entry
@ComponentV2
struct Index {
  @Local pickerController: PickerController = new PickerController();
  @Local pickerOptions: PickerOptions = UIUtils.makeObserved({
    MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE // 初始显示图片和视频
  });

  // 计算属性：判断是否应禁用“仅显示图片”按钮
  @Computed
  get isImageButtonDisabled(): boolean {
    return this.pickerOptions.MIMEType === photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
  }

  // 计算属性：判断是否应禁用“仅显示视频”按钮
  @Computed
  get isVideoButtonDisabled(): boolean {
    return this.pickerOptions.MIMEType === photoAccessHelper.PhotoViewMIMETypes.VIDEO_TYPE;
  }

  // 计算属性：判断是否应禁用“显示图片和视频”按钮
  @Computed
  get isImageVideoButtonDisabled(): boolean {
    return this.pickerOptions.MIMEType === photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
  }

  build() {
    Column() {
      // 按钮组：切换显示类型
      Row() {
        Button('仅显示图片')
          .enabled(!this.isImageButtonDisabled) // 根据计算属性设置启用/禁用状态
          .onClick(() => {
            this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
          })

        Button('仅显示视频')
          .enabled(!this.isVideoButtonDisabled)
          .onClick(() => {
            this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.VIDEO_TYPE;
          })

        Button('显示图片和视频')
          .enabled(!this.isImageVideoButtonDisabled)
          .onClick(() => {
            this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
          })
      }

      // 单个PhotoPicker组件，根据mimeType动态更新
      PhotoPickerComponent({
        pickerOptions: this.pickerOptions,
        pickerController: this.pickerController,
        onSelect: (uri: string) => {
          console.info('Selected media URI: ' + uri);
        }
      })
    }
    .width('100%')
    .height('100%')
  }

  aboutToAppear() {
    // 初始化pickerOptions（可选）
    this.pickerOptions.maxSelectNumber = 5; // 设置最大选择数量
  }
}

更多关于HarmonyOS鸿蒙Next中PhotoPicker怎么动态切换显示视频或者图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你需要修改参数 MIMEType：

// 设置picker数据类型。
this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE // 显示图片或视频。

PhotoViewMIMETypes

枚举，可选择的媒体文件类型。

系统能力： SystemCapability.FileManagement.PhotoAccessHelper.Core

名称 值 说明
IMAGE_TYPE ‘image/*’ 图片类型。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
VIDEO_TYPE ‘video/*’ 视频类型。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
IMAGE_VIDEO_TYPE ‘/’ 图片和视频类型。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
MOVING_PHOTO_IMAGE_TYPE ‘image/movingPhoto’ 动态照片类型。
元服务API： 从API version 12开始，该接口支持在元服务中使用。

没有用哈，试过了，

在HarmonyOS Next中，PhotoPicker通过PhotoViewPicker实现动态切换。使用setMediaType(MediaType.IMAGE)可切换为图片选择模式，setMediaType(MediaType.VIDEO)切换为视频选择模式。通过监听用户操作或条件判断调用相应方法即可完成动态切换，无需重新创建实例。

在HarmonyOS Next中，可以通过PhotoViewPicker的selectType属性动态切换显示图片或视频。具体实现如下：

  1. 在布局文件中添加一个按钮和一个PhotoViewPicker组件：
<Button
    ohos:id="$+id:switch_button"
    ohos:width="match_content"
    ohos:height="match_content"
    ohos:text="切换类型"/>

<PhotoViewPicker
    ohos:id="$+id:photo_picker"
    ohos:width="match_parent"
    ohos:height="match_parent"/>
  1. 在代码中控制类型切换：
import { PhotoSelectType } from '@ohos.file.picker';

@Entry
@Component
struct Index {
  @State currentType: PhotoSelectType = PhotoSelectType.IMAGE;
  private photoPicker: PhotoViewPicker = new PhotoViewPicker();

  build() {
    Column() {
      Button('切换类型')
        .onClick(() => {
          // 切换选择类型
          this.currentType = this.currentType === PhotoSelectType.IMAGE 
            ? PhotoSelectType.VIDEO 
            : PhotoSelectType.IMAGE;
          this.updatePickerType();
        })

      PhotoViewPicker()
        .onCreate((picker) => {
          this.photoPicker = picker;
          this.updatePickerType();
        })
    }
  }

  updatePickerType() {
    let photoSelectOptions = new PhotoSelectOptions();
    photoSelectOptions.selectType = this.currentType;
    
    this.photoPicker.initialize(photoSelectOptions);
  }
}

关键点说明：

  • 使用PhotoSelectType.IMAGE和PhotoSelectType.VIDEO来指定媒体类型
  • 通过PhotoSelectOptions配置选择选项
  • 调用initialize()方法重新初始化选择器以应用新的类型设置
  • 切换类型时会清空之前的选择状态

这样就能通过按钮点击动态切换PhotoPicker显示图片或视频了。

回到顶部