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