目前没有直接退出预览的接口,onExitPhotoBrowser是退出大图的回调,相当于退出预览,不知道是否满足要求
import {
PhotoPickerComponent, PickerController, PickerOptions,
DataType, BaseItemInfo, ItemInfo, PhotoBrowserInfo, ItemType, ClickType, PhotoBrowserRange
} from '@ohos.file.PhotoPickerComponent';
import photoAccessHelper from '@ohos.file.photoAccessHelper';
@Entry
@Component
struct PickerDemo {
pickerOptions: PickerOptions = new PickerOptions();
@State pickerController: PickerController = new PickerController();
@State selectUris: Array<string> = new Array<string>();
@State currentUri: string = '';
@State isBrowserShow: boolean = false;
aboutToAppear() {
this.pickerOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_VIDEO_TYPE;
this.pickerOptions.maxSelectNumber = 5;
this.pickerOptions.isSearchSupported = false;
this.pickerOptions.isPhotoTakingSupported = false;
}
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) {
// 点击相机item
return true; // 返回true则拉起系统相机,若应用需要自行处理则返回false。
} else {
if (clickType === ClickType.SELECTED) {
// 应用做自己的业务处理
if (uri) {
this.selectUris.push(uri);
this.pickerOptions.preselectedUris = [...this.selectUris];
}
return true; // 返回true则勾选,否则则不响应勾选。
} else {
if (uri) {
this.selectUris = this.selectUris.filter((item: string) => {
return item != uri;
});
this.pickerOptions.preselectedUris = [...this.selectUris];
}
}
return true;
}
}
private onEnterPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean {
// 进入大图的回调
this.isBrowserShow = true;
return true;
}
private onExitPhotoBrowser(photoBrowserInfo: PhotoBrowserInfo): boolean {
// 退出大图的回调
this.isBrowserShow = false;
return true;
}
private onPickerControllerReady(): void {
// 接收到该回调后,便可通过pickerController相关接口向picker发送数据,在此之前不生效。
}
private onPhotoBrowserChanged(browserItemInfo: BaseItemInfo): boolean {
// 大图左右滑动的回调
this.currentUri = browserItemInfo.uri ?? '';
return true;
}
build() {
Flex({
direction: FlexDirection.Column,
justifyContent: FlexAlign.Center,
alignItems: ItemAlign.Center
}) {
PhotoPickerComponent({
pickerOptions: this.pickerOptions,
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(),
onPhotoBrowserChanged: (browserItemInfo: BaseItemInfo): boolean => this.onPhotoBrowserChanged(browserItemInfo),
pickerController: this.pickerController,
}).height('60%').width('100%')
// 这里模拟应用侧底部的选择栏
if (this.isBrowserShow) {
Row() {
ForEach(this.selectUris, (uri: string) => {
if (uri === this.currentUri) {
Image(uri).height('10%').width('10%').onClick(() => {
}).borderWidth(1).borderColor('red')
} else {
Image(uri).height('10%').width('10%').onClick(() => {
this.pickerController.setData(DataType.SET_SELECTED_URIS, this.selectUris);
this.pickerController.setPhotoBrowserItem(uri, PhotoBrowserRange.ALL);
})
}
}, (uri: string) => JSON.stringify(uri))
}
} else {
Button('预览').width('33%').height('5%').onClick(() => {
if (this.selectUris.length > 0) {
this.pickerController.setPhotoBrowserItem(this.selectUris[0], PhotoBrowserRange.SELECTED_ONLY);
}
})
}
}
}
}
同时点击图片,实现图片预览,点击图片周边蒙层后,退出预览,预览图中可对图片进行放大缩小等基础操作,可以参考这个demo:https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs-V5/faqs-arkui-332-V5