1# 使用保存控件
2
3保存控件是一种特殊的安全控件，它允许用户通过点击按钮临时获取存储权限，而无需通过权限弹框进行授权确认。
4
5集成保存控件后，当用户点击该控件时，应用会获得10秒内访问媒体库特权接口的授权。这适用于任何需要将文件保存到媒体库的应用场景，例如保存图片或视频等。
6
7与需要触发系统应用并由用户选择具体保存路径的Picker不同，保存控件可以直接保存到指定的媒体库路径，使得操作更为便捷。
8
9保存控件效果如图所示。
10
11![zh-cn_image_0000001701740676](figures/zh-cn_image_0000001701740676.png)
12
13## 约束与限制
14
15- 当用户首次点击应用中的保存控件，系统将弹窗请求用户授权。如果用户点击“取消”，弹窗消失，应用无授权，用户再次点击保存控件时，将会重新弹窗；如果用户点击“允许”，弹窗消失，应用将被授予临时保存权限，此后点击该应用的保存控件将不会弹窗。
16
17- 应用在onClick()触发回调到调用媒体库特权接口的时间间隔不能大于10秒。
18
19- 用户点击一次控件，仅获取一次授权调用。
20
21- 为了保障用户的隐私不被恶意应用获取，应用需确保安全控件是可见的且用户能够识别的。开发者需要合理的配置控件的尺寸、颜色等属性，避免视觉混淆的情况，如果发生因控件的样式不合法导致授权失败的情况，请检查设备错误日志。
22
23## 开发步骤
24
25以保存对话中图片为例，应用仅需要在前台期间，短暂使用保存图片的特性，不需要长时间使用。此时，可以直接使用安全控件中的保存控件，免去权限申请和权限请求等环节，获得临时授权，保存对应图片。
26
271. 导入文件和媒体库依赖。
28
29   ```ts
30   import { photoAccessHelper } from '@kit.MediaLibraryKit';
31   import { fileIo } from '@kit.CoreFileKit';
32   ```
33
342. 设置图片资源，并添加保存控件。
35
36   保存控件是一种类似于按钮的安全控件，由图标、文本和背景组成。其中，图标和文本至少需要有一个，背景是必选的。图标和文本不能自定义，只能从已有的选项中选择。在声明安全控件的接口时，有传参和不传参两种方式。不传参将默认创建一个包含图标、文字和背景的按钮，传参则根据参数创建，不包含未配置的元素。
37
38   当前示例使用默认参数。具体请参见[SaveButton控件](../../reference/apis-arkui/arkui-ts/ts-security-components-savebutton.md)。此外，所有安全控件都继承[安全控件通用属性](../../reference/apis-arkui/arkui-ts/ts-securitycomponent-attributes.md)，可用于定制样式。
39
40   图片保存到媒体库的详细介绍可参考[保存媒体库资源](../../media/medialibrary/photoAccessHelper-savebutton.md)。
41
42   ```ts
43   import { photoAccessHelper } from '@kit.MediaLibraryKit';
44   import { fileIo } from '@kit.CoreFileKit';
45   import { common } from '@kit.AbilityKit';
46   import { promptAction } from '@kit.ArkUI';
47   import { BusinessError } from '@kit.BasicServicesKit';
48
49   async function savePhotoToGallery(context: common.UIAbilityContext) {
50     let helper = photoAccessHelper.getPhotoAccessHelper(context);
51     try {
52       // onClick触发后10秒内通过createAsset接口创建图片文件，10秒后createAsset权限收回。
53       let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg');
54       // 使用uri打开文件，可以持续写入内容，写入过程不受时间限制
55       let file = await fileIo.open(uri, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);
56       // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件
57       context.resourceManager.getMediaContent($r('app.media.startIcon').id, 0)
58         .then(async value => {
59           let media = value.buffer;
60           // 写到媒体库文件中
61           await fileIo.write(file.fd, media);
62           await fileIo.close(file.fd);
63           promptAction.showToast({ message: '已保存至相册！' });
64         });
65     }
66     catch (error) {
67       const err: BusinessError = error as BusinessError;
68       console.error(`Failed to save photo. Code is ${err.code}, message is ${err.message}`);
69     }
70   }
71
72   @Entry
73   @Component
74   struct Index {
75     build() {
76       Row() {
77         Column({ space: 10 }) {
78           // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件
79           Image($r('app.media.startIcon'))
80             .height(400)
81             .width('100%')
82
83           SaveButton()
84             .padding({top: 12, bottom: 12, left: 24, right: 24})
85             .onClick(async (event: ClickEvent, result: SaveButtonOnClickResult) => {
86               if (result === SaveButtonOnClickResult.SUCCESS) {
87                 const context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext;
88                 // 免去权限申请和权限请求等环节，获得临时授权，保存对应图片
89                 savePhotoToGallery(context);
90               } else {
91                 promptAction.showToast({ message: '设置权限失败！' })
92               }
93             })
94         }
95         .width('100%')
96       }
97       .height('100%')
98       .backgroundColor(0xF1F3F5)
99     }
100   }
101   ```
102