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**系统能力：** SystemCapability.ArkUI.ArkUI.Full 18 19**参数：** 20 21| 参数名 | 类型 | 必填 | 描述 | 22| ----------- | ----------------------------------------------- | ---- | -------------------------------- | 23| borderImage | [BorderImageOption](#borderimageoption对象说明) | 是 | 图片边框或者渐变色边框设置接口。 | 24 25## BorderImageOption对象说明 26 27该接口支持在ArkTS卡片中使用。 28 29| 名称 | 类型 | 必填| 描述 | 30| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 31| 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)，在非容器组件上使用会失效。 | 32| 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：设置图片右上角或者右下角被切割的宽。 | 33| 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。 | 34| 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：设置边框图片右边框向外延伸的距离。 | 35| repeat | [RepeatMode](#repeatmode枚举说明) | 否 | 设置被切割的图片在边框上的重复方式。<br/>默认值：RepeatMode.Stretch | 36| fill | boolean | 否 | 设置边框图片是否中心填充。<br/>默认值：false | 37 38## RepeatMode枚举说明 39 40该接口支持在ArkTS卡片中使用。 41 42| 名称 | 描述 | 43| ------- | ----------------------------------- | 44| Repeat | 被切割图片重复铺平在图片边框上，超出的部分会被剪裁。 | 45| Stretch | 被切割图片以拉伸填充的方式铺满图片边框。 | 46| Round | 被切割图片以整数次平铺在图片边框上，无法以整数次平铺时压缩被切割图片。 | 47| Space | 被切割图片以整数次平铺在图片边框上，无法以整数次平铺时以空白填充。 | 48 49## 示例 50 51### 示例1 52 53 54```ts 55// xxx.ets 56@Entry 57@Component 58struct Index { 59 build() { 60 Row() { 61 Column() { 62 Text('This is gradient color.').textAlign(TextAlign.Center).height(50).width(200) 63 .borderImage({ 64 source: { 65 angle: 90, 66 direction: GradientDirection.Left, 67 colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]] 68 }, 69 slice: { top: 10, bottom: 10, left: 10, right: 10 }, 70 width: { top: "10px", bottom: "10px", left: "10px", right: "10px" }, 71 repeat: RepeatMode.Stretch, 72 fill: false 73 }) 74 } 75 .width('100%') 76 } 77 .height('100%') 78 } 79} 80``` 81 82 83 84### 示例2 85 86```ts 87// xxx.ets 88@Entry 89@Component 90struct BorderImage { 91 @State WidthValue: number = 0 92 @State SliceValue: number = 0 93 @State OutSetValue: number = 0 94 @State RepeatValue: RepeatMode[] = [RepeatMode.Repeat, RepeatMode.Stretch, RepeatMode.Round, RepeatMode.Space] 95 @State SelectIndex: number = 0 96 @State SelectText: string = 'Repeat' 97 @State FillValue: boolean = false 98 99 build() { 100 Row() { 101 Column({ space: 20 }) { 102 Row() { 103 Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50) 104 } 105 .borderImage({ 106 source: $r('app.media.icon'), 107 slice: this.SliceValue, 108 width: this.WidthValue, 109 outset: this.OutSetValue, 110 repeat: this.RepeatValue[this.SelectIndex], 111 fill: this.FillValue 112 }) 113 114 Column() { 115 Text(`borderImageSlice = ${this.SliceValue}px`) 116 Slider({ 117 value: this.SliceValue, 118 min: 0, 119 max: 100, 120 style: SliderStyle.OutSet 121 }) 122 .onChange((value: number, mode: SliderChangeMode) => { 123 this.SliceValue = value 124 }) 125 } 126 127 Column() { 128 Text(`borderImageWidth = ${this.WidthValue}px`) 129 Slider({ 130 value: this.WidthValue, 131 min: 0, 132 max: 100, 133 style: SliderStyle.OutSet 134 }) 135 .onChange((value: number, mode: SliderChangeMode) => { 136 this.WidthValue = value 137 }) 138 } 139 140 Column() { 141 Text(`borderImageOutSet = ${this.OutSetValue}px`) 142 Slider({ 143 value: this.OutSetValue, 144 min: 0, 145 max: 100, 146 style: SliderStyle.OutSet 147 }) 148 .onChange((value: number, mode: SliderChangeMode) => { 149 this.OutSetValue = value 150 }) 151 } 152 153 Row() { 154 Text('borderImageRepeat: ') 155 Select([{ value: 'Repeat' }, { value: 'Stretch' }, { value: 'Round' }, { value: 'Space' }]) 156 .value(this.SelectText) 157 .selected(this.SelectIndex) 158 .onSelect((index: number, value?: string) => { 159 this.SelectIndex = index 160 this.SelectText = value as string 161 }) 162 } 163 164 Row() { 165 Text(`borderImageFill: ${this.FillValue} `) 166 Toggle({ type: ToggleType.Switch, isOn: this.FillValue }) 167 .onChange((isOn: boolean) => { 168 this.FillValue = isOn 169 }) 170 } 171 172 } 173 .width('100%') 174 } 175 .height('100%') 176 } 177} 178``` 179 180
