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 58```ts 59// xxx.ets 60@Entry 61@Component 62struct Index { 63 build() { 64 Row() { 65 Column() { 66 Text('This is gradient color.').textAlign(TextAlign.Center).height(50).width(200) 67 .borderImage({ 68 source: { 69 angle: 90, 70 direction: GradientDirection.Left, 71 colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] 72 }, 73 slice: { top: 10, bottom: 10, left: 10, right: 10 }, 74 width: { top: "10px", bottom: "10px", left: "10px", right: "10px" }, 75 repeat: RepeatMode.Stretch, 76 fill: false 77 }) 78 } 79 .width('100%') 80 } 81 .height('100%') 82 } 83} 84``` 85 86 87 88### 示例2 89 90```ts 91// xxx.ets 92@Entry 93@Component 94struct BorderImage { 95 @State WidthValue: number = 0 96 @State SliceValue: number = 0 97 @State OutSetValue: number = 0 98 @State RepeatValue: RepeatMode[] = [RepeatMode.Repeat, RepeatMode.Stretch, RepeatMode.Round, RepeatMode.Space] 99 @State SelectIndex: number = 0 100 @State SelectText: string = 'Repeat' 101 @State FillValue: boolean = false 102 103 build() { 104 Row() { 105 Column({ space: 20 }) { 106 Row() { 107 Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50) 108 } 109 .borderImage({ 110 source: $r('app.media.icon'), 111 slice: this.SliceValue, 112 width: this.WidthValue, 113 outset: this.OutSetValue, 114 repeat: this.RepeatValue[this.SelectIndex], 115 fill: this.FillValue 116 }) 117 118 Column() { 119 Text(`borderImageSlice = ${this.SliceValue}px`) 120 Slider({ 121 value: this.SliceValue, 122 min: 0, 123 max: 100, 124 style: SliderStyle.OutSet 125 }) 126 .onChange((value: number, mode: SliderChangeMode) => { 127 this.SliceValue = value 128 }) 129 } 130 131 Column() { 132 Text(`borderImageWidth = ${this.WidthValue}px`) 133 Slider({ 134 value: this.WidthValue, 135 min: 0, 136 max: 100, 137 style: SliderStyle.OutSet 138 }) 139 .onChange((value: number, mode: SliderChangeMode) => { 140 this.WidthValue = value 141 }) 142 } 143 144 Column() { 145 Text(`borderImageOutSet = ${this.OutSetValue}px`) 146 Slider({ 147 value: this.OutSetValue, 148 min: 0, 149 max: 100, 150 style: SliderStyle.OutSet 151 }) 152 .onChange((value: number, mode: SliderChangeMode) => { 153 this.OutSetValue = value 154 }) 155 } 156 157 Row() { 158 Text('borderImageRepeat: ') 159 Select([{ value: 'Repeat' }, { value: 'Stretch' }, { value: 'Round' }, { value: 'Space' }]) 160 .value(this.SelectText) 161 .selected(this.SelectIndex) 162 .onSelect((index: number, value?: string) => { 163 this.SelectIndex = index 164 this.SelectText = value as string 165 }) 166 } 167 168 Row() { 169 Text(`borderImageFill: ${this.FillValue} `) 170 Toggle({ type: ToggleType.Switch, isOn: this.FillValue }) 171 .onChange((isOn: boolean) => { 172 this.FillValue = isOn 173 }) 174 } 175 176 } 177 .width('100%') 178 } 179 .height('100%') 180 } 181} 182``` 183 184 185 186### 示例3 187 188```ts 189// xxx.ets 190// borderImage属性的slice、width、outset属性值使用LocalizedEdgeWidths类型 191 192import { LengthMetrics } from '@kit.ArkUI' 193 194@Entry 195@Component 196struct BorderImage { 197 @State WidthStartValue: number = 0 198 @State WidthEndValue: number = 0 199 @State SliceStartValue: number = 0 200 @State SliceEndValue: number = 0 201 @State OutSetStartValue: number = 0 202 @State OutSetEndValue: number = 0 203 @State RepeatValue: RepeatMode[] = [RepeatMode.Repeat, RepeatMode.Stretch, RepeatMode.Round, RepeatMode.Space] 204 @State SelectIndex: number = 0 205 @State SelectText: string = 'Repeat' 206 @State FillValue: boolean = false 207 208 build() { 209 Row() { 210 Column({ space: 20 }) { 211 Row() { 212 Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50) 213 } 214 .borderImage({ 215 source: $r('app.media.icon'), 216 slice: { 217 top: LengthMetrics.px(10), 218 bottom: LengthMetrics.px(10), 219 start: LengthMetrics.px(this.SliceStartValue), 220 end: LengthMetrics.px(this.SliceEndValue) }, 221 width: { 222 top: LengthMetrics.px(10), 223 bottom: LengthMetrics.px(10), 224 start: LengthMetrics.px(this.WidthStartValue), 225 end: LengthMetrics.px(this.WidthEndValue) 226 }, 227 outset: { 228 top: LengthMetrics.px(10), 229 bottom: LengthMetrics.px(10), 230 start: LengthMetrics.px(this.OutSetStartValue), 231 end: LengthMetrics.px(this.OutSetEndValue) 232 }, 233 repeat: this.RepeatValue[this.SelectIndex], 234 fill: this.FillValue 235 }) 236 237 Column() { 238 Text(`borderImageSliceStart = ${this.SliceStartValue}px`) 239 Slider({ 240 value: this.SliceStartValue, 241 min: 0, 242 max: 100, 243 style: SliderStyle.OutSet 244 }) 245 .onChange((value: number, mode: SliderChangeMode) => { 246 this.SliceStartValue = value 247 }) 248 } 249 250 Column() { 251 Text(`borderImageEndSliceStart = ${this.SliceEndValue}px`) 252 Slider({ 253 value: this.SliceEndValue, 254 min: 0, 255 max: 100, 256 style: SliderStyle.OutSet 257 }) 258 .onChange((value: number, mode: SliderChangeMode) => { 259 this.SliceEndValue = value 260 }) 261 } 262 263 Column() { 264 Text(`borderImageWidthStart = ${this.WidthStartValue}px`) 265 Slider({ 266 value: this.WidthStartValue, 267 min: 0, 268 max: 100, 269 style: SliderStyle.OutSet 270 }) 271 .onChange((value: number, mode: SliderChangeMode) => { 272 this.WidthStartValue = value 273 }) 274 } 275 276 Column() { 277 Text(`borderImageWidthEnd = ${this.WidthEndValue}px`) 278 Slider({ 279 value: this.WidthEndValue, 280 min: 0, 281 max: 100, 282 style: SliderStyle.OutSet 283 }) 284 .onChange((value: number, mode: SliderChangeMode) => { 285 this.WidthEndValue = value 286 }) 287 } 288 289 Column() { 290 Text(`borderImageOutSetStart = ${this.OutSetStartValue}px`) 291 Slider({ 292 value: this.OutSetStartValue, 293 min: 0, 294 max: 100, 295 style: SliderStyle.OutSet 296 }) 297 .onChange((value: number, mode: SliderChangeMode) => { 298 this.OutSetStartValue = value 299 }) 300 } 301 302 Column() { 303 Text(`borderImageOutSetEnd = ${this.OutSetEndValue}px`) 304 Slider({ 305 value: this.OutSetEndValue, 306 min: 0, 307 max: 100, 308 style: SliderStyle.OutSet 309 }) 310 .onChange((value: number, mode: SliderChangeMode) => { 311 this.OutSetEndValue = value 312 }) 313 } 314 315 Row() { 316 Text('borderImageRepeat: ') 317 Select([{ value: 'Repeat' }, { value: 'Stretch' }, { value: 'Round' }, { value: 'Space' }]) 318 .value(this.SelectText) 319 .selected(this.SelectIndex) 320 .onSelect((index: number, value?: string) => { 321 this.SelectIndex = index 322 this.SelectText = value as string 323 }) 324 } 325 326 Row() { 327 Text(`borderImageFill: ${this.FillValue} `) 328 Toggle({ type: ToggleType.Switch, isOn: this.FillValue }) 329 .onChange((isOn: boolean) => { 330 this.FillValue = isOn 331 }) 332 } 333 334 } 335 .width('100%') 336 } 337 .height('100%') 338 } 339} 340``` 341 342从左至右显示语言示例图 343 344 345 346从右至左显示语言示例图 347 348
