1# DownloadFileButton 2 3下载文件按钮，通过点击该下载按钮，可以获取到当前应用在Download公共目录中所属的存储路径。 4 5 6> **说明：** 7> 8> 该组件从API Version 12开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9 10## 导入模块 11 12``` 13import { DownloadFileButton } from '@kit.ArkUI' 14``` 15 16## 子组件 17 18无 19 20## 属性 21 22支持[通用属性](ts-universal-attributes-size.md)。 23 24## DownloadFileButton 25 26下载文件按钮组件，默认显示图标和文字。 27 28**装饰器类型：**@Component 29 30**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 31 32**系统能力**： SystemCapability.ArkUI.ArkUI.Full 33 34| 名称 | 类型 | 必填 | 装饰器类型 | 说明 | 35| -------------- | ------------------------------------------------------------ | ---- | ---------- | -------------------------------- | 36| contentOptions | [DownloadContentOptions](#downloadcontentoptions) | 否 | @State | 创建包含指定元素内容的下载按钮。 | 37| styleOptions | [DownloadStyleOptions](#downloadstyleoptions) | 否 | @State | 创建包含指定元素样式的下载按钮。 | 38 39## DownloadContentOptions 40 41下载文件按钮中显示的内容。 42 43**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 44 45**系统能力**： SystemCapability.ArkUI.ArkUI.Full 46 47| 名称 | 类型 | 必填 | 说明 | 48| ---- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 49| icon | [DownloadIconStyle](#downloadiconstyle) | 否 | 设置下载按钮的图标风格<br/>不传入该参数表示没有图标，icon和text至少存在一个。 | 50| text | [DownloadDescription](#downloaddescription) | 否 | 设置下载按钮的文本描述<br/>不传入该参数表示没有文字描述，icon和text至少存在一个。 | 51 52## DownloadStyleOptions 53 54下载文件按钮中图标和文字的样式。 55 56**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 57 58**系统能力**： SystemCapability.ArkUI.ArkUI.Full 59 60| 名称 | 类型 | 必填 | 说明 | 61| --------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 62| iconSize | Dimension | 否 | 下载控件上图标的尺寸。<br/>默认值：16vp | 63| layoutDirection | [DownloadLayoutDirection](#downloadlayoutdirection) | 否 | 下载控件上图标和文字分布的方向。<br/>默认值：DownloadLayoutDirection.HORIZONTAL | 64| fontSize | Dimension | 否 | 下载控件上文字的尺寸。<br/>默认值：16fp | 65| fontStyle | FontStyle | 否 | 下载控件上文字的样式。<br/>默认值：FontStyle.Normal | 66| fontWeight | number \| FontWeight \| string | 否 | 下载控件上文字粗细。<br/>默认值：FontWeight.Medium | 67| fontFamily | string \| Resource | 否 | 下载控件上文字的字体。<br/>默认字体：'HarmonyOS Sans' | 68| fontColor | ResourceColor | 否 | 下载控件上文字的颜色。<br/>默认值：#ffffffff | 69| iconColor | ResourceColor | 否 | 下载控件上图标的颜色。<br/>默认值：#ffffffff | 70| textIconSpace | Dimension | 否 | 下载控件中图标和文字的间距。<br/>默认值：4vp | 71 72## DownloadIconStyle 73 74下载文件按钮中图标的风格。 75 76**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 77 78**系统能力**： SystemCapability.ArkUI.ArkUI.Full 79 80| 名称 | 值 | 说明 | 81| ----------- | ---- | -------------------------- | 82| FULL_FILLED | 1 | 下载按钮展示填充样式图标。 | 83| LINES | 2 | 下载按钮展示线条样式图标。 | 84 85 86 87## DownloadDescription 88 89下载按钮中文字的内容。 90 91**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 92 93**系统能力**： SystemCapability.ArkUI.ArkUI.Full 94 95| 名称 | 值 | 说明 | 96| ------------------- | ---- | -------------------------------- | 97| DOWNLOAD | 1 | 下载按钮的文字描述为“下载”。 | 98| DOWNLOAD_FILE | 2 | 下载按钮的文字描述为“下载文件”。 | 99| SAVE | 3 | 下载按钮的文字描述为“保存”。 | 100| SAVE_IMAGE | 4 | 下载按钮的文字描述为“保存图片”。 | 101| SAVE_FILE | 5 | 下载按钮的文字描述为“保存文件”。 | 102| DOWNLOAD_AND_SHARE | 6 | 下载按钮的文字描述为“下载分享”。 | 103| RECEIVE | 7 | 下载按钮的文字描述为“接收”。 | 104| CONTINUE_TO_RECEIVE | 8 | 下载按钮的文字描述为“继续接收”。 | 105 106 107 108## DownloadLayoutDirection 109 110下载文件按钮中图标和文字的排列方式。 111 112**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 113 114**系统能力**： SystemCapability.ArkUI.ArkUI.Full 115 116| 名称 | 值 | 说明 | 117| ---------- | ---- | ------------------------------------------ | 118| HORIZONTAL | 0 | 下载控件上图标和文字分布的方向为水平排列。 | 119| VERTICAL | 1 | 下载控件上图标和文字分布的方向为垂直排列。 | 120 121## 事件 122 123支持[通用事件](ts-universal-events-click.md)。 124 125## 示例 126 127``` 128import { picker } from '@kit.CoreFileKit'; 129import { BusinessError } from '@kit.BasicServicesKit'; 130import { DownloadFileButton, DownloadLayoutDirection } from '@kit.ArkUI'; 131 132@Entry 133@Component 134struct Index { 135 build() { 136 Column() { 137 DownloadFileButton({ 138 contentOptions: { 139 // icon: DownloadIconStyle.FULL_FILLED, 140 // text: DownloadDescription.DOWNLOAD 141 }, 142 styleOptions: { 143 iconSize: '16vp', 144 layoutDirection: DownloadLayoutDirection.HORIZONTAL, 145 fontSize: '16vp', 146 fontStyle: FontStyle.Normal, 147 fontWeight: FontWeight.Medium, 148 fontFamily: 'HarmonyOS Sans', 149 fontColor: '#ffffffff', 150 iconColor: '#ffffffff', 151 textIconSpace: '4vp' 152 } 153 }) 154 .backgroundColor('#007dff') 155 .borderStyle(BorderStyle.Dotted) 156 .borderWidth(0) 157 .borderRadius('24vp') 158 .position({ x: 0, y: 0 }) 159 .markAnchor({ x: 0, y: 0 }) 160 .offset({ x: 0, y: 0 }) 161 .constraintSize({}) 162 .padding({ 163 top: '12vp', 164 bottom: '12vp', 165 left: '24vp', 166 right: '24vp' 167 }) 168 .onClick(() => { 169 this.downloadAction(); 170 }) 171 } 172 } 173 174 downloadAction() { 175 try { 176 const document = new picker.DocumentSaveOptions(); 177 document.pickerMode = picker.DocumentPickerMode.DOWNLOAD; 178 new picker.DocumentViewPicker().save(document, (err: BusinessError, result: Array<string>) => { 179 if (err) { 180 return; 181 } 182 console.info(`downloadAction result: ${JSON.stringify(result)}`); 183 }); 184 } catch (e) { 185 } 186 } 187} 188``` 189 190 191
