1# 外描边设置 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @CCFFWW--> 5<!--Designer: @yangfan229--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9设置组件外描边（outline）样式。外描边绘制在组件的外侧，不影响布局，不会占用组件本身大小。 10 11 12 13> **说明：** 14> 15> 从API version 11开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 16 17## outline 18 19outline(value: OutlineOptions): T 20 21统一外描边样式设置接口。 22 23**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 24 25**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 26 27**系统能力：** SystemCapability.ArkUI.ArkUI.Full 28 29**参数：** 30 31| 参数名 | 类型 | 必填 | 说明 | 32| ------ | ----------------------------------------- | ---- | ------------ | 33| value | [OutlineOptions](ts-types.md#outlineoptions11对象说明) | 是 | 外描边样式。 | 34 35**返回值：** 36 37| 类型 | 说明 | 38| ------ | ------------------------ | 39| T | 返回当前组件。 | 40 41## outline<sup>18+</sup> 42 43outline(options: Optional\<OutlineOptions>): T 44 45统一外描边样式设置接口。与[outline](#outline)相比，options参数新增了对undefined类型的支持。 46 47**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 48 49**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 50 51**系统能力：** SystemCapability.ArkUI.ArkUI.Full 52 53**参数：** 54 55| 参数名 | 类型 | 必填 | 说明 | 56| ------ | ----------------------------------------- | ---- | ---- | 57| options | Optional\<[OutlineOptions](ts-types.md#outlineoptions11对象说明)> | 是 | 外描边样式。<br/>当options的值为undefined时，恢复为无外边框效果。 | 58 59**返回值：** 60 61| 类型 | 说明 | 62| ------ | ------------------------ | 63| T | 返回当前组件。 | 64 65## OutlineStyle<sup>11+</sup>枚举说明 66 67外描边样式。 68 69**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 70 71**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 72 73**系统能力：** SystemCapability.ArkUI.ArkUI.Full 74 75| 名称 | 值 | 说明 | 76| ------ | ------ | ----------------------- | 77| SOLID | 0 | 显示为一条实线。 | 78| DASHED | 1 | 显示为一系列短的方形虚线。 | 79| DOTTED | 2 | 显示为一系列圆点，圆点半径为outlineWidth的一半。 | 80 81## outlineStyle 82 83outlineStyle(value: OutlineStyle | EdgeOutlineStyles): T 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 | [OutlineStyle](#outlinestyle11枚举说明) \| [EdgeOutlineStyles](ts-types.md#edgeoutlinestyles11对象说明) | 是 | 设置元素的外描边样式。<br/>默认值：OutlineStyle.SOLID | 98 99**返回值：** 100 101| 类型 | 说明 | 102| ------ | ------------------------ | 103| T | 返回当前组件。 | 104 105## outlineStyle<sup>18+</sup> 106 107outlineStyle(style: Optional\<OutlineStyle | EdgeOutlineStyles>): T 108 109设置元素的外描边样式。与[outlineStyle](#outlinestyle)相比，style参数新增了对undefined类型的支持。 110 111**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 112 113**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 114 115**系统能力：** SystemCapability.ArkUI.ArkUI.Full 116 117**参数：** 118 119| 参数名 | 类型 | 必填 | 说明 | 120| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 121| style | Optional\<[OutlineStyle](#outlinestyle11枚举说明) \| [EdgeOutlineStyles](ts-types.md#edgeoutlinestyles11对象说明)> | 是 | 设置元素的外描边样式。<br/>默认值：OutlineStyle.SOLID<br/>当style的值为undefined时，恢复为无外描边样式的效果。 | 122 123**返回值：** 124 125| 类型 | 说明 | 126| ------ | ------------------------ | 127| T | 返回当前组件。 | 128 129## outlineWidth 130 131outlineWidth(value: Dimension | EdgeOutlineWidths): T 132 133设置元素的外描边宽度。 134 135**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 136 137**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 138 139**系统能力：** SystemCapability.ArkUI.ArkUI.Full 140 141**参数：** 142 143| 参数名 | 类型 | 必填 | 说明 | 144| ------ | ------------------------------------------------------------ | ---- | ----------------------------------------------------- | 145| value | [Dimension](ts-types.md#dimension10) \| [EdgeOutlineWidths](ts-types.md#edgeoutlinewidths11对象说明) | 是 | 设置元素的外描边宽度，不支持百分比。 <br/>默认值：0。 | 146 147**返回值：** 148 149| 类型 | 说明 | 150| ------ | ------------------------ | 151| T | 返回当前组件。 | 152 153## outlineWidth<sup>18+</sup> 154 155outlineWidth(width: Optional\<Dimension | EdgeOutlineWidths>): T 156 157设置元素的外描边宽度。与[outlineWidth](#outlinewidth)相比，width参数新增了对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| width | Optional\<[Dimension](ts-types.md#dimension10) \| [EdgeOutlineWidths](ts-types.md#edgeoutlinewidths11对象说明)> | 是 | 设置元素的外描边宽度，不支持百分比。 <br/>默认值：0。<br/>当width的值为undefined时，恢复为无外描边宽度的效果。 | 170 171**返回值：** 172 173| 类型 | 说明 | 174| ------ | ------------------------ | 175| T | 返回当前组件。 | 176 177## outlineColor 178 179outlineColor(value: ResourceColor | EdgeColors | LocalizedEdgeColors): T 180 181设置元素的外描边颜色。 182 183**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 184 185**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 186 187**系统能力：** SystemCapability.ArkUI.ArkUI.Full 188 189**参数：** 190 191| 参数名 | 类型 | 必填 | 说明 | 192| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------ | 193| value | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](ts-types.md#edgecolors9) \| [LocalizedEdgeColors](ts-types.md#localizededgecolors12)<sup>12+</sup> | 是 | 设置元素的外描边颜色。<br/>默认值：Color.Black | 194 195**返回值：** 196 197| 类型 | 说明 | 198| ------ | ------------------------ | 199| T | 返回当前组件。 | 200 201## outlineColor<sup>18+</sup> 202 203outlineColor(color: Optional\<ResourceColor | EdgeColors | LocalizedEdgeColors>): T 204 205设置元素的外描边颜色。与[outlineColor](#outlinecolor)相比，color参数新增了对undefined类型的支持。 206 207**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 208 209**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 210 211**系统能力：** SystemCapability.ArkUI.ArkUI.Full 212 213**参数：** 214 215| 参数名 | 类型 | 必填 | 说明 | 216| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 217| color | Optional\<[ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](ts-types.md#edgecolors9) \| [LocalizedEdgeColors](ts-types.md#localizededgecolors12)> | 是 | 设置元素的外描边颜色。<br/>默认值：Color.Black<br/>当color的值为undefined时，恢复为描边颜色为Color.Black的效果。 | 218 219**返回值：** 220 221| 类型 | 说明 | 222| ------ | ------------------------ | 223| T | 返回当前组件。 | 224 225## outlineRadius 226 227outlineRadius(value: Dimension | OutlineRadiuses): T 228 229设置元素的外描边圆角半径。 230 231**卡片能力：** 从API version 11开始，该接口支持在ArkTS卡片中使用。 232 233**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 234 235**系统能力：** SystemCapability.ArkUI.ArkUI.Full 236 237**参数：** 238 239| 参数名 | 类型 | 必填 | 说明 | 240| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 241| value | [Dimension](ts-types.md#dimension10) \| [OutlineRadiuses](ts-types.md#outlineradiuses11对象说明) | 是 | 设置元素的外描边圆角半径，不支持百分比。<br/>默认值：0。<br/>最大生效值：组件width/2 + outlineWidth或组件height/2 + outlineWidth。 | 242 243**返回值：** 244 245| 类型 | 说明 | 246| ------ | ------------------------ | 247| T | 返回当前组件。 | 248 249## outlineRadius<sup>18+</sup> 250 251outlineRadius(radius: Optional\<Dimension | OutlineRadiuses>): T 252 253设置元素的外描边圆角半径。与[outlineRadius](#outlineradius)相比，radius参数新增了对undefined类型的支持。 254 255**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 256 257**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 258 259**系统能力：** SystemCapability.ArkUI.ArkUI.Full 260 261**参数：** 262 263| 参数名 | 类型 | 必填 | 说明 | 264| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 265| radius | Optional\<[Dimension](ts-types.md#dimension10) \| [OutlineRadiuses](ts-types.md#outlineradiuses11对象说明)> | 是 | 设置元素的外描边圆角半径，不支持百分比。<br/>默认值：0。<br/>最大生效值：组件width/2 + outlineWidth或组件height/2 + outlineWidth。<br/>当radius的值为undefined时，恢复为外描边圆角半径为0的效果。 | 266 267**返回值：** 268 269| 类型 | 说明 | 270| ------ | ------------------------ | 271| T | 返回当前组件。 | 272 273## 示例 274 275### 示例1（使用外描边属性） 276 277该示例主要演示如何通过outline来实现组件外描边。 278 279```ts 280// xxx.ets 281@Entry 282@Component 283struct OutlineExample { 284 build() { 285 Column() { 286 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 287 // 线段 288 Text('DASHED') 289 .backgroundColor(Color.Pink) 290 .outlineStyle(OutlineStyle.DASHED).outlineWidth(5).outlineColor(0xAFEEEE).outlineRadius(10) 291 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 292 // 点线 293 Text('DOTTED') 294 .backgroundColor(Color.Pink) 295 .outline({ width: 5, color: 0x317AF7, radius: 10, style: OutlineStyle.DOTTED }) 296 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 297 }.width('100%').height(150) 298 299 Text('.outline') 300 .backgroundColor(Color.Pink) 301 .fontSize(50) 302 .width(300) 303 .height(300) 304 .outline({ 305 width: { left: 3, right: 6, top: 10, bottom: 15 }, 306 color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green }, 307 radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 }, 308 style: { 309 left: OutlineStyle.DOTTED, 310 right: OutlineStyle.DOTTED, 311 top: OutlineStyle.SOLID, 312 bottom: OutlineStyle.DASHED 313 } 314 }).textAlign(TextAlign.Center) 315 } 316 } 317} 318``` 319 320 321 322### 示例2（使用LocalizedEdgeColors类型） 323 324该示例将outline属性中的color属性值设置为LocalizedEdgeColors类型。 325 326```ts 327// xxx.ets 328 329@Entry 330@Component 331struct OutlineExample { 332 build() { 333 Column() { 334 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 335 // 线段 336 Text('DASHED') 337 .backgroundColor(Color.Pink) 338 .outlineStyle(OutlineStyle.DASHED).outlineWidth(5).outlineColor(0xAFEEEE).outlineRadius(10) 339 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 340 // 点线 341 Text('DOTTED') 342 .backgroundColor(Color.Pink) 343 .outline({ width: 5, color: 0x317AF7, radius: 10, style: OutlineStyle.DOTTED }) 344 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 345 }.width('100%').height(150) 346 347 Text('.outline') 348 .backgroundColor(Color.Pink) 349 .fontSize(50) 350 .width(300) 351 .height(300) 352 .outline({ 353 width: { left: 3, right: 6, top: 10, bottom: 15 }, 354 color: { start: '#e3bbbb', end: Color.Blue, top: Color.Red, bottom: Color.Green }, 355 radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 }, 356 style: { 357 left: OutlineStyle.DOTTED, 358 right: OutlineStyle.DOTTED, 359 top: OutlineStyle.SOLID, 360 bottom: OutlineStyle.DASHED 361 } 362 }).textAlign(TextAlign.Center) 363 } 364 } 365} 366``` 367 368从左至右显示语言示例图 369 370 371 372从右至左显示语言示例图 373 374
