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/>**说明：**<br>边框图源仅适用于容器组件，如Row、Column、Flex，在非容器组件上使用会失效。 | 22| slice | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置边框图片左上角、右上角、左下角以及右下角的切割宽度。<br/>默认值：0<br/>**说明：**<br/>设置负数时取默认值。<br/>参数类型为[Length](ts-types.md#length)时，统一设置四个角的宽高。<br/>参数类型为[EdgeWidths](ts-types.md#edgewidths9)时：<br/>- Top：设置图片左上角或者右上角被切割的高。<br/>- Bottom：设置图片左下角或者右下角被切割的高。<br/>- Left：设置图片左上角或者左下角被切割的宽。<br/>- Right：设置图片右上角或者右下角被切割的宽。 | 23| width | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置图片边框宽度。<br/>默认值：0<br/>**说明：**<br/>参数类型为[Length](ts-types.md#length)时，统一设置四个角的宽高，设置负数时取默认值。<br/>参数类型为[EdgeWidths](ts-types.md#edgewidths9)时：<br/>- Top：设置图片边框上边框的宽。<br/>- Bottom：设置图片边框下边框的宽。<br/>- Left：设置图片边框左边框的宽。<br/>- Right：设置图片边框右边框宽。<br/>设置负数时值取1。 | 24| outset | [Length](ts-types.md#length) \| [EdgeWidths](ts-types.md#edgewidths9) | 设置边框图片向外延伸距离。<br/>默认值：0<br/>**说明：**<br/>设置负数时取默认值。<br/>参数类型为[Length](ts-types.md#length)时，统一设置四个角的宽高。<br/>参数类型为[EdgeWidths](ts-types.md#edgewidths9)时：<br/>- Top：设置边框图片上边框向外延伸的距离。<br/>- Bottom：设置边框图片下边框向外延伸的距离。<br/>- Left：设置边框图片左边框向外延伸的距离。<br/>- Right：设置边框图片右边框向外延伸的距离。 | 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 BorderImage { 81 @State WidthValue: number = 0 82 @State SliceValue: number = 0 83 @State OutSetValue: number = 0 84 @State RepeatValue: RepeatMode[] = [RepeatMode.Repeat, RepeatMode.Stretch, RepeatMode.Round, RepeatMode.Space] 85 @State SelectIndex: number = 0 86 @State SelectText: string = 'Repeat' 87 @State FillValue: boolean = false 88 89 build() { 90 Row() { 91 Column({ space: 20 }) { 92 Row() { 93 Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50) 94 } 95 .borderImage({ 96 source: $r('app.media.icon'), 97 slice: this.SliceValue, 98 width: this.WidthValue, 99 outset: this.OutSetValue, 100 repeat: this.RepeatValue[this.SelectIndex], 101 fill: this.FillValue 102 }) 103 104 Column() { 105 Text(`borderImageSlice = ${this.SliceValue}px`) 106 Slider({ 107 value: this.SliceValue, 108 min: 0, 109 max: 100, 110 style: SliderStyle.OutSet 111 }) 112 .onChange((value: number, mode: SliderChangeMode) => { 113 this.SliceValue = value 114 }) 115 } 116 117 Column() { 118 Text(`borderImageWidth = ${this.WidthValue}px`) 119 Slider({ 120 value: this.WidthValue, 121 min: 0, 122 max: 100, 123 style: SliderStyle.OutSet 124 }) 125 .onChange((value: number, mode: SliderChangeMode) => { 126 this.WidthValue = value 127 }) 128 } 129 130 Column() { 131 Text(`borderImageOutSet = ${this.OutSetValue}px`) 132 Slider({ 133 value: this.OutSetValue, 134 min: 0, 135 max: 100, 136 style: SliderStyle.OutSet 137 }) 138 .onChange((value: number, mode: SliderChangeMode) => { 139 this.OutSetValue = value 140 }) 141 } 142 143 Row() { 144 Text('borderImageRepeat: ') 145 Select([{ value: 'Repeat' }, { value: 'Stretch' }, { value: 'Round' }, { value: 'Space' }]) 146 .value(this.SelectText) 147 .selected(this.SelectIndex) 148 .onSelect((index: number, text: string) => { 149 this.SelectIndex = index 150 this.SelectText = text 151 }) 152 } 153 154 Row() { 155 Text(`borderImageFill: ${this.FillValue} `) 156 Toggle({ type: ToggleType.Switch, isOn: this.FillValue }) 157 .onChange((isOn: boolean) => { 158 this.FillValue = isOn 159 }) 160 } 161 162 } 163 .width('100%') 164 } 165 .height('100%') 166 } 167} 168``` 169 170
