HarmonyOS photopicker的demo？

Question

如题：HarmonyOS photopicker的demo？

Answer 1

demo如下:

import photoAccessHelper from '@ohos.file.photoAccessHelper';
import {
  PhotoPickerComponent,
  PickerController,
  PickerOptions,
  DataType,
  ItemInfo,
  PhotoBrowserInfo,
  AnimatorParams,
  MaxSelected,
  ItemType,
  ClickType,
  PickerOrientation,
  SelectMode,
  PickerColorMode,
  ReminderMode,
  MaxCountType,
} from '@ohos.file.PhotoPickerComponent';
import { AlbumPickerComponent, AlbumPickerOptions, AlbumInfo } from '@ohos.file.AlbumPickerComponent';


@Entry
@Component
struct Index {
  @State pickerController: PickerController = new PickerController();
  pickerOptions: PickerOptions = new PickerOptions();
  pickerOptions1: PickerOptions = new PickerOptions();
  pickerOptions2: PickerOptions = new PickerOptions();
  albumOptions: AlbumPickerOptions = new AlbumPickerOptions();
  @State selectedUris: Array<string> = new Array<string>();
  @State allBackGroundColor: number = 0xf1f3f5;
  @State videoBackGroundColor: number = 0xffffff;
  @State photoBackGroundColor: number = 0xffffff;
  @State isShowAll: boolean = true;
  @State isShowVideo: boolean = false;
  @State isShowPhoto: boolean = false;
  @State Width: string = '100%';
  @State Height: string = '87%';
  @State isShowAlbum: boolean = false;
  private isBlock: boolean = false;
  @State isInPhotoBrowser: boolean = false;

  // onBackPress(): boolean | void {
  // return true;
  // }

  private onEnterPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean {
    this.isInPhotoBrowser = true;
    console.info('1111111onEnterPhotoBrowser' + JSON.stringify(photoBrowserInfo));
    return false;
  }

  private onExitPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean {
    this.isInPhotoBrowser = false;
    console.info('1111111onExitPhotoBrowser' + JSON.stringify(photoBrowserInfo));
    return false;
  }

  private onPickerControllerReady(): void {
    console.info('1111111onPickerControllerReady');
  }

  private onAlbumClick(albumInfo: AlbumInfo): boolean {
    this.isShowAlbum = false;
    console.info('1111111onAlbumClick' + JSON.stringify(albumInfo?.uri));
    if (albumInfo?.uri) {
      this.pickerController.setData(DataType.SET_ALBUM_URI, albumInfo.uri);
      console.info('1111111onAlbumClick' + JSON.stringify(albumInfo.uri));
    }
    return true;
  }

  private onSelect(uri: string): void {
    if (uri) {
      this.selectedUris.push(uri)
    }
    this.pickerOptions.preselectedUris = [...this.selectedUris];
    this.pickerOptions1.preselectedUris = [...this.selectedUris];
    this.pickerOptions2.preselectedUris = [...this.selectedUris];
    console.info('1111111onSelect1111' + JSON.stringify(this.selectedUris));
  }

  private onDeselect(uri: string): void {
    if (uri) {
      this.selectedUris = this.selectedUris.filter((item: string) => {
        return item !== uri;
      })
    }
    this.pickerOptions.preselectedUris = [...this.selectedUris];
    this.pickerOptions1.preselectedUris = [...this.selectedUris];
    this.pickerOptions2.preselectedUris = [...this.selectedUris];
    console.info('1111111onDeselect1111' + JSON.stringify(this.selectedUris));
  }

  private onItemClicked(itemInfo: ItemInfo, clickType: ClickType): boolean {
    if (!itemInfo) {
      return false;
    }
    let type: ItemType | undefined = itemInfo.itemType;
    let uri: string | undefined = itemInfo.uri;
    if (type === ItemType.CAMERA) {
      console.info('1111111onCameraClick');
      if (this.isBlock) {
        return false;
      }
    } else if (type === ItemType.THUMBNAIL) {
      if (clickType === ClickType.SELECTED) {
        if (this.isBlock) {
          return false;
        }
        if (uri) {
          this.selectedUris.push(uri)
          this.pickerOptions.preselectedUris = [...this.selectedUris];
          this.pickerOptions1.preselectedUris = [...this.selectedUris];
          this.pickerOptions2.preselectedUris = [...this.selectedUris];
        }
      } else {
        if (uri) {
          this.selectedUris = this.selectedUris.filter((item: string) => {
            return item !== uri;
          })
          this.pickerOptions.preselectedUris = [...this.selectedUris];
          this.pickerOptions1.preselectedUris = [...this.selectedUris];
          this.pickerOptions2.preselectedUris = [...this.selectedUris];
        }
      }
    } else {
    }
    console.info('1111111onItemClicked1111' + JSON.stringify(itemInfo));
    return true;
  }

  aboutToAppear() {
    this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
    this.pickerOptions.maxSelectNumber = 10;
    this.pickerOptions.isSearchSupported = true;
    this.pickerOptions.isPhotoTakingSupported = true;
    this.pickerOptions.checkBoxColor = '#E47833';
    this.pickerOptions1.MIMEType = photoAccessHelper.PhotoViewMIMETypes.VIDEO_TYPE;
    this.pickerOptions1.maxSelectNumber = 10;
    this.pickerOptions1.isSearchSupported = false;
    this.pickerOptions1.isPhotoTakingSupported = false;
    // this.pickerOptions1.checkBoxColor = '#E47833';
    this.pickerOptions2.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
    this.pickerOptions2.maxSelectNumber = 10;
    this.pickerOptions2.isSearchSupported = false;
    this.pickerOptions2.isPhotoTakingSupported = false;
    this.albumOptions.themeColorMode = PickerColorMode.AUTO;
    // this.pickerOptions2.checkBoxColor = '#E47833';
  }
  build() {
    Stack() {
      Column() {
        Row() {
          Button("拦截,返回值false").width('33%').height('5%').onClick(() => {
            this.isBlock = true;
          })
          Button("全部相册").width('33%').height('5%').onClick(() => {
            this.isShowAlbum = true;
          })
          Button("不拦截,返回值true").width('33%').height('5%').onClick(() => {
            this.isBlock = false;
          })
        }
        Row() {
          Button("全部").width('33%').height('8%')
            .onClick(() => {
              this.isShowAll = true;
              this.isShowVideo = false;
              this.isShowPhoto = false;
              this.pickerController.setData(DataType.SET_SELECTED_URIS, this.selectedUris);
            })
          Button("视频").width('33%').height('8%')
            .onClick(() => {
              this.isShowAll = false;
              this.isShowVideo = true;
              this.isShowPhoto = false;
              this.pickerController.setData(DataType.SET_SELECTED_URIS, this.selectedUris);
            })
          Button("图片").width('33%').height('8%')
            .onClick(() => {
              this.isShowAll = false;
              this.isShowVideo = false;
              this.isShowPhoto = true;
              this.pickerController.setData(DataType.SET_SELECTED_URIS, this.selectedUris);
            })
        }

        Stack() {
          PhotoPickerComponent({
            pickerOptions: this.pickerOptions,
            onSelect: (uri: string): void => this.onSelect(uri),
            onDeselect: (uri: string): void => this.onDeselect(uri),
            onItemClicked: (itemInfo: ItemInfo, clickType: ClickType): boolean => this.onItemClicked(itemInfo, clickType),
            onEnterPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onEnterPhotoBrowser(photoBrowserInfo),
            onExitPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onExitPhotoBrowser(photoBrowserInfo),
            onPickerControllerReady: (): void => this.onPickerControllerReady(),
            pickerController: this.pickerController,
          }).height(this.Height).width(this.Width).visibility(this.isShowAll ? Visibility.Visible : Visibility.Hidden)
          PhotoPickerComponent({
            pickerOptions: this.pickerOptions1,
            onSelect: (uri: string): void => this.onSelect(uri),
            onDeselect: (uri: string): void => this.onDeselect(uri),
            onItemClicked: (itemInfo: ItemInfo, clickType: ClickType): boolean => this.onItemClicked(itemInfo, clickType),
            onEnterPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onEnterPhotoBrowser(photoBrowserInfo),
            onExitPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onExitPhotoBrowser(photoBrowserInfo),
            onPickerControllerReady: (): void => this.onPickerControllerReady(),
            pickerController: this.pickerController,
          }).height(this.Height).width(this.Width).visibility(this.isShowVideo ? Visibility.Visible : Visibility.Hidden)
          PhotoPickerComponent({
            pickerOptions: this.pickerOptions2,
            onSelect: (uri: string): void => this.onSelect(uri),
            onDeselect: (uri: string): void => this.onDeselect(uri),
            onItemClicked: (itemInfo: ItemInfo, clickType: ClickType): boolean => this.onItemClicked(itemInfo, clickType),
            onEnterPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onEnterPhotoBrowser(photoBrowserInfo),
            onExitPhotoBrowser: (photoBrowserInfo: PhotoBrowserInfo): boolean => this.onExitPhotoBrowser(photoBrowserInfo),
            onPickerControllerReady: (): void => this.onPickerControllerReady(),
            pickerController: this.pickerController,
          }).height(this.Height).width(this.Width).visibility(this.isShowPhoto ? Visibility.Visible : Visibility.Hidden)
        }
      }
      Row() {
        ForEach(this.selectedUris, (uri: string) => {
          Image(uri).height('10%').width('20%').onClick(() => {
            this.selectedUris = this.selectedUris.filter((item: string) => {
              return uri != item;
            })
            this.pickerController.setData(DataType.SET_SELECTED_URIS, this.selectedUris);
            let maxSelect: MaxSelected = new MaxSelected();
            maxSelect.data = new Map<MaxCountType, number>([[MaxCountType.TOTAL_MAX_COUNT, 10], [MaxCountType.PHOTO_MAX_COUNT, 5], [MaxCountType.VIDEO_MAX_COUNT, 5]]);
            this.pickerController.setMaxSelected(maxSelect);
          })
        }, (uri: string) => JSON.stringify(uri))
      }

      if (this.isShowAlbum) {
        AlbumPickerComponent({
          albumPickerOptions: this.albumOptions,
          onAlbumClick: (albumInfo: AlbumInfo): boolean => this.onAlbumClick(albumInfo),
        }).height('100%').width('100%')
      }
    }
  }
}