HarmonyOS鸿蒙Next中输入相册图片

HarmonyOS鸿蒙Next中输入相册图片 如何实现点击指定按钮拉起系统图片选择弹窗并往输入框中输入选择的图片

7 回复

【解决方案】

  1. 通过半模态弹窗实现自定义UI视图。

  2. 使用RichEditor组件实现图文混排输入框功能。

  3. 获取图片信息，需要先将图库图片拷贝到沙箱路径中。使用PhotoViewPicker选择指定的图片资源，文件选择成功后，返回PhotoSelectResult结果集，转成pixelMap。

  4. 使用focusControl.requestFocus控制输入框获焦，获焦后半模态弹窗时软键盘会自动弹起。

  5. 点击自定义表情时通过addImageSpan接口添加到输入框。 示例参考如下：

    import { LengthMetrics } from '@kit.ArkUI';

@Entry
@Component
struct RichEditorPage {
  controller: RichEditorController = new RichEditorController();
  @State isShow: boolean = false;

  @Builder
  myBuilder() {
    Column() {
      RichEditor({ controller: this.controller }) //绑定自定义键盘
        .margin(10)
        .height(50)
        .backgroundColor(Color.White)
        .borderRadius(20)
        .id('RichEditor')
        .onDidChange((rangeBefore: TextRange, rangeAfter: TextRange) => {
          console.info(`RichEditor onDidChange rangeBefore: ${JSON.stringify(rangeBefore)} And rangeAfter: ${JSON.stringify(rangeAfter)}`);
        })
      Button('点击添加自定义表情')
        .onClick(() => {
          this.controller.stopEditing();
          // $r('app.media.emoji')需要替换为开发者所需的图像资源文件。
          this.controller.addImageSpan($r('app.media.emoji'), {
            imageStyle: {
              size: ['80px', '80px'],
              layoutStyle: {
                borderRadius: '50px',
                margin: '40px'
              }
            }
          })
        })
    }
    .backgroundColor(Color.Orange)
    .width('100%')
    .height('100%')
  }

  build() {
    Column() {
      Button('半模态弹框')
        .onClick(() => {
          this.isShow = true;
        })
        .fontSize(20)
        .bindSheet($$this.isShow, this.myBuilder(), {
          height: 450,
          backgroundColor: Color.Green,
          showClose: false,
          radius: { topStart: LengthMetrics.vp(0), topEnd: LengthMetrics.vp(0) },
          onWillAppear: () => {
            console.info('BindSheet onWillAppear.');
            focusControl.requestFocus('RichEditor'); // 使RichEditor获焦
          },
          onAppear: () => {
            console.info('BindSheet onAppear.');
          },
          onWillDisappear: () => {
            console.info('BindSheet onWillDisappear.');
          },
          onDisappear: () => {
            this.isShow = false;
            console.info('BindSheet onDisappear.');
          }
        })
    }
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中输入相册图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


输入框中的图片效果，最简单的方式就是在外面再套一个 Row，左边放输入框，右边放图片缩略图即可

参考代码：

Row({space: 8}) {
  TextInput()
    ...
  Image(...)
    .height(40)
    .width(40)
    .objectFit(ImageFit.Cover)
    .borderRadius(4)
}
.borderRadius(12)

cke_372.jpeg

请问这种输入框中的图片效果是如何实现的

let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE; // 仅选择图片
PhotoSelectOptions.maxSelectNumber = 1; // 最多选择1张 这里你可以控制你想选择的照片数量

let photoPicker = new photoAccessHelper.PhotoViewPicker()

const photoResult:photoAccessHelper.PhotoSelectResult = await photoPicker.select(PhotoSelectOptions)

// 你可以从photoResult中看你想要的信息

用图片选择器

输入框没法渲染图片，你想说的是不是把图片的名字输入到输入框中？

在HarmonyOS Next中，输入相册图片主要使用@ohos.file.picker和@ohos.file.fs模块。通过PhotoViewPicker选择单张或多张图片，获取文件URI。然后使用fs.open打开文件，获取FD（文件描述符）进行读取操作。整个过程通过Stage模型下的UIAbility和页面路由实现。

在HarmonyOS Next中，通过点击按钮拉起系统相册选择图片，并将图片显示在输入区域，核心是使用PhotoViewPicker和Image组件。以下是关键步骤和代码示例：

1. 声明权限与导入模块

首先在module.json5中声明必要的权限：

{
  "module": {
    "requestPermissions": [
      {
        "name": "ohos.permission.READ_IMAGEVIDEO"
      }
    ]
  }
}

在页面文件中导入所需模块：

import picker from '@ohos.file.picker';
import common from '@ohos.app.ability.common';

2. 创建图片选择器并拉起弹窗

在按钮的点击事件中，创建并启动图片选择器：

// 定义状态变量存储图片URI
@State imgSrc: string = '';

async onPickImage() {
  try {
    // 1. 创建PhotoViewPicker实例
    const photoPicker = new picker.PhotoViewPicker();
    
    // 2. 配置选择选项（单选图片）
    const options: picker.PhotoSelectOptions = {
      maxSelectNumber: 1, // 最多选择1张
      MIMEType: picker.PhotoViewMIMETypes.IMAGE_TYPE, // 仅图片类型
    };

    // 3. 拉起系统图片选择界面
    const uris: Array<string> = await photoPicker.select(options);
    
    // 4. 处理选择结果
    if (uris && uris.length > 0) {
      this.imgSrc = uris[0]; // 获取第一张图片URI
    }
  } catch (err) {
    console.error('选择图片失败:', err);
  }
}

3. 显示选择的图片

在UI中使用Image组件显示已选图片：

// 按钮组件
Button('选择图片')
  .onClick(() => {
    this.onPickImage();
  })

// 图片显示区域（当有图片URI时显示）
if (this.imgSrc) {
  Image(this.imgSrc)
    .width(200)
    .height(200)
    .objectFit(ImageFit.Contain)
    .border({ width: 1, color: Color.Gray })
}

关键说明：

  1. PhotoViewPicker：系统提供的图片选择器，直接调用系统相册界面。
  2. URI处理：选择成功后返回的是图片URI（如file://media/Photo/1/IMG_20240101_100000.jpg），可直接用于Image组件显示。
  3. 权限要求：必须声明READ_IMAGEVIDEO权限才能访问相册。
  4. 异步操作：select()方法是异步的，需要使用async/await或Promise处理。

完整示例组件结构：

@Component
struct ImagePickerExample {
  @State imgSrc: string = '';

  // 图片选择方法
  async onPickImage() {
    // ... 上述选择代码
  }

  build() {
    Column() {
      Button('选择图片')
        .onClick(() => {
          this.onPickImage();
        })
        .margin(20)

      if (this.imgSrc) {
        Image(this.imgSrc)
          .width(200)
          .height(200)
          .margin(10)
      }
    }
  }
}

此实现完全使用HarmonyOS Next的原生API，无需依赖第三方库。选择器界面由系统提供，确保体验一致。返回的图片URI可直接用于应用内显示或进一步处理。

回到顶部