1# 图片边框设置 2 3设置容器组件的图片边框样式。 4 5> **说明：** 6> 7> 从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## 属性 10 11| 名称 | 参数类型 | 描述 | 12| ---------- | ---------------------------------------- | --------------------------------------- | 13| borderImage | [BorderImageOption](#borderimageoption对象说明) | 图片边框或者渐变色边框设置接口。<br/>该接口支持在ArkTS卡片中使用。 | 14 15## BorderImageOption对象说明 16 17该接口支持在ArkTS卡片中使用。 18 19| 名称 | 类型 | 描述 | 20| ---------- | ---------------------------------------- | --------------------------------------- | 21| source | string \| [Resource](ts-types.md#resource) \| [linearGradient](ts-universal-attributes-gradient-color.md) | 边框图源或者渐变色设置。<br/>**说明：** 边框图源仅适用于容器组件，如Row、Column、Flex，在非容器组件上使用会失效。 | 22| slice | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置图片边框切割宽度。<br/>默认值：0 | 23| width | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置图片边框宽度。<br/>默认值：0 | 24| outset | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置边框图片向外延伸距离。<br/>默认值：0 | 25| repeat | [RepeatMode](#repeatmode枚举说明) | 设置边框图片的重复方式。<br/>默认值：RepeatMode.Stretch | 26| fill | boolean | 设置边框图片中心填充。<br/>默认值：false | 27 28## RepeatMode枚举说明 29 30该接口支持在ArkTS卡片中使用。 31 32| 名称 | 描述 | 33| ------- | ----------------------------------- | 34| Repeat | 被切割图片重复铺平在图片边框上，超出的部分会被剪裁。 | 35| Stretch | 被切割图片以拉伸填充的方式铺满图片边框。 | 36| Round | 被切割图片以整数次平铺在图片边框上，无法以整数次平铺时压缩被切割图片。 | 37| Space | 被切割图片以整数次平铺在图片边框上，无法以整数次平铺时以空白填充。 | 38 39## 示例 40 41### 示例1 42 43 44```ts 45// xxx.ets 46@Entry 47@Component 48struct Index { 49 build() { 50 Row() { 51 Column() { 52 Text('This is gradient color.').textAlign(TextAlign.Center).height(50).width(200) 53 .borderImage({ 54 source: { 55 angle: 90, 56 direction: GradientDirection.Left, 57 colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] 58 }, 59 slice: { top: 10, bottom: 10, left: 10, right: 10 }, 60 width: { top: "10px", bottom: "10px", left: "10px", right: "10px" }, 61 repeat: RepeatMode.Stretch, 62 fill: false 63 }) 64 } 65 .width('100%') 66 } 67 .height('100%') 68 } 69} 70``` 71 72 73 74### 示例2 75 76```ts 77// xxx.ets 78@Entry 79@Component 80struct Index { 81 @State outSetValue: number = 40 82 83 build() { 84 Row() { 85 Column() { 86 Row() { 87 Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50) 88 } 89 .borderImage({ 90 source: $r('app.media.icon'), 91 slice: `${this.outSetValue}%`, 92 width: `${this.outSetValue}px`, 93 outset: '5px', 94 repeat: RepeatMode.Repeat, 95 fill: false 96 }) 97 98 Slider({ 99 value: this.outSetValue, 100 min: 0, 101 max: 100, 102 style: SliderStyle.OutSet 103 }) 104 .margin({ top: 30 }) 105 .onChange((value: number, mode: SliderChangeMode) => { 106 this.outSetValue = value 107 console.info('value:' + value + 'mode:' + mode.toString()) 108 }) 109 } 110 .width('100%') 111 } 112 .height('100%') 113 } 114} 115``` 116 117
