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## outline<sup>18+</sup> 30 31outline(options: Optional\<OutlineOptions>) 32 33统一外描边样式设置接口。与[outline](#outline)相比，options参数新增了对undefined类型的支持。 34 35**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 36 37**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 38 39**系统能力：** SystemCapability.ArkUI.ArkUI.Full 40 41**参数：** 42 43| 参数名 | 类型 | 必填 | 说明 | 44| ------ | ----------------------------------------- | ---- | ---- | 45| options | Optional\<[OutlineOptions](#outlineoptions对象说明)> | 是 | 外描边样式。<br/>当options的值为undefined时，恢复为无外边框效果。 | 46 47## OutlineStyle<sup>11+</sup>枚举说明 48 49外描边样式。 50 51**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 52 53**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 54 55**系统能力：** SystemCapability.ArkUI.ArkUI.Full 56 57| 名称 | 说明 | 58| ------ | ----------------------------- | 59| SOLID | 显示为一条实线。 | 60| DASHED | 显示为一系列短的方形虚线。 | 61| DOTTED | 显示为一系列圆点，圆点半径为outlineWidth的一半。 | 62 63## outlineStyle 64 65outlineStyle(value: OutlineStyle | EdgeOutlineStyles) 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 | [OutlineStyle](#outlinestyle11枚举说明) \| [EdgeOutlineStyles](#edgeoutlinestyles对象说明) | 是 | 设置元素的外描边样式。<br/>默认值：OutlineStyle.SOLID | 80 81## outlineStyle<sup>18+</sup> 82 83outlineStyle(style: Optional\<OutlineStyle | EdgeOutlineStyles>) 84 85设置元素的外描边样式。与[outlineStyle](#outlinestyle)相比，style参数新增了对undefined类型的支持。 86 87**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 88 89**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 90 91**系统能力：** SystemCapability.ArkUI.ArkUI.Full 92 93**参数：** 94 95| 参数名 | 类型 | 必填 | 说明 | 96| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 97| style | Optional\<[OutlineStyle](#outlinestyle11枚举说明) \| [EdgeOutlineStyles](#edgeoutlinestyles对象说明)> | 是 | 设置元素的外描边样式。<br/>默认值：OutlineStyle.SOLID<br/>当style的值为undefined时，恢复为无外描边样式的效果。 | 98 99## outlineWidth 100 101outlineWidth(value: Dimension | EdgeOutlineWidths) 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) \| [EdgeOutlineWidths](#edgeoutlinewidths对象说明) | 是 | 设置元素的外描边宽度，不支持百分比。 <br/>默认值：0。 | 116 117## outlineWidth<sup>18+</sup> 118 119outlineWidth(width: Optional\<Dimension | EdgeOutlineWidths>) 120 121设置元素的外描边宽度。与[outlineWidth](#outlinewidth)相比，width参数新增了对undefined类型的支持。 122 123**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 124 125**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 126 127**系统能力：** SystemCapability.ArkUI.ArkUI.Full 128 129**参数：** 130 131| 参数名 | 类型 | 必填 | 说明 | 132| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 133| width | Optional\<[Dimension](ts-types.md#dimension10) \| [EdgeOutlineWidths](#edgeoutlinewidths对象说明)> | 是 | 设置元素的外描边宽度，不支持百分比。 <br/>默认值：0。<br/>当width的值为undefined时，恢复为无外描边宽度的效果。 | 134 135## outlineColor 136 137outlineColor(value: ResourceColor | EdgeColors) 138 139设置元素的外描边颜色。 140 141**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 142 143**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 144 145**系统能力：** SystemCapability.ArkUI.ArkUI.Full 146 147**参数：** 148 149| 参数名 | 类型 | 必填 | 说明 | 150| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------ | 151| value | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors对象说明) | 是 | 设置元素的外描边颜色。<br/>默认值：Color.Black。 | 152 153## outlineColor<sup>18+</sup> 154 155outlineColor(color: Optional\<ResourceColor | EdgeColors>) 156 157设置元素的外描边颜色。与[outlineColor](#outlinecolor)相比，color参数新增了对undefined类型的支持。 158 159**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 160 161**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 162 163**系统能力：** SystemCapability.ArkUI.ArkUI.Full 164 165**参数：** 166 167| 参数名 | 类型 | 必填 | 说明 | 168| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 169| color | Optional\<[ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors对象说明)> | 是 | 设置元素的外描边颜色。<br/>默认值：Color.Black。<br/>当color的值为undefined时，恢复为描边颜色为Color.Black的效果。 | 170 171## outlineRadius 172 173outlineRadius(value: Dimension | OutlineRadiuses) 174 175设置元素的外描边圆角半径。 176 177**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 178 179**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 180 181**系统能力：** SystemCapability.ArkUI.ArkUI.Full 182 183**参数：** 184 185| 参数名 | 类型 | 必填 | 说明 | 186| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 187| value | [Dimension](ts-types.md#dimension10) \| [OutlineRadiuses](#outlineradiuses对象说明) | 是 | 设置元素的外描边圆角半径，不支持百分比。<br/>默认值：0。<br/>最大生效值：组件width/2 + outlineWidth或组件height/2 + outlineWidth。 | 188 189## outlineRadius<sup>18+</sup> 190 191outlineRadius(radius: Optional\<Dimension | OutlineRadiuses>) 192 193设置元素的外描边圆角半径。与[outlineRadius](#outlineradius)相比，radius参数新增了对undefined类型的支持。 194 195**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 196 197**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 198 199**系统能力：** SystemCapability.ArkUI.ArkUI.Full 200 201**参数：** 202 203| 参数名 | 类型 | 必填 | 说明 | 204| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 205| radius | Optional\<[Dimension](ts-types.md#dimension10) \| [OutlineRadiuses](#outlineradiuses对象说明)> | 是 | 设置元素的外描边圆角半径，不支持百分比。<br/>默认值：0。<br/>最大生效值：组件width/2 + outlineWidth或组件height/2 + outlineWidth。<br/>当radius的值为undefined时，恢复为外描边圆角半径为0的效果。 | 206 207## OutlineOptions对象说明 208 209**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 210 211**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 212 213| 名称 | 类型 |必填 | 说明 | 214| ------ | ----------------------|-------------------------------------- | ------------------------------------------------------------ | 215| width | [Dimension](ts-types.md#dimension10) \| [EdgeOutlineWidths](#edgeoutlinewidths对象说明)| 否| 设置外描边宽度，不支持百分比。<br/>默认值：0，外描边效果width为必设项，否则不显示外描边。 | 216| color | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors对象说明) \| [LocalizedEdgeColors](#localizededgecolors对象说明12)<sup>12+</sup> |否 | 设置外描边颜色。<br/>默认值：Color.Black。 | 217| radius | [Dimension](ts-types.md#dimension10) \| [OutlineRadiuses](#outlineradiuses对象说明)| 否| 设置外描边圆角半径，不支持百分比。<br/>默认值：0。<br/>最大生效值：组件width/2 + outlineWidth或组件height/2 + outlineWidth。 | 218| style | [OutlineStyle](#outlinestyle11枚举说明) \| [EdgeOutlineStyles](#edgeoutlinestyles对象说明)|否| 设置外描边样式。<br/>默认值：OutlineStyle.SOLID。 | 219 220## EdgeOutlineWidths对象说明 221 222引入该对象时，至少传入一个参数。 223 224**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 225 226**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 227 228| 名称 | 参数类型 | 必填 | 描述 | 229| ------ | ---------------------------- | ---- | ------- | 230| left | [Dimension](ts-types.md#dimension10) | 否 | 左侧外描边宽度。 | 231| right | [Dimension](ts-types.md#dimension10) | 否 | 右侧外描边宽度。 | 232| top | [Dimension](ts-types.md#dimension10) | 否 | 上侧外描边宽度。 | 233| bottom | [Dimension](ts-types.md#dimension10) | 否 | 下侧外描边宽度。 | 234 235## EdgeColors对象说明 236 237引入该对象时，至少传入一个参数。 238 239**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 240 241**系统能力：** SystemCapability.ArkUI.ArkUI.Full 242 243**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 244 245| 名称 | 参数类型 | 必填 | 描述 | 246| ------ | ---------------------------------------- | ---- | ------- | 247| left | [ResourceColor](ts-types.md#resourcecolor) | 否 | 左侧外描边颜色。 | 248| right | [ResourceColor](ts-types.md#resourcecolor) | 否 | 右侧外描边颜色。 | 249| top | [ResourceColor](ts-types.md#resourcecolor) | 否 | 上侧外描边颜色。 | 250| bottom | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下侧外描边颜色。 | 251 252## LocalizedEdgeColors对象说明<sup>12+</sup> 253 254引入该对象时，至少传入一个参数。 255 256**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 257 258**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 259 260| 名称 | 参数类型 | 必填 | 描述 | 261| ------ | ---------------------------------------- | ---- | ------- | 262| start | [ResourceColor](ts-types.md#resourcecolor) | 否 | 左侧外描边颜色。<br/>从左至右显示语言模式下为右侧外描边颜色。 | 263| end | [ResourceColor](ts-types.md#resourcecolor) | 否 | 右侧外描边颜色。<br/>从左至右显示语言模式下为左侧外描边颜色。 | 264| top | [ResourceColor](ts-types.md#resourcecolor) | 否 | 上侧外描边颜色。 | 265| bottom | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下侧外描边颜色。 | 266 267## OutlineRadiuses对象说明 268 269引用该对象时，至少传入一个参数。 270 271**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 272 273**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 274 275| 名称 | 参数类型 | 必填 | 描述 | 276| ----------- | ---------------------------- | ---- | -------- | 277| topLeft | [Dimension](ts-types.md#dimension10) | 否 | 左上角圆角半径。 | 278| topRight | [Dimension](ts-types.md#dimension10) | 否 | 右上角圆角半径。 | 279| bottomLeft | [Dimension](ts-types.md#dimension10) | 否 | 左下角圆角半径。 | 280| bottomRight | [Dimension](ts-types.md#dimension10) | 否 | 右下角圆角半径。 | 281 282## EdgeOutlineStyles对象说明 283 284引入该对象时，至少传入一个参数。 285 286**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 287 288**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 289 290| 名称 | 参数类型 | 必填 | 描述 | 291| ------ | ---------------------------------------- | ---- | ------- | 292| left | [OutlineStyle](#outlinestyle11枚举说明) | 否 | 左侧外描边样式。 | 293| right | [OutlineStyle](#outlinestyle11枚举说明) | 否 | 右侧外描边样式。 | 294| top | [OutlineStyle](#outlinestyle11枚举说明) | 否 | 上侧外描边样式。 | 295| bottom | [OutlineStyle](#outlinestyle11枚举说明) | 否 | 下侧外描边样式。 | 296 297## 示例 298 299### 示例1（使用外描边属性） 300 301该示例主要演示如何通过outline来实现组件外描边。 302 303```ts 304// xxx.ets 305@Entry 306@Component 307struct OutlineExample { 308 build() { 309 Column() { 310 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 311 // 线段 312 Text('DASHED') 313 .backgroundColor(Color.Pink) 314 .outlineStyle(OutlineStyle.DASHED).outlineWidth(5).outlineColor(0xAFEEEE).outlineRadius(10) 315 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 316 // 点线 317 Text('DOTTED') 318 .backgroundColor(Color.Pink) 319 .outline({ width: 5, color: 0x317AF7, radius: 10, style: OutlineStyle.DOTTED }) 320 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 321 }.width('100%').height(150) 322 323 Text('.outline') 324 .backgroundColor(Color.Pink) 325 .fontSize(50) 326 .width(300) 327 .height(300) 328 .outline({ 329 width: { left: 3, right: 6, top: 10, bottom: 15 }, 330 color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green }, 331 radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 }, 332 style: { 333 left: OutlineStyle.DOTTED, 334 right: OutlineStyle.DOTTED, 335 top: OutlineStyle.SOLID, 336 bottom: OutlineStyle.DASHED 337 } 338 }).textAlign(TextAlign.Center) 339 } 340 } 341} 342``` 343 344 345 346### 示例2（使用LocalizedEdgeColors类型） 347 348该示例将outline属性中的color属性值设置为LocalizedEdgeColors类型。 349 350```ts 351// xxx.ets 352 353@Entry 354@Component 355struct OutlineExample { 356 build() { 357 Column() { 358 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 359 // 线段 360 Text('DASHED') 361 .backgroundColor(Color.Pink) 362 .outlineStyle(OutlineStyle.DASHED).outlineWidth(5).outlineColor(0xAFEEEE).outlineRadius(10) 363 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 364 // 点线 365 Text('DOTTED') 366 .backgroundColor(Color.Pink) 367 .outline({ width: 5, color: 0x317AF7, radius: 10, style: OutlineStyle.DOTTED }) 368 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 369 }.width('100%').height(150) 370 371 Text('.outline') 372 .backgroundColor(Color.Pink) 373 .fontSize(50) 374 .width(300) 375 .height(300) 376 .outline({ 377 width: { left: 3, right: 6, top: 10, bottom: 15 }, 378 color: { start: '#e3bbbb', end: Color.Blue, top: Color.Red, bottom: Color.Green }, 379 radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 }, 380 style: { 381 left: OutlineStyle.DOTTED, 382 right: OutlineStyle.DOTTED, 383 top: OutlineStyle.SOLID, 384 bottom: OutlineStyle.DASHED 385 } 386 }).textAlign(TextAlign.Center) 387 } 388 } 389} 390``` 391 392从左至右显示语言示例图 393 394 395 396从右至左显示语言示例图 397 398
