1# 外描边设置 2 3设置组件外描边（outline）样式。外描边绘制在组件的外侧，不影响布局，不会占用组件本身大小。 4 5 6 7> **说明：** 8> 9> 从API Version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 10 11## outline 12 13outline(value: OutlineOptions) 14 15统一外描边样式设置接口。 16 17**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 18 19**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 20 21**系统能力：** SystemCapability.ArkUI.ArkUI.Full 22 23**参数：** 24 25| 参数名 | 类型 | 必填 | 说明 | 26| ------ | ----------------------------------------- | ---- | ---- | 27| value | [OutlineOptions](#outlineoptions对象说明) | 是 | 外描边样式。 | 28 29## OutlineStyle<sup>11+</sup>枚举说明 30 31外描边样式。 32 33**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 34 35**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39| 名称 | 说明 | 40| ------ | ----------------------------- | 41| SOLID | 显示为一条实线。 | 42| DASHED | 显示为一系列短的方形虚线。 | 43| DOTTED | 显示为一系列圆点，圆点半径为outlineWidth的一半。 | 44 45## outlineStyle 46 47outlineStyle(value: OutlineStyle | EdgeOutlineStyles) 48 49设置元素的外描边样式。 50 51**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 52 53**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 54 55**系统能力：** SystemCapability.ArkUI.ArkUI.Full 56 57**参数：** 58 59| 参数名 | 类型 | 必填 | 说明 | 60| ------ | ------------------------------------------------------------ | ---- | ----------------------------------------------------- | 61| value | [OutlineStyle](#outlinestyle11枚举说明) \| [EdgeOutlineStyles](#edgeoutlinestyles对象说明) | 是 | 设置元素的外描边样式。<br/>默认值：OutlineStyle.SOLID | 62 63## outlineWidth 64 65outlineWidth(value: Dimension | EdgeOutlineWidths) 66 67设置元素的外描边宽度。 68 69**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 70 71**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 72 73**系统能力：** SystemCapability.ArkUI.ArkUI.Full 74 75**参数：** 76 77| 参数名 | 类型 | 必填 | 说明 | 78| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 79| value | [Dimension](ts-types.md#dimension10) \| [EdgeOutlineWidths](#edgeoutlinewidths对象说明) | 是 | 设置元素的外描边宽度，不支持百分比。 <br/>默认值：0，外描边效果width为必设项。 | 80 81## outlineColor 82 83outlineColor(value: ResourceColor | EdgeColors) 84 85设置元素的外描边颜色。 86 87**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 88 89**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 90 91**系统能力：** SystemCapability.ArkUI.ArkUI.Full 92 93**参数：** 94 95| 参数名 | 类型 | 必填 | 说明 | 96| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------ | 97| value | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors对象说明) | 是 | 设置元素的外描边颜色。<br/>默认值：Color.Black。 | 98 99## outlineRadius 100 101outlineRadius(value: Dimension | OutlineRadiuses) 102 103设置元素的外描边圆角半径。 104 105**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 106 107**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 108 109**系统能力：** SystemCapability.ArkUI.ArkUI.Full 110 111**参数：** 112 113| 参数名 | 类型 | 必填 | 说明 | 114| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 115| value | [Dimension](ts-types.md#dimension10) \| [OutlineRadiuses](#outlineradiuses对象说明) | 是 | 设置元素的外描边圆角半径，不支持百分比。<br/>默认值：0。<br/>最大生效值：组件width/2 + outlineWidth或组件height/2 + outlineWidth。 | 116 117## OutlineOptions对象说明 118 119**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 120 121**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 122 123| 名称 | 类型 |必填 | 说明 | 124| ------ | ----------------------|-------------------------------------- | ------------------------------------------------------------ | 125| width | [Dimension](ts-types.md#dimension10) \| [EdgeOutlineWidths](#edgeoutlinewidths对象说明)| 否| 设置外描边宽度，不支持百分比。<br/>默认值：0，外描边效果width为必设项，否则不显示外描边。 | 126| color | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors对象说明) \| [LocalizedEdgeColors](#localizededgecolors对象说明12)<sup>12+</sup> |否 | 设置外描边颜色。<br/>默认值：Color.Black。 | 127| radius | [Dimension](ts-types.md#dimension10) \| [OutlineRadiuses](#outlineradiuses对象说明)| 否| 设置外描边圆角半径，不支持百分比。<br/>默认值：0。<br/>最大生效值：组件width/2 + outlineWidth或组件height/2 + outlineWidth。 | 128| style | [OutlineStyle](#outlinestyle11枚举说明) \| [EdgeOutlineStyles](#edgeoutlinestyles对象说明)|否| 设置外描边样式。<br/>默认值：OutlineStyle.SOLID。 | 129 130## EdgeOutlineWidths对象说明 131 132引入该对象时，至少传入一个参数。 133 134**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 135 136**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 137 138| 名称 | 参数类型 | 必填 | 描述 | 139| ------ | ---------------------------- | ---- | ------- | 140| left | [Dimension](ts-types.md#dimension10) | 否 | 左侧外描边宽度。 | 141| right | [Dimension](ts-types.md#dimension10) | 否 | 右侧外描边宽度。 | 142| top | [Dimension](ts-types.md#dimension10) | 否 | 上侧外描边宽度。 | 143| bottom | [Dimension](ts-types.md#dimension10) | 否 | 下侧外描边宽度。 | 144 145## EdgeColors对象说明 146 147引入该对象时，至少传入一个参数。 148 149**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 150 151**系统能力：** SystemCapability.ArkUI.ArkUI.Full 152 153**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 154 155| 名称 | 参数类型 | 必填 | 描述 | 156| ------ | ---------------------------------------- | ---- | ------- | 157| left | [ResourceColor](ts-types.md#resourcecolor) | 否 | 左侧外描边颜色。 | 158| right | [ResourceColor](ts-types.md#resourcecolor) | 否 | 右侧外描边颜色。 | 159| top | [ResourceColor](ts-types.md#resourcecolor) | 否 | 上侧外描边颜色。 | 160| bottom | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下侧外描边颜色。 | 161 162## LocalizedEdgeColors对象说明<sup>12+</sup> 163 164引入该对象时，至少传入一个参数。 165 166**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 167 168**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 169 170| 名称 | 参数类型 | 必填 | 描述 | 171| ------ | ---------------------------------------- | ---- | ------- | 172| start | [ResourceColor](ts-types.md#resourcecolor) | 否 | 左侧外描边颜色。<br/>从左至右显示语言模式下为右侧外描边颜色。 | 173| end | [ResourceColor](ts-types.md#resourcecolor) | 否 | 右侧外描边颜色。<br/>从左至右显示语言模式下为左侧外描边颜色。 | 174| top | [ResourceColor](ts-types.md#resourcecolor) | 否 | 上侧外描边颜色。 | 175| bottom | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下侧外描边颜色。 | 176 177## OutlineRadiuses对象说明 178 179引用该对象时，至少传入一个参数。 180 181**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 182 183**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 184 185| 名称 | 参数类型 | 必填 | 描述 | 186| ----------- | ---------------------------- | ---- | -------- | 187| topLeft | [Dimension](ts-types.md#dimension10) | 否 | 左上角圆角半径。 | 188| topRight | [Dimension](ts-types.md#dimension10) | 否 | 右上角圆角半径。 | 189| bottomLeft | [Dimension](ts-types.md#dimension10) | 否 | 左下角圆角半径。 | 190| bottomRight | [Dimension](ts-types.md#dimension10) | 否 | 右下角圆角半径。 | 191 192## EdgeOutlineStyles对象说明 193 194引入该对象时，至少传入一个参数。 195 196**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 197 198**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 199 200| 名称 | 参数类型 | 必填 | 描述 | 201| ------ | ---------------------------------------- | ---- | ------- | 202| left | [OutlineStyle](#outlinestyle11枚举说明) | 否 | 左侧外描边样式。 | 203| right | [OutlineStyle](#outlinestyle11枚举说明) | 否 | 右侧外描边样式。 | 204| top | [OutlineStyle](#outlinestyle11枚举说明) | 否 | 上侧外描边样式。 | 205| bottom | [OutlineStyle](#outlinestyle11枚举说明) | 否 | 下侧外描边样式。 | 206 207## 示例 208 209### 示例1（使用外描边属性） 210 211该示例主要演示如何通过outline来实现组件外描边。 212 213```ts 214// xxx.ets 215@Entry 216@Component 217struct OutlineExample { 218 build() { 219 Column() { 220 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 221 // 线段 222 Text('DASHED') 223 .backgroundColor(Color.Pink) 224 .outlineStyle(OutlineStyle.DASHED).outlineWidth(5).outlineColor(0xAFEEEE).outlineRadius(10) 225 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 226 // 点线 227 Text('DOTTED') 228 .backgroundColor(Color.Pink) 229 .outline({ width: 5, color: 0x317AF7, radius: 10, style: OutlineStyle.DOTTED }) 230 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 231 }.width('100%').height(150) 232 233 Text('.outline') 234 .backgroundColor(Color.Pink) 235 .fontSize(50) 236 .width(300) 237 .height(300) 238 .outline({ 239 width: { left: 3, right: 6, top: 10, bottom: 15 }, 240 color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green }, 241 radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 }, 242 style: { 243 left: OutlineStyle.DOTTED, 244 right: OutlineStyle.DOTTED, 245 top: OutlineStyle.SOLID, 246 bottom: OutlineStyle.DASHED 247 } 248 }).textAlign(TextAlign.Center) 249 } 250 } 251} 252``` 253 254 255 256### 示例2（使用LocalizedEdgeColors类型） 257 258该示例将outline属性中的color属性值设置为LocalizedEdgeColors类型。 259 260```ts 261// xxx.ets 262 263@Entry 264@Component 265struct OutlineExample { 266 build() { 267 Column() { 268 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 269 // 线段 270 Text('DASHED') 271 .backgroundColor(Color.Pink) 272 .outlineStyle(OutlineStyle.DASHED).outlineWidth(5).outlineColor(0xAFEEEE).outlineRadius(10) 273 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 274 // 点线 275 Text('DOTTED') 276 .backgroundColor(Color.Pink) 277 .outline({ width: 5, color: 0x317AF7, radius: 10, style: OutlineStyle.DOTTED }) 278 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 279 }.width('100%').height(150) 280 281 Text('.outline') 282 .backgroundColor(Color.Pink) 283 .fontSize(50) 284 .width(300) 285 .height(300) 286 .outline({ 287 width: { left: 3, right: 6, top: 10, bottom: 15 }, 288 color: { start: '#e3bbbb', end: Color.Blue, top: Color.Red, bottom: Color.Green }, 289 radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 }, 290 style: { 291 left: OutlineStyle.DOTTED, 292 right: OutlineStyle.DOTTED, 293 top: OutlineStyle.SOLID, 294 bottom: OutlineStyle.DASHED 295 } 296 }).textAlign(TextAlign.Center) 297 } 298 } 299} 300``` 301 302从左至右显示语言示例图 303 304 305 306从右至左显示语言示例图 307 308
