介绍
本示例将通过发布图片评论场景，介绍如何使用startAbilityForResult接口拉起相机拍照，并获取相机返回的数据。
效果图预览
使用说明
- 通过startAbilityForResult接口拉起相机，拍照后获取图片地址。
实现思路
- 创建CommentData类，实现IDataSource接口的对象，用于评论列表使用LazyForEach加载数据。源码参考CommentModel.ets。
export class CommentData extends BasicDataSource {
// 懒加载数据
private comments: Array<Comment> = [];
// TODO：知识点：获取懒加载数据源的数据长度
totalCount(): number {
return this.comments.length;
}
// 获取指定数据项
getData(index: number): Comment {
return this.comments[index];
}
// TODO：知识点：存储数据到懒加载数据源中
pushData(data: Comment): void {
this.comments.push(data);
AppStorage.setOrCreate('commentCount', this.totalCount());
// 在数组头部添加数据
this.notifyDataAdd(this.comments.length - 1);
}
}
- 点击下方输入提示框，拉起评论输入弹窗。源码参考ImageCommentView.ets。
Text($r('app.string.text_input_hint'))
...
.onClick(() => {
if (this.dialogController != null) {
// 打开评论输入弹窗
this.dialogController.open();
}
})
3.在输入弹窗中，输入文字，点击相机按钮，拉起相机，拍照后获得返回的图片地址。源码参考CameraUtils.ets。
Image($r('app.media.camera'))
...
.onClick(async () => {
...
let image: string = await cameraCapture(getContext(this) as common.UIAbilityContext);
...
})
...
export async function cameraCapture(context: common.UIAbilityContext): Promise<string> {
let result: common.AbilityResult = await context.startAbilityForResult({
action: Constants.ACTION_PICKER_CAMERA,
parameters: {
'supportMultiMode': false,
'callBundleName': context.abilityInfo.bundleName
}
});
if (result.resultCode === 0) {
let param: Record<string, Object> | undefined = result.want?.parameters;
if (param !== undefined) {
let resourceUri: string = param[Constants.KEY_RESULT_PICKER_CAMERA] as string;
return resourceUri;
}
}
return "";
}
4.点击发布按钮，将评论添加到列表中。
Button($r('app.string.publish'))
...
.onClick(() => {
if (this.controller) {
this.textInComment = this.text;
this.imagesInComment = this.selectedImages;
this.publish();
this.controller.close();
this.textInComment = "";
this.imagesInComment = [];
}
})
...
publishComment(): void {
let comment: Comment = new Comment("Kevin", this.textInComment, $r('app.media.icon'), this.imageInComment, this.getCurrentDate());
this.commentList.pushData(comment);
}
工程结构&模块类型
imagecomment // har类型
|---components
| |---constants
| |---Constants.ets // 常量类
| |---model
| |---CommentModel.ets // 评论数据类
| |---MockCommentData.ets // 生成模拟数据
| |---utils
| |---CameraUtils.ets // 拉起相机工具类
| |---view
| |---CommentInputDialog.ets // 输入评论弹窗
| |---CommentItemView.ets // 单个评论组件
| |---ImageCommentView.ets // 评论列表页
| |---ImageListView.ets // 评论图片List组件
