HarmonyOS鸿蒙Next中saveButton替换二维码下载按钮

HarmonyOS鸿蒙Next中saveButton替换二维码下载按钮 请问saveButton能替换这个二维码下载的按钮嘛

cke_993.jpeg


更多关于HarmonyOS鸿蒙Next中saveButton替换二维码下载按钮的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

你好，可以按如下方案尝试：

  1. SaveButton 只是安全控件的保存控件，用户通过点击该保存按钮，可以临时获取存储权限，而不需要权限弹框授权确认。

使用文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-security-components-savebutton#接口

  1. SaveButton 的使用的时候要注意一下约束条件，因违背约束条件会导致不显示且不报错（难以排查问题）；例如背景颜色相似，字体、图标尺寸过小等待；具体参考以下链接

约束条件： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/security-component-overview-V5#约束与限制

  1. 代码示例参考如下：
SaveButton({
  icon: SaveIconStyle.FULL_FILLED,
  text: SaveDescription.SAVE_IMAGE,
  buttonType: ButtonType.Normal,
})
  .fontColor($r("app.color.white"))
  .fontSize(14)
  .padding(12)
  .backgroundColor($r("app.color.common_main_color"))
  .onClick((_event, result) => {
    if (result === SaveButtonOnClickResult.SUCCESS) {
      this.saveImage();
    }
  });
  1. 效果图参考

cke_1511.png

更多关于HarmonyOS鸿蒙Next中saveButton替换二维码下载按钮的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


【背景知识】

SaveButton：安全控件的保存控件。应用集成保存控件后，用户首次使用保存控件展示弹窗，在点击允许后自动授权，应用会获取一分钟内访问媒体库特权接口的授权。后续使用无需弹窗授权。

【参考方案】

可参考个性化二维码示例，通过QRCode组件实现个性化二维码的生成与展示，使用Stack布局实现二维码Logo和背景图设置，使用SaveButton与组件截图方式保存二维码。

  1. 使用QRCode组件展示二维码信息，通过color和backgroundColor属性调整二维码前景色与背景色。
QRCode(this.qrCodeContent)
  .color(this.qrCodeColor)
  .backgroundColor(this.isBackgroundImageSet ? '#00ffffff' : this.qrCodeBackgroundColor);
  1. 使用QRCode组件展示二维码信息，通过color和backgroundColor属性调整二维码前景色与背景色。
if (this.isTitleTop && this.title !== '') {
  Text(this.title);
};
  1. 使用Stack布局实现Logo与背景图显示，设置背景图后背景色失效。
Stack({ alignContent: Alignment.Center }) {
  // BackgroundImage
  if (this.isBackgroundImageSet && this.backgroundImageResource !== undefined) {
    Image(this.backgroundImageResource);
  }

  // QRCode
  QRCode(this.qrCodeContent)
    .backgroundColor(this.isBackgroundImageSet ? '#00ffffff' : this.qrCodeBackgroundColor);

  // Logo
  if (this.isLogoSet && this.logoResource !== undefined) {
    Image(this.logoResource);
  }
};
  1. 使用组件截图方式与SaveButton实现二维码保存。
Column() {}
  .id('wholeQRCode');
SaveButton(this.saveButtonOptions)
  .onClick(async (event: ClickEvent, result: SaveButtonOnClickResult) => {
    const PIXEL_MAP = await this.getUIContext().getComponentSnapshot().get('wholeQRCode');
    if (result === SaveButtonOnClickResult.SUCCESS && PIXEL_MAP !== undefined) {
      this.savePixelMapToAlbum(PIXEL_MAP);
    }
  });

在HarmonyOS Next中，可通过自定义组件替换二维码下载按钮。使用@Component定义SaveButton组件，利用Button组件设置样式与点击事件。在aboutToAppear中移除原二维码按钮，通过findComponentById获取父容器并动态添加SaveButton。具体实现需参照鸿蒙官方组件文档的UI描述与动态组件管理方法。

在HarmonyOS Next中，saveButton 可以替换二维码下载按钮，但需要根据具体场景调整实现方式。如果原二维码按钮用于触发下载操作，可以将 saveButton 的点击事件绑定到相同的下载逻辑，例如调用文件保存API或触发资源下载。确保按钮的UI设计和交互符合HarmonyOS设计规范，保持一致性。如果涉及网络权限或文件存储，需在配置文件中声明相应权限。注意测试不同设备上的兼容性。

回到顶部