纯血鸿蒙APP实战开发——发布图片评论-编程知识

纯血鸿蒙APP实战开发——发布图片评论

介绍

本示例将通过发布图片评论场景，介绍如何使用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_comment_icon_main'), 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组件