HarmonyOS PhotoPickerComponent 和 AlbumPickerComponent 如何使用?

import { PhotoPickerComponent, PickerController, PickerOptions, DataType, ItemInfo, ItemType, PhotoBrowserInfo, ClickType, PickerColorMode, MaxSelected, MaxCountType } from '@ohos.file.PhotoPickerComponent'; 
import { AlbumPickerComponent, AlbumPickerOptions, AlbumInfo} from '@ohos.file.AlbumPickerComponent'; 
// import { PhotoPickerComponent, PickerController, PickerOptions, DataType } from '@ohos.file.PhotoPickerComponent'; 
import photoAccessHelper from '@ohos.file.photoAccessHelper'; 
import { BusinessError } from '@kit.BasicServicesKit'; 
 
 
@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; 
 
  private onEnterPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean { 
    console.info('1111111onEnterPhotoBrowser' + JSON.stringify(photoBrowserInfo)); 
    return false; 
  } 
 
  private onExitPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean { 
    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 = 2; 
    this.pickerOptions.isSearchSupported = true; 
    this.pickerOptions.isPhotoTakingSupported = false; 
    this.pickerOptions.isRepeatSelectSupported = true; 
    this.pickerOptions1.MIMEType = photoAccessHelper.PhotoViewMIMETypes.VIDEO_TYPE; 
    this.pickerOptions1.maxSelectNumber = 2; 
    this.pickerOptions1.isSearchSupported = false; 
    this.pickerOptions1.isPhotoTakingSupported = false; 
    this.pickerOptions1.isRepeatSelectSupported = true; 
    this.pickerOptions2.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; 
    this.pickerOptions2.maxSelectNumber = 3; 
    this.pickerOptions2.isSearchSupported = false; 
    this.pickerOptions2.isPhotoTakingSupported = false; 
    this.pickerOptions2.isRepeatSelectSupported = true; 
    this.albumOptions.themeColorMode = PickerColorMode.LIGHT; 
  } 
 
  @State fontColor: string = '#182431222' 
  @State selectedFontColor: string = '#007DFF' 
  @State currentIndex: number = 0 
 
  build() { 
    Stack() { 
      Column() { 
        Row() { 
          Button("拦截,返回值false").width('33%').height('5%').onClick(() => { 
            this.isBlock = true; 
            let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions(); 
            PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE; 
            PhotoSelectOptions.maxSelectNumber = 5; 
            let photoPicker = new photoAccessHelper.PhotoViewPicker(); 
 
            photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => { 
              console.info('PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult)); 
            }).catch((err: BusinessError) => { 
              console.error('PhotoViewPicker.select failed with err: ' + JSON.stringify(err)); 
            }); 
          }) 
          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); 
          }) 
        }, (uri: string) => JSON.stringify(uri)) 
      } 
 
      if (this.isShowAlbum) { 
        AlbumPickerComponent({ 
          albumPickerOptions: this.albumOptions, 
          onAlbumClick: (albumInfo: AlbumInfo): boolean => this.onAlbumClick(albumInfo), 
        }).height('100%').width('100%') 
      } 
    } 
  } 
}