1# 边框设置 2 3设置组件边框样式。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9 10## border 11 12border(value: BorderOptions) 13 14设置边框样式。 15 16**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 17 18**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 19 20**系统能力：** SystemCapability.ArkUI.ArkUI.Full 21 22**参数：** 23 24| 参数名 | 类型 | 必填 | 说明 | 25| ------ | --------------------------------------- | ---- | ------------------------------------------------------------ | 26| value | [BorderOptions](#borderoptions对象说明) | 是 | 统一边框样式设置接口。<br/>**说明：** <br/>边框宽度默认值为0，即不显示边框。<br/>从API Version 9开始，父节点的border显示在子节点内容之上。 | 27 28## borderStyle 29 30borderStyle(value: BorderStyle | EdgeStyles) 31 32设置元素的边框线条样式。 33 34**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 35 36**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 37 38**系统能力：** SystemCapability.ArkUI.ArkUI.Full 39 40**参数：** 41 42| 参数名 | 类型 | 必填 | 说明 | 43| ------ | ------------------------------------------------------------ | ---- | -------------------------------------------------- | 44| value | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9对象说明)<sup>9+</sup> | 是 | 设置元素的边框样式。<br/>默认值：BorderStyle.Solid | 45 46## borderWidth 47 48borderWidth(value: Length | EdgeWidths | LocalizedEdgeWidths) 49 50设置边框的宽度。 51 52**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 53 54**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 55 56**系统能力：** SystemCapability.ArkUI.ArkUI.Full 57 58**参数：** 59 60| 参数名 | 类型 | 必填 | 说明 | 61| ------ | ------------------------------------------------------------ | ---- | ---------------------------------- | 62| value | [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9对象说明)<sup>9+</sup> \| [LocalizedEdgeWidths](#localizededgewidths12对象说明)<sup>12+</sup> | 是 | 设置元素的边框宽度，不支持百分比。 | 63 64## borderColor 65 66borderColor(value: ResourceColor | EdgeColors | LocalizedEdgeColors) 67 68设置边框的颜色。 69 70**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 71 72**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 73 74**系统能力：** SystemCapability.ArkUI.ArkUI.Full 75 76**参数：** 77 78| 参数名 | 类型 | 必填 | 说明 | 79| ------ | ------------------------------------------------------------ | ---- | -------------------------------------------- | 80| value | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9对象说明)<sup>9+</sup> \| [LocalizedEdgeColors](#localizededgecolors12对象说明)<sup>12+</sup> | 是 | 设置元素的边框颜色。<br/>默认值：Color.Black | 81 82## borderRadius 83 84borderRadius(value: Length | BorderRadiuses | LocalizedBorderRadiuses) 85 86设置边框的圆角。圆角大小受组件尺寸限制，最大值为组件宽或高的一半。 87 88**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 89 90**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 91 92**系统能力：** SystemCapability.ArkUI.ArkUI.Full 93 94**参数：** 95 96| 参数名 | 类型 | 必填 | 说明 | 97| ------ | ------------------------------------------------------------ | ---- | -------------------------------------- | 98| value | [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9对象说明)<sup>9+</sup> \| [LocalizedBorderRadiuses](#localizedborderradiuses12对象说明)<sup>12+</sup> | 是 | 设置元素的边框圆角半径，支持百分比，百分比依据组件宽度。设置圆角后，可搭配[.clip属性](./ts-universal-attributes-sharp-clipping.md#clip12)进行裁剪，避免子组件超出组件自身。| 99 100## BorderOptions对象说明 101 102**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 103 104**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 105 106| 名称 | 参数类型 | 必填 | 描述 | 107| ------ | ------------------------------------------------------------ | ---- | ------------------ | 108| width | [Length](ts-types.md#length) \| [EdgeWidths](#edgewidths9对象说明)<sup>9+</sup> \| [LocalizedEdgeWidths](#localizededgewidths12对象说明)<sup>12+</sup> | 否 | 设置边框宽度。 | 109| color | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](#edgecolors9对象说明)<sup>9+</sup> \| [LocalizedEdgeColors](#localizededgecolors12对象说明)<sup>12+</sup> | 否 | 设置边框颜色。 | 110| radius | [Length](ts-types.md#length) \| [BorderRadiuses](#borderradiuses9对象说明)<sup>9+</sup> \| [LocalizedBorderRadiuses](#localizedborderradiuses12对象说明)<sup>12+</sup> | 否 | 设置边框圆角半径。 | 111| style | [BorderStyle](ts-appendix-enums.md#borderstyle) \| [EdgeStyles](#edgestyles9对象说明)<sup>9+</sup> | 否 | 设置边框样式。 | 112| dashGap<sup>12+</sup> | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [EdgeWidths](#edgewidths9对象说明) \| [LocalizedEdgeWidths](#localizededgewidths12对象说明) | 否 | 设置虚线的线段间距，仅在边框样式为虚线时生效。<br/>不支持设置百分比。 | 113| dashWidth<sup>12+</sup> | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) \| [EdgeWidths](#edgewidths9对象说明) \| [LocalizedEdgeWidths](#localizededgewidths12对象说明) | 否 | 设置虚线的线段长度，仅在边框样式为虚线时生效。<br/>不支持设置百分比。 | 114 115## EdgeWidths<sup>9+</sup>对象说明 116 117引入该对象时，至少传入一个参数。 118 119**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 120 121**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 122 123| 名称 | 参数类型 | 必填 | 描述 | 124| ------ | ---------------------------- | ---- | ------- | 125| left | [Length](ts-types.md#length) | 否 | 左侧边框宽度。 | 126| right | [Length](ts-types.md#length) | 否 | 右侧边框宽度。 | 127| top | [Length](ts-types.md#length) | 否 | 上侧边框宽度。 | 128| bottom | [Length](ts-types.md#length) | 否 | 下侧边框宽度。 | 129 130## LocalizedEdgeWidths<sup>12+</sup>对象说明 131 132边框宽度类型，用于描述组件边框不同方向的宽度。 133引入该对象时，至少传入一个参数。 134 135**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 136 137| 名称 | 参数类型 | 必填 | 描述 | 138| ------ | ---------------------------- | ---- | ------- | 139| start | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 左侧边框宽度。<br />从右至左显示语言模式下为右侧边框宽度。 | 140| end | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 右侧边框宽度。<br />从右至左显示语言模式下为左侧边框宽度。 | 141| top | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 上侧边框宽度。 | 142| bottom | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12) | 否 | 下侧边框宽度。 | 143 144## EdgeColors<sup>9+</sup>对象说明 145 146引入该对象时，至少传入一个参数。 147 148**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 149 150**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 151 152| 名称 | 参数类型 | 必填 | 描述 | 153| ------ | ---------------------------------------- | ---- | ------- | 154| left | [ResourceColor](ts-types.md#resourcecolor) | 否 | 左侧边框颜色。 | 155| right | [ResourceColor](ts-types.md#resourcecolor) | 否 | 右侧边框颜色。 | 156| top | [ResourceColor](ts-types.md#resourcecolor) | 否 | 上侧边框颜色。 | 157| bottom | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下侧边框颜色。 | 158 159## LocalizedEdgeColors<sup>12+</sup>对象说明 160 161边框颜色，用于描述组件边框四条边的颜色。 162 163引入该对象时，至少传入一个参数。 164 165**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 166 167**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 168 169| 名称 | 参数类型 | 必填 | 描述 | 170| ------ | ---------------------------------------- | ---- | ------- | 171| start | [ResourceColor](ts-types.md#resourcecolor) | 否 | 左侧边框颜色。<br />从右至左显示语言模式下为右侧边框颜色。 | 172| end | [ResourceColor](ts-types.md#resourcecolor) | 否 | 右侧边框颜色。<br />从右至左显示语言模式下为左侧边框颜色。 | 173| top | [ResourceColor](ts-types.md#resourcecolor) | 否 | 上侧边框颜色。 | 174| bottom | [ResourceColor](ts-types.md#resourcecolor) | 否 | 下侧边框颜色。 | 175 176## BorderRadiuses<sup>9+</sup>对象说明 177 178引用该对象时，至少传入一个参数。 179 180**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 181 182**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 183 184| 名称 | 参数类型 | 必填 | 描述 | 185| ----------- | ---------------------------- | ---- | -------- | 186| topLeft | [Length](ts-types.md#length) | 否 | 左上角圆角半径。 | 187| topRight | [Length](ts-types.md#length) | 否 | 右上角圆角半径。 | 188| bottomLeft | [Length](ts-types.md#length) | 否 | 左下角圆角半径。 | 189| bottomRight | [Length](ts-types.md#length) | 否 | 右下角圆角半径。 | 190 191## LocalizedBorderRadiuses<sup>12+</sup>对象说明 192 193圆角类型，用于描述组件边框圆角半径。 194 195引用该对象时，至少传入一个参数。 196 197**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 198 199**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 200 201| 名称 | 参数类型 | 必填 | 描述 | 202| ----------- | ---------------------------- | ---- | -------- | 203| topStart | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)<sup>12+</sup> | 否 | 左上角圆角半径。<br />从右至左显示语言模式下为右上角圆角半径。 | 204| topEnd | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)<sup>12+</sup> | 否 | 右上角圆角半径。<br />从右至左显示语言模式下为左上角圆角半径。 | 205| bottomStart | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)<sup>12+</sup> | 否 | 左下角圆角半径。<br />从右至左显示语言模式下为右下角圆角半径。 | 206| bottomEnd | [LengthMetrics](../js-apis-arkui-graphics.md#lengthmetrics12)<sup>12+</sup> | 否 | 右下角圆角半径。<br />从右至左显示语言模式下为左下角圆角半径。 | 207 208## EdgeStyles<sup>9+</sup>对象说明 209 210引入该对象时，至少传入一个参数。 211 212**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 213 214**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 215 216| 名称 | 参数类型 | 必填 | 描述 | 217| ------ | ---------------------------------------- | ---- | ------- | 218| left | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 左侧边框样式。 | 219| right | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 右侧边框样式。 | 220| top | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 上侧边框样式。 | 221| bottom | [BorderStyle](ts-appendix-enums.md#borderstyle) | 否 | 下侧边框样式。 | 222 223## 示例 224 225### 示例1（基本样式用法） 226 227设置边框的宽度、颜色、边框圆角半径以及点、线样式。 228 229```ts 230// xxx.ets 231@Entry 232@Component 233struct BorderExample { 234 build() { 235 Column() { 236 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 237 // 线段 238 Text('dashed') 239 .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10) 240 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 241 // 点线 242 Text('dotted') 243 .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted }) 244 .width(120).height(120).textAlign(TextAlign.Center).fontSize(16) 245 }.width('100%').height(150) 246 247 Text('.border') 248 .fontSize(50) 249 .width(300) 250 .height(300) 251 .border({ 252 width: { left: 3, right: 6, top: 10, bottom: 15 }, 253 color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green }, 254 radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 }, 255 style: { 256 left: BorderStyle.Dotted, 257 right: BorderStyle.Dotted, 258 top: BorderStyle.Solid, 259 bottom: BorderStyle.Dashed 260 } 261 }).textAlign(TextAlign.Center) 262 } 263 } 264} 265``` 266 267 268 269### 示例2（边框宽度类型和边框颜色） 270 271border属性的width、radius、color属性值使用LocalizedEdgeWidths类型和LocalizedEdgeColors类型。 272 273```ts 274// xxx.ets 275import { LengthMetrics } from '@kit.ArkUI'; 276@Entry 277@Component 278struct BorderExample { 279 build() { 280 Column() { 281 Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { 282 // 线段 283 Text('dashed') 284 .borderStyle(BorderStyle.Dashed) 285 .borderWidth(5) 286 .borderColor(0xAFEEEE) 287 .borderRadius(10) 288 .width(120) 289 .height(120) 290 .textAlign(TextAlign.Center) 291 .fontSize(16) 292 // 点线 293 Text('dotted') 294 .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted }) 295 .width(120) 296 .height(120) 297 .textAlign(TextAlign.Center) 298 .fontSize(16) 299 }.width('100%').height(150) 300 301 Text('.border') 302 .fontSize(50) 303 .width(300) 304 .height(300) 305 .border({ 306 width: { 307 start: LengthMetrics.vp(3), 308 end: LengthMetrics.vp(6), 309 top: LengthMetrics.vp(10), 310 bottom: LengthMetrics.vp(15) 311 }, 312 color: { start: '#e3bbbb', end: Color.Blue, top: Color.Red, bottom: Color.Green }, 313 radius: { 314 topStart: LengthMetrics.vp(10), 315 topEnd: LengthMetrics.vp(20), 316 bottomStart: LengthMetrics.vp(40), 317 bottomEnd: LengthMetrics.vp(80) 318 }, 319 style: { 320 left: BorderStyle.Dotted, 321 right: BorderStyle.Dotted, 322 top: BorderStyle.Solid, 323 bottom: BorderStyle.Dashed 324 } 325 }) 326 .textAlign(TextAlign.Center) 327 } 328 } 329} 330``` 331 332从左至右显示语言示例图 333 334 335 336从右至左显示语言示例图 337 338
