#HarmonyOS NEXT体验官#梅科尔工作室HOS-应用发布图片评论原创

梅科尔工作室HOS

发布于 2024-8-21 16:01

浏览

0收藏

作者：梅科尔邵思媛

概述

本示例将通过发布图片评论场景，介绍如何使用startAbilityForResult接口拉起相机拍照，并获取相机返回的数据。

#HarmonyOS NEXT体验官#梅科尔工作室HOS-应用发布图片评论-鸿蒙开发者社区

功能描述

添加评论列表：页面加载时会展示已有的评论列表。
输入文字评论：用户可以点击输入框来输入文字。
拍照功能：用户可以在输入框中点击相机图标来拍摄照片，并将照片添加到评论中。
发布评论：用户可以发布包含文字和/或图片的评论。

效果图预览

实现思路

创建CommentData类，实现IDataSource接口的对象，用于评论列表使用LazyForEach加载数据。这里使用了BasicDataSource作为基础数据源，可以方便地与LazyForEach组件结合使用，以实现懒加载效果。当评论被添加到列表中时，notifyDataAdd方法被调用来通知视图更新。

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);
  }
}

点击下方输入提示框，拉起评论输入弹窗。这里使用了一个CustomDialogController来控制评论输入弹窗的显示和关闭。

          Text($r('app.string.image_comment_text_input_hint'))
  .borderRadius($r('app.integer.image_comment_text_input_hint_border_radius'))
  .height($r('app.integer.image_comment_text_input_hint_height'))
  .width($r('app.string.image_comment_percent_95'))
  .padding({
    left: $r('app.integer.image_comment_text_input_hint_padding_left')
  })
  .backgroundColor($r('app.color.image_comment_color_comment_text_background'))
  .onClick(() => {
    if (this.dialogController !== null) {
      // 打开评论输入弹窗
      this.dialogController.open();
    }
  })
  .border({
    width: $r('app.integer.image_comment_text_input_hint_border_width'),
    color: $r('app.color.image_comment_color_comment_text_border')
  })

3.在输入弹窗中，输入文字，点击相机按钮，拉起相机，拍照后获得返回的图片地址。这里使用了startAbilityForResult接口来启动相机并等待其返回结果。cameraCapture函数接收一个common.UIAbilityContext参数，用于启动相机Ability。如果拍照成功，cameraCapture函数将返回一张图片的url。

Image($r("app.media.icon_comment_camera"))
  .height($r('app.integer.image_comment_image_camera_height'))
  .width($r('app.integer.image_comment_image_camera_width'))
  .onClick(async () => {
    if (this.selectedImages.length >= MAX_SELECT_IMAGE) {
      promptAction.showToast({ message: $r('app.string.image_comment_most_select_image') });
      return;
    }
    // 拉起相机进行拍照
    const image: string = await cameraCapture(getContext(this) as common.UIAbilityContext);
    if (image !== "") {
      this.selectedImages.push(image);
    }
  })
  .margin({
    right: $r('app.integer.image_comment_image_camera_margin_top')
  })
  .alignRules({
    top: { anchor: ID_TEXT_INPUT, align: VerticalAlign.Top },
    bottom: { anchor: ID_TEXT_INPUT, align: VerticalAlign.Bottom },
    right: { anchor: ID_TEXT_INPUT, align: HorizontalAlign.End }
  })
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.当用户点击发布按钮时，我们从弹窗中获取文字和图片信息，并使用这些信息创建新的Comment对象。然后，将评论对象添加到CommentData实例中，以更新评论列表。

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(){
  let comment: Comment = new Comment("Kevin", this.textInComment, $r('app.media.icon_comment_icon_main'), this.imageInComment, this.getCurrentDate());
  this.commentList.pushData(comment);
}