1# 图片边框设置 2 3设置组件的图片边框样式。 4 5> **说明：** 6> 7> 从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## borderImage 10 11borderImage(value: BorderImageOption) 12 13设置组件的图片边框。 14 15**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 16 17**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 18 19**系统能力：** SystemCapability.ArkUI.ArkUI.Full 20 21**参数：** 22 23| 参数名 | 类型 | 必填 | 描述 | 24| ----------- | ----------------------------------------------- | ---- | -------------------------------- | 25| value | [BorderImageOption](#borderimageoption对象说明) | 是 | 图片边框或者渐变色边框设置接口。 | 26 27## BorderImageOption对象说明 28 29**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 30 31| 名称 | 类型 | 必填| 描述 | 32| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 33| source | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | 否 | 边框图源或者渐变色设置。<br/>**说明：**<br>边框图源仅适用于容器组件，如[Row](ts-container-row.md)、[Column](ts-container-column.md)、[Flex](ts-container-flex.md)，在非容器组件上使用会失效。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 34| slice | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) \| [LocalizedEdgeWidths](ts-types.md#localizededgewidths12)<sup>12+</sup>| 否 | 设置边框图片左上角、右上角、左下角以及右下角的切割宽度。<br/>默认值：0<br/>**说明：**<br/>设置负数时取默认值。<br/>参数类型为[Length](ts-types.md#length)时，统一设置四个角的宽高。<br/>参数类型为[EdgeWidths](ts-types.md#edgewidths9)时：<br/>- Top：设置图片左上角或者右上角被切割的高。<br/>- Bottom：设置图片左下角或者右下角被切割的高。<br/>- Left：设置图片左上角或者左下角被切割的宽。<br/>- Right：设置图片右上角或者右下角被切割的宽。 <br/>参数类型为[LocalizedEdgeWidths](ts-types.md#localizededgewidths12)<sup>12+</sup>时：<br/>- Top：设置图片左上角或者右上角被切割的高。<br/>- Bottom：设置图片左下角或者右下角被切割的高。<br/>- Start：设置图片左上角或者左下角被切割的宽。<br />从右至左显示语言模式下为设置图片右上角或者右下角被切割的宽。<br/>- End：设置图片右上角或者右下角被切割的宽。 从右至左显示语言模式下为设置图片左上角或者左下角被切割的宽。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。| 35| width | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) \| [LocalizedEdgeWidths](ts-types.md#localizededgewidths12)<sup>12+</sup> | 否| 设置图片边框宽度。<br/>默认值：0<br/>**说明：**<br/>参数类型为[Length](ts-types.md#length)时，统一设置四个角的宽高，设置负数时取默认值。<br/>参数类型为[EdgeWidths](ts-types.md#edgewidths9)时：<br/>- Top：设置图片边框上边框的宽。<br/>- Bottom：设置图片边框下边框的宽。<br/>- Left：设置图片边框左边框的宽。<br/>- Right：设置图片边框右边框宽。<br/>参数类型为[LocalizedEdgeWidths](ts-types.md#localizededgewidths12)<sup>12+</sup>时：<br/>- Top：设置图片边框上边框的宽。<br/>- Bottom：设置图片边框下边框的宽。<br/>- Start：设置图片边框左边框的宽。<br />从右至左显示语言模式下为设置图片边框右边框宽。<br/>- End：设置图片边框右边框宽。<br />从右至左显示语言模式下为设置图片边框左边框的宽。<br/>设置负数时值取1。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 36| outset | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) \| [LocalizedEdgeWidths](ts-types.md#localizededgewidths12)<sup>12+</sup> | 否 | 设置边框图片向外延伸距离。<br/>默认值：0<br/>**说明：**<br/>设置负数时取默认值。<br/>参数类型为[Length](ts-types.md#length)时，统一设置四个角的宽高。<br/>参数类型为[EdgeWidths](ts-types.md#edgewidths9)时：<br/>- Top：设置边框图片上边框向外延伸的距离。<br/>- Bottom：设置边框图片下边框向外延伸的距离。<br/>- Left：设置边框图片左边框向外延伸的距离。<br/>- Right：设置边框图片右边框向外延伸的距离。<br/>参数类型为[LocalizedEdgeWidths](ts-types.md#localizededgewidths12)<sup>12+</sup>时：<br/>- Top：设置边框图片上边框向外延伸的距离。<br/>- Bottom：设置边框图片下边框向外延伸的距离。<br/>- Start：设置边框图片左边框向外延伸的距离。<br/>从右至左显示语言模式下为设置边框图片右边框向外延伸的距离。<br/>- End：设置边框图片右边框向外延伸的距离。<br/>从右至左显示语言模式下为设置边框图片左边框向外延伸的距离。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 37| repeat | [RepeatMode](#repeatmode枚举说明) | 否 | 设置被切割的图片在边框上的重复方式。<br/>默认值：RepeatMode.Stretch<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 38| fill | boolean | 否 | 设置边框图片是否中心填充。<br/>默认值：false<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 39 40## RepeatMode枚举说明 41 42**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 43 44**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 45 46| 名称 | 描述 | 47| ------- | ----------------------------------- | 48| Repeat | 被切割图片重复铺平在图片边框上，超出的部分会被剪裁。 | 49| Stretch | 被切割图片以拉伸填充的方式铺满图片边框。 | 50| Round | 被切割图片以整数次平铺在图片边框上，无法以整数次平铺时压缩被切割图片。 | 51| Space | 被切割图片以整数次平铺在图片边框上，无法以整数次平铺时以空白填充。 | 52 53## 示例 54 55### 示例1（设置渐变色边框） 56 57通过borderImage接口为组件设置渐变色边框。 58 59```ts 60// xxx.ets 61@Entry 62@Component 63struct Index { 64 build() { 65 Row() { 66 Column() { 67 Text('This is gradient color.').textAlign(TextAlign.Center).height(50).width(200) 68 .borderImage({ 69 source: { 70 angle: 90, 71 direction: GradientDirection.Left, 72 colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] 73 }, 74 slice: { top: 10, bottom: 10, left: 10, right: 10 }, 75 width: { top: "10px", bottom: "10px", left: "10px", right: "10px" }, 76 repeat: RepeatMode.Stretch, 77 fill: false 78 }) 79 } 80 .width('100%') 81 } 82 .height('100%') 83 } 84} 85``` 86 87 88 89### 示例2（动态调整属性值） 90 91通过[slider](../../apis-arkui/arkui-js/js-components-basic-slider.md)接口动态调整borderImage接口中属性值。 92 93```ts 94// xxx.ets 95@Entry 96@Component 97struct BorderImage { 98 @State WidthValue: number = 0 99 @State SliceValue: number = 0 100 @State OutSetValue: number = 0 101 @State RepeatValue: RepeatMode[] = [RepeatMode.Repeat, RepeatMode.Stretch, RepeatMode.Round, RepeatMode.Space] 102 @State SelectIndex: number = 0 103 @State SelectText: string = 'Repeat' 104 @State FillValue: boolean = false 105 106 build() { 107 Row() { 108 Column({ space: 20 }) { 109 Row() { 110 Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50) 111 } 112 .borderImage({ 113 source: $r('app.media.icon'), 114 slice: this.SliceValue, 115 width: this.WidthValue, 116 outset: this.OutSetValue, 117 repeat: this.RepeatValue[this.SelectIndex], 118 fill: this.FillValue 119 }) 120 121 Column() { 122 Text(`borderImageSlice = ${this.SliceValue}px`) 123 Slider({ 124 value: this.SliceValue, 125 min: 0, 126 max: 100, 127 style: SliderStyle.OutSet 128 }) 129 .onChange((value: number, mode: SliderChangeMode) => { 130 this.SliceValue = value 131 }) 132 } 133 134 Column() { 135 Text(`borderImageWidth = ${this.WidthValue}px`) 136 Slider({ 137 value: this.WidthValue, 138 min: 0, 139 max: 100, 140 style: SliderStyle.OutSet 141 }) 142 .onChange((value: number, mode: SliderChangeMode) => { 143 this.WidthValue = value 144 }) 145 } 146 147 Column() { 148 Text(`borderImageOutSet = ${this.OutSetValue}px`) 149 Slider({ 150 value: this.OutSetValue, 151 min: 0, 152 max: 100, 153 style: SliderStyle.OutSet 154 }) 155 .onChange((value: number, mode: SliderChangeMode) => { 156 this.OutSetValue = value 157 }) 158 } 159 160 Row() { 161 Text('borderImageRepeat: ') 162 Select([{ value: 'Repeat' }, { value: 'Stretch' }, { value: 'Round' }, { value: 'Space' }]) 163 .value(this.SelectText) 164 .selected(this.SelectIndex) 165 .onSelect((index: number, value?: string) => { 166 this.SelectIndex = index 167 this.SelectText = value as string 168 }) 169 } 170 171 Row() { 172 Text(`borderImageFill: ${this.FillValue} `) 173 Toggle({ type: ToggleType.Switch, isOn: this.FillValue }) 174 .onChange((isOn: boolean) => { 175 this.FillValue = isOn 176 }) 177 } 178 179 } 180 .width('100%') 181 } 182 .height('100%') 183 } 184} 185``` 186 187 188 189### 示例3（使用LocalizedEdgeWidths类型值） 190 191borderImage接口中的slice、width、outset属性值使用[LocalizedEdgeWidths](ts-types.md#localizededgewidths12)类型。 192 193```ts 194// xxx.ets 195import { LengthMetrics } from '@kit.ArkUI' 196 197@Entry 198@Component 199struct BorderImage { 200 @State WidthStartValue: number = 0 201 @State WidthEndValue: number = 0 202 @State SliceStartValue: number = 0 203 @State SliceEndValue: number = 0 204 @State OutSetStartValue: number = 0 205 @State OutSetEndValue: number = 0 206 @State RepeatValue: RepeatMode[] = [RepeatMode.Repeat, RepeatMode.Stretch, RepeatMode.Round, RepeatMode.Space] 207 @State SelectIndex: number = 0 208 @State SelectText: string = 'Repeat' 209 @State FillValue: boolean = false 210 211 build() { 212 Row() { 213 Column({ space: 20 }) { 214 Row() { 215 Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50) 216 } 217 .borderImage({ 218 source: $r('app.media.icon'), 219 slice: { 220 top: LengthMetrics.px(10), 221 bottom: LengthMetrics.px(10), 222 start: LengthMetrics.px(this.SliceStartValue), 223 end: LengthMetrics.px(this.SliceEndValue) }, 224 width: { 225 top: LengthMetrics.px(10), 226 bottom: LengthMetrics.px(10), 227 start: LengthMetrics.px(this.WidthStartValue), 228 end: LengthMetrics.px(this.WidthEndValue) 229 }, 230 outset: { 231 top: LengthMetrics.px(10), 232 bottom: LengthMetrics.px(10), 233 start: LengthMetrics.px(this.OutSetStartValue), 234 end: LengthMetrics.px(this.OutSetEndValue) 235 }, 236 repeat: this.RepeatValue[this.SelectIndex], 237 fill: this.FillValue 238 }) 239 240 Column() { 241 Text(`borderImageSliceStart = ${this.SliceStartValue}px`) 242 Slider({ 243 value: this.SliceStartValue, 244 min: 0, 245 max: 100, 246 style: SliderStyle.OutSet 247 }) 248 .onChange((value: number, mode: SliderChangeMode) => { 249 this.SliceStartValue = value 250 }) 251 } 252 253 Column() { 254 Text(`borderImageEndSliceStart = ${this.SliceEndValue}px`) 255 Slider({ 256 value: this.SliceEndValue, 257 min: 0, 258 max: 100, 259 style: SliderStyle.OutSet 260 }) 261 .onChange((value: number, mode: SliderChangeMode) => { 262 this.SliceEndValue = value 263 }) 264 } 265 266 Column() { 267 Text(`borderImageWidthStart = ${this.WidthStartValue}px`) 268 Slider({ 269 value: this.WidthStartValue, 270 min: 0, 271 max: 100, 272 style: SliderStyle.OutSet 273 }) 274 .onChange((value: number, mode: SliderChangeMode) => { 275 this.WidthStartValue = value 276 }) 277 } 278 279 Column() { 280 Text(`borderImageWidthEnd = ${this.WidthEndValue}px`) 281 Slider({ 282 value: this.WidthEndValue, 283 min: 0, 284 max: 100, 285 style: SliderStyle.OutSet 286 }) 287 .onChange((value: number, mode: SliderChangeMode) => { 288 this.WidthEndValue = value 289 }) 290 } 291 292 Column() { 293 Text(`borderImageOutSetStart = ${this.OutSetStartValue}px`) 294 Slider({ 295 value: this.OutSetStartValue, 296 min: 0, 297 max: 100, 298 style: SliderStyle.OutSet 299 }) 300 .onChange((value: number, mode: SliderChangeMode) => { 301 this.OutSetStartValue = value 302 }) 303 } 304 305 Column() { 306 Text(`borderImageOutSetEnd = ${this.OutSetEndValue}px`) 307 Slider({ 308 value: this.OutSetEndValue, 309 min: 0, 310 max: 100, 311 style: SliderStyle.OutSet 312 }) 313 .onChange((value: number, mode: SliderChangeMode) => { 314 this.OutSetEndValue = value 315 }) 316 } 317 318 Row() { 319 Text('borderImageRepeat: ') 320 Select([{ value: 'Repeat' }, { value: 'Stretch' }, { value: 'Round' }, { value: 'Space' }]) 321 .value(this.SelectText) 322 .selected(this.SelectIndex) 323 .onSelect((index: number, value?: string) => { 324 this.SelectIndex = index 325 this.SelectText = value as string 326 }) 327 } 328 329 Row() { 330 Text(`borderImageFill: ${this.FillValue} `) 331 Toggle({ type: ToggleType.Switch, isOn: this.FillValue }) 332 .onChange((isOn: boolean) => { 333 this.FillValue = isOn 334 }) 335 } 336 337 } 338 .width('100%') 339 } 340 .height('100%') 341 } 342} 343``` 344 345从左至右显示语言示例图 346 347 348 349从右至左显示语言示例图 350 351
