鸿蒙5.0开发进阶：ArkTS组件-SaveButton

最新推荐文章于 2025-06-12 15:52:00 发布
原创 最新推荐文章于 2025-06-12 15:52:00 发布 · 891 阅读 · 19 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #鸿蒙系统 #ArkUI #ArkTS #前端

往期鸿蒙5.0全套实战文章必看：（文中附带全栈鸿蒙5.0学习资料）

SaveButton

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

说明

该组件从API Version 10开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

不支持。

接口

SaveButton

SaveButton()

默认创建带有图标、文本、背景的保存按钮。

为避免控件样式不合法导致授权失败，请开发者先了解安全控件样式的约束与限制。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

SaveButton

SaveButton(options:SaveButtonOptions)

创建包含指定元素的保存按钮。

为避免控件样式不合法导致授权失败，请开发者先了解安全控件样式的约束与限制。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
optionsSaveButtonOptions是创建包含指定元素的保存按钮。

SaveButtonOptions

用于指定保存按钮的图标、文本等指定元素。

说明

  • icon或text需至少传入一个。

  • 如果icon、text都不传入，SaveButton中的options参数不起效，创建的SaveButton为默认样式，默认样式：

    SaveIconStyle默认样式为FULL_FILLED；

    SaveDescription默认样式为DOWNLOAD；

    ButtonType默认样式为Capsule。

  • icon、text、buttonType不支持动态修改。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
iconSaveIconStyle否

设置保存按钮的图标风格

不传入该参数表示没有图标。

textSaveDescription否

设置保存按钮的文本描述

不传入该参数表示没有文字描述。

buttonTypeButtonType否

设置保存按钮的背景样式

不传入该参数，系统默认提供Capsule类型按钮。

SaveIconStyle枚举说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称值说明
FULL_FILLED0保存按钮展示填充样式图标。
LINES1保存按钮展示线条样式图标。

SaveDescription枚举说明

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称值说明
DOWNLOAD0

保存按钮的文字描述为“下载”。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

DOWNLOAD_FILE1

保存按钮的文字描述为“下载文件”。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

SAVE2

保存按钮的文字描述为“保存”。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

SAVE_IMAGE3

保存按钮的文字描述为“保存图片”。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

SAVE_FILE4

保存按钮的文字描述为“保存文件”。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

DOWNLOAD_AND_SHARE5

保存按钮的文字描述为“下载分享”。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

RECEIVE6

保存按钮的文字描述为“接收”。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

CONTINUE_TO_RECEIVE7

保存按钮的文字描述为“继续接收”。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

SAVE_TO_GALLERY12+8

保存按钮的文字描述为“保存至图库”。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

EXPORT_TO_GALLERY12+9

保存按钮的文字描述为“导出”。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

QUICK_SAVE_TO_GALLERY12+10

保存按钮的文字描述为“快速保存图片”。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

RESAVE_TO_GALLERY12+11

保存按钮的文字描述为“重新保存”。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

SaveButtonOnClickResult枚举说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称值说明
SUCCESS0保存按钮点击成功。
TEMPORARY_AUTHORIZATION_FAILED1保存按钮点击后权限授权失败。

属性

不支持通用属性，仅继承安全控件通用属性。

事件

不支持通用事件，仅支持以下事件：

onClick

onClick(event: (event: ClickEvent, result: SaveButtonOnClickResult) => void)

点击动作触发该回调

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
eventClickEvent是见ClickEvent对象说明
resultSaveButtonOnClickResult是存储权限的授权结果，授权时长为10秒，即触发点击后，可以在10秒之内不限制次数的调用特定媒体库接口，超出10秒的调用会鉴权失败。

示例

// xxx.ets
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { fileIo } from '@kit.CoreFileKit';

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column({space:10}) {
        // 默认参数下，图标、文字、背景都存在
        SaveButton().onClick(async (event:ClickEvent, result:SaveButtonOnClickResult) => {
          if (result == SaveButtonOnClickResult.SUCCESS) {
            try {
              const context = getContext(this);
              let helper = photoAccessHelper.getPhotoAccessHelper(context);
              // onClick触发后10秒内通过createAsset接口创建图片文件，10秒后createAsset权限收回。
              let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png');
              // 使用uri打开文件，可以持续写入内容，写入过程不受时间限制
              let file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
              // 写入文件
              await fileIo.write(file.fd, "context");
              // 关闭文件
              await fileIo.close(file.fd);
            } catch (error) {
              console.error("error is "+ JSON.stringify(error));
            }
          }
        })
        // 传入参数即表示元素存在，不传入的参数表示元素不存在，如果不传入buttonType，会默认添加ButtonType.Capsule配置，显示图标+背景。
        SaveButton({icon:SaveIconStyle.FULL_FILLED})
        // 只显示图标+背景，如果设置背景色高八位的α值低于0x1A，则会被系统强制调整为0xFF
        SaveButton({icon:SaveIconStyle.FULL_FILLED, buttonType:ButtonType.Capsule})
          .backgroundColor(0x10007dff)
        // 图标、文字、背景都存在，如果设置背景色高八位的α值低于0x1A，则会被系统强制调整为0xFF
        SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule})
        // 图标、文字、背景都存在，如果设置宽度小于当前属性组合下允许的最小宽度时，宽度仍为设置值，此时按钮文本信息会自动换行，以保证安全控件显示的完整性。
        SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule})
          .fontSize(16)
          .width(30)
        // 图标、文字、背景都存在，如果设置宽度小于当前属性组合下允许的最小宽度时，宽度仍为设置值，此时按钮文本信息会自动换行，以保证安全控件显示的完整性。
        SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule})
          .fontSize(16)
          .size({width: 30, height: 30})
        // 图标、文字、背景都存在，如果设置宽度小于当前属性组合下允许的最小宽度时，宽度仍为设置值，此时按钮文本信息会自动换行，以保证安全控件显示的完整性。
        SaveButton({icon:SaveIconStyle.FULL_FILLED, text:SaveDescription.DOWNLOAD, buttonType:ButtonType.Capsule})
          .fontSize(16)
          .constraintSize({minWidth: 0, maxWidth: 30, minHeight: 0, maxHeight: 30})
      }.width('100%')
    }.height('100%')
  }
}

鸿蒙OpenHarmony【SaveButton】安全
hhhhhh2323的博客
11-22 952
安全控件的保存控件，用户通过点击该保存按钮，可以临时获取存储权限，而不需要权限弹框授权确认。
【鸿蒙NEXT】SaveButton保存图片
my blog
10-18 570
【代码】【鸿蒙NEXT】SaveButton保存图片。
鸿蒙API14开发【SaveButton】ArkTS组件
bbq的博客
06-12 1171
摘要： SaveButton组件从API 10开始提供，支持创建带有临时存储权限的保存按钮，无需弹框授权。该组件包含icon、text及背景样式配置选项，其中icon支持填充/线条两种样式，text提供12种预设描述文本。通过onClick事件可获取操作结果（成功/授权失败），适用于下载、保存文件等场景。从API 11起支持原子化服务，API 12新增4种图库相关文本选项。
HarmonyOS(52) 使用安全控件SaveButton保存图片
菜鸟博客
08-30 2329
SaveButton 安全控件说明
鸿蒙开发Ability Kit（程序访问控制）：【使用保存控件】
鸿蒙的技术博客
07-03 981
保存控件是一种特殊的安全控件，它允许用户通过点击按钮临时获取存储权限，而无需通过权限弹框进行授权确认。集成保存控件后，当用户点击该控件时，应用会获得10秒内单次访问媒体库特权接口的授权。这适用于任何需要将文件保存到媒体库的应用场景，例如保存图片或视频等。与需要触发系统应用并由用户选择具体保存路径的Picker不同，保存控件可以直接保存到指定的媒体库路径，使得操作更为便捷。保存控件效果如图所示。
鸿蒙5.0版开发：ArkTS组件-SaveButton
m0_69424697的博客
12-02 1086
安全控件的保存控件，用户通过点击该保存按钮，可以临时获取存储权限，而不需要权限弹框授权确认。
鸿蒙5.0版开发：ArkTS组件-安全控件通用属性
m0_69424697的博客
12-01 841
安全控件的基础属性，用于设置安全控件通用的属性。
鸿蒙5.0开发进阶：Web页面长截图实现案例
HSMMQAQ的博客
10-09 1118
本案例实现了Web组件中网页长截图的方案。
鸿蒙5.0实战案例：基于PhotoViewPicker对图片进行操作
Maniu_666的博客
03-18 505
PhotoAccessHelper.createAsset接口 需要ohos.permission.WRITE_IMAGEVIDEO权限，ohos.permission.WRITE_IMAGEVIDEO权限 为系统等级，该权限当前可申请的场景与功能：应用需要克隆、备份或同步图片/视频类文件。此时，可以直接使用安全控件中的保存控件，免去权限申请和权限请求等环节（创建媒体资源需要在应用中申请相册管理模块权限’ohos.permission.WRITE_IMAGEVIDEO’），获得临时授权，保存对应图片。
HarmonyOS鸿蒙开发实战（5.0）Web页面长截图实践
weixin_55362248的博客
09-21 1610
本案例实现了Web组件中网页长截图的方案。支持截图后展示大小浮窗预览、保存图片到相册、手势左滑关闭等功能。
鸿蒙中访问剪贴板（PasteButton）、保存相册控件（SaveButton）
梦想不只是梦与想的博客
06-10 478
《HarmonyOS安全控件对比与应用》摘要：PasteButton和SaveButton是HarmonyOS两大安全交互控件，分别实现无感授权场景下的剪贴板访问（临时SECURE_PASTE权限）和媒体存储（10秒写入窗口）。PasteButton支持验证码粘贴等场景，提供6种图标样式和文本描述自定义；SaveButton适用于文件保存，内置12种描述文本和2种图标样式。两者均通过点击触发临时授权，开发者需注意：PasteButton应验证剪贴板内容格式，SaveButton需在权限时效内完成存储操作。典
鸿蒙 如何将base64的图片保存到相册
甄兴旺的博客
06-14 1182
方案二：通过申请ACL权限。类似这样： { // 允许修改用户公共目录的图片或视频文件。"name": "ohos.permission.WRITE_IMAGEVIDEO", "reason": "$string:internet_permission_reason", "usedScene": { "when": "always" } }
鸿蒙next--使用安全控件SaveButton保存网络图片配置及不生效解决办法
weixin_46525113的博客
11-15 869
鸿蒙next使用安全控件SaveButton，下载并保存网络图片到手机上，解决http访问失败问题、运行时报错”It is not allowed to access this domain.“2300998 不允许访问域名等
在鸿蒙中如何把网络图片保存到相册中
自然 醒的博客
06-25 3378
在鸿蒙中如何把网络图片保存到相册中，首先我们需要去配置ohos.permission.WRITE_IMAGEVIDEO这个受限权限，其次，如果想要使用这个权限，还需要去自动签名或者手动签名，最后通过http请求到图片，通过文件文件写入，实现这个功能。想要读取手机相册中的图片，也可以参考这个实现代码。
【HarmonyOS】SaveButton保存图片
zhongcongxu01的专栏
09-26 1036
1、样式不支持自定义图标，试过用opacity修改透明度，然后添加背景来实现自定义样式，结果也失败了，opacity(1)点击生效，opacity(0.9)后点击按钮就不生效了。SaveButton组件把图片显示到相册中的方法demo，支持组件截图、url网络图片、base64格式图片。2、如果带Scroll时，下载按钮被遮挡一部分，也无法保存到相册。比如下面这样遮挡一点点下载按钮后，点击就没办法保存到相册了。2、下载按钮被遮挡一部分，也无法保存到相册。1、不支持自定义SaveButton样式。
【HarmonyOS】鸿蒙开发之Button组件——第3.4章
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
02-18 3865
沉默小管 鸿蒙开发之Button组件
【原创】SharePoint2010的SaveButton如何实现在跳转前给用户以提示[How to implement SaveButton display an alert when Redire...
anhai6033的博客
08-30 196
SharePoint 2010 的SaveButton控件在保存数据后，会跳转到Url参数中的Source指定的页面，如要没有Source则跳转到List的默认页面。有的时候，需要在保存后能够给用户一个提示再进行跳转，这就要修改SaveButton的默认行为，当然最简单的方式就是继承SaveButton，然后进行客户端方式的跳转。幸运的是，SaveButton并非是定义为sealed的，...
HarmonyOS实战开发-安全控件类型的UI控件（仅对系统应用开放）
2401_82546228的博客
04-07 1296
本示例提供了安全控件类型的UI控件，支撑应用开发者集成安全控件做临时授权场景，当用户实际点击了某种类型的安全控件时，会对应用进行相应的临时授权，减少权限弹窗对用户的干扰，同时提供更小的授权范围。
HarmonyOS实战开发-如何实现Web组件中网页长截图。
m0_70749039的博客
05-07 1448
本案例实现了Web组件中网页长截图的方案。支持截图后展示大小浮窗预览、保存图片到相册、手势左滑关闭等功能
const toolbarButtons = ref<VxeToolbarPropTypes.Buttons>([ { name: '刷 新', code: 'refresh', status: 'info', icon: 'i-ep:refresh' }, { name: '推送订单', code: 'opencp_push', status: 'primary', icon: 'i-ep:upload', // 修改为上传图标 disabled: true, }, { name: '重试支付', code: 'opencp_retry_pay', status: 'primary', icon: 'i-ep:refresh-right', // 修改为循环刷新图标 disabled: data.value.loading, }, { name: '清除缓存', code: 'opencp_clear_cache', status: 'danger', icon: 'i-ep:delete', // 修改为删除图标 disabled: true, }, { name: '导出订单', code: 'opencp_export', status: 'success', icon: 'i-ep:download' }, // 修改为下载图标 ])怎么动态设置 disabled: data.value.loading,呢
最新发布
06-30
在 Vue 中动态设置工具栏按钮的 `disabled` 属性，可以通过结合 `ref` 和响应式数据来实现。以下是一个完整的解决方案： ### 使用 `ref` 和响应式数据 1. **定义响应式状态**：可以使用 `reactive` 或 `ref` 来存储按钮的状态。 2. **绑定到模板**：通过 `:disabled` 绑定按钮的 `disabled` 属性。 ```vue <template> <div> <button v-for="(button, index) in buttons" :key="index" :disabled="button.disabled"> {{ button.label }} </button> </div> </template> <script> import { reactive } from 'vue'; export default { setup() { const buttons = reactive([ { label: 'Save', disabled: false }, { label: 'Edit', disabled: true }, { label: 'Delete', disabled: false } ]); // 示例方法：根据条件更新按钮状态 function updateButtonState(index, disabled) { buttons[index].disabled = disabled; } return { buttons, updateButtonState }; } }; </script> ``` ### 动态控制逻辑 - 可以通过监听某些事件或条件来触发 `updateButtonState` 方法，从而动态修改按钮的 `disabled` 状态[^1]。 - 比如，在表单验证失败时禁用“提交”按钮，或者在数据加载完成后再启用某个操作按钮。 ### 使用 `ref` 获取 DOM 元素 如果需要直接访问 DOM 元素（例如为了执行某些原生操作），可以使用 `ref` 来获取元素引用： ```vue <template> <div> <button ref="saveButton" :disabled="isSaveDisabled">Save</button> <button @click="toggleSaveButton">Toggle Save Button</button> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const isSaveDisabled = ref(true); const saveButton = ref(null); function toggleSaveButton() { isSaveDisabled.value = !isSaveDisabled.value; } return { isSaveDisabled, saveButton, toggleSaveButton }; } }; </script> ``` 在这个例子中： - `isSaveDisabled` 是一个响应式变量，用来控制按钮是否被禁用。 - `saveButton` 是一个 `ref`，它会指向模板中的按钮元素。 ### 结合计算属性和条件逻辑 你还可以使用 `computed` 属性来根据业务逻辑动态决定按钮是否应该被禁用： ```vue <template> <button :disabled="isFormInvalid">Submit</button> </template> <script> import { computed, ref } from 'vue'; export default { setup() { const formFields = ref({ name: '', email: '' }); const isFormInvalid = computed(() => { return !formFields.value.name || !formFields.value.email; }); return { formFields, isFormInvalid }; } }; </script> ``` 在这个示例中： - 表单字段的状态决定了按钮是否被禁用。 - 如果任何字段为空，则按钮会被禁用。 ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值