鸿蒙API14开发【边框设置】ArkUI

设置组件边框样式。
   说明：
  从API Version 7开始支持。后续版本如有新增内容，则采取上角标单独标志该内容的起始版本。
  border

border(value: BorderOptions)
设置边框样式。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填说明value[BorderOptions]是同一边框样式设置接口。 说明： 边框宽度默认值为0，即不显示边框。 从API Version 9开始，父节点的border显示在子节点内容之上。 borderStyle

borderStyle(value: BorderStyle | EdgeStyles)
设置元素的边框线条样式。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填说明value[BorderStyle][EdgeStyles]9+是 borderWidth

borderWidth(value: Length | EdgeWidths | LocalizedEdgeWidths)
设置边框的宽度。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填说明value[Length][EdgeWidths]9+[LocalizedEdgeWidths]12+ borderColor

borderColor(value: ResourceColor | EdgeColors | LocalizedEdgeColors)
设置边框的颜色。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填说明value[ResourceColor][EdgeColors]9+[LocalizedEdgeColors]12+ borderRadius

borderRadius(value: Length | BorderRadiuses | LocalizedBorderRadiuses)
设置边框的圆角。圆角大小受组件尺寸限定，最大值为组件宽或高的一半。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填说明value[Length][BorderRadiuses]9+[LocalizedBorderRadiuses]12+ BorderOptions对象说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
名称参数范例必填描述width[Length][EdgeWidths]9+[LocalizedEdgeWidths]12+color[ResourceColor][EdgeColors]9+[LocalizedEdgeColors]12+radius[Length][BorderRadiuses]9+[LocalizedBorderRadiuses]12+style[BorderStyle][EdgeStyles]9+否dashGap12+[LengthMetrics][EdgeWidths][LocalizedEdgeWidths]dashWidth12+[LengthMetrics][EdgeWidths][LocalizedEdgeWidths] EdgeWidths9+对象说明

引入该对象时，至少传入一个参数。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
名称参数范例必填描述left[Length]否左侧边框宽度。right[Length]否右侧边框宽度。top[Length]否上侧边框宽度。bottom[Length]否下侧边框宽度。 LocalizedEdgeWidths12+对象说明

边框宽度范例，用于描述组件边框不同方向的宽度。 引入该对象时，至少传入一个参数。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中利用。
名称参数范例必填描述start[LengthMetrics]否左侧边框宽度。 从右至左显示语言模式下为右侧边框宽度。end[LengthMetrics]否右侧边框宽度。 从右至左显示语言模式下为左侧边框宽度。top[LengthMetrics]否上侧边框宽度。bottom[LengthMetrics]否下侧边框宽度。 EdgeColors9+对象说明

引入该对象时，至少传入一个参数。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
名称参数范例必填描述left[ResourceColor]否左侧边框颜色。right[ResourceColor]否右侧边框颜色。top[ResourceColor]否上侧边框颜色。bottom[ResourceColor]否下侧边框颜色。 LocalizedEdgeColors12+对象说明

边框颜色，用于描述组件边框四条边的颜色。
引入该对象时，至少传入一个参数。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中利用。
名称参数范例必填描述start[ResourceColor]否左侧边框颜色。 从右至左显示语言模式下为右侧边框颜色。end[ResourceColor]否右侧边框颜色。 从右至左显示语言模式下为左侧边框颜色。top[ResourceColor]否上侧边框颜色。bottom[ResourceColor]否下侧边框颜色。 BorderRadiuses9+对象说明

引用该对象时，至少传入一个参数。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
名称参数范例必填描述topLeft[Length]否左上角圆角半径。topRight[Length]否右上角圆角半径。bottomLeft[Length]否左下角圆角半径。bottomRight[Length]否右下角圆角半径。 LocalizedBorderRadiuses12+对象说明

圆角范例，用于描述组件边框圆角半径。
引用该对象时，至少传入一个参数。
卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中利用。
名称参数范例必填描述topStart[LengthMetrics]12+否左上角圆角半径。 从右至左显示语言模式下为右上角圆角半径。topEnd[LengthMetrics]12+否右上角圆角半径。 从右至左显示语言模式下为左上角圆角半径。bottomStart[LengthMetrics]12+否左下角圆角半径。 从右至左显示语言模式下为右下角圆角半径。bottomEnd[LengthMetrics]12+否右下角圆角半径。 从右至左显示语言模式下为左下角圆角半径。 EdgeStyles9+对象说明

引入该对象时，至少传入一个参数。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中利用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中利用。
名称参数范例必填描述left[BorderStyle]否左侧边框样式。right[BorderStyle]否右侧边框样式。top[BorderStyle]否上侧边框样式。bottom[BorderStyle]否下侧边框样式。 示例

示例1（基本样式用法）

设置边框的宽度、颜色、边框圆角半径以及点、线样式。

1. // xxx.ets
2. @Entry
3. @Component
4. struct BorderExample {
5.   build() {
6.     Column() {
7.       Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
8.         // 线段
9.         Text('dashed')
10.           .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10)
11.           .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
12.         // 点线
13.         Text('dotted')
14.           .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })
15.           .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
16.       }.width('100%').height(150)
18.       Text('.border')
19.         .fontSize(50)
20.         .width(300)
21.         .height(300)
22.         .border({
23.           width: { left: 3, right: 6, top: 10, bottom: 15 },
24.           color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
25.           radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
26.           style: {
27.             left: BorderStyle.Dotted,
28.             right: BorderStyle.Dotted,
29.             top: BorderStyle.Solid,
30.             bottom: BorderStyle.Dashed
31.           }
32.         }).textAlign(TextAlign.Center)
33.     }
34.   }
35. }
36. ts

复制代码

示例2（边框宽度范例和边框颜色）

border属性的width、radius、color属性值利用LocalizedEdgeWidths范例和LocalizedEdgeColors范例。

1. // xxx.ets
2. import { LengthMetrics } from '@kit.ArkUI';
3. @Entry
4. @Component
5. struct BorderExample {
6.   build() {
7.     Column() {
8.       Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
9.         // 线段
10.         Text('dashed')
11.           .borderStyle(BorderStyle.Dashed)
12.           .borderWidth(5)
13.           .borderColor(0xAFEEEE)
14.           .borderRadius(10)
15.           .width(120)
16.           .height(120)
17.           .textAlign(TextAlign.Center)
18.           .fontSize(16)
19.         // 点线
20.         Text('dotted')
21.           .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })
22.           .width(120)
23.           .height(120)
24.           .textAlign(TextAlign.Center)
25.           .fontSize(16)
26.       }.width('100%').height(150)
28.       Text('.border')
29.         .fontSize(50)
30.         .width(300)
31.         .height(300)
32.         .border({
33.           width: {
34.             start: LengthMetrics.vp(3),
35.             end: LengthMetrics.vp(6),
36.             top: LengthMetrics.vp(10),
37.             bottom: LengthMetrics.vp(15)
38.           },
39.           color: { start: '#e3bbbb', end: Color.Blue, top: Color.Red, bottom: Color.Green },
40.           radius: {
41.             topStart: LengthMetrics.vp(10),
42.             topEnd: LengthMetrics.vp(20),
43.             bottomStart: LengthMetrics.vp(40),
44.             bottomEnd: LengthMetrics.vp(80)
45.           },
46.           style: {
47.             left: BorderStyle.Dotted,
48.             right: BorderStyle.Dotted,
49.             top: BorderStyle.Solid,
50.             bottom: BorderStyle.Dashed
51.           }
52.         })
53.         .textAlign(TextAlign.Center)
54.     }
55.   }
56. }
57. ts

复制代码

从左至右显示语言示例图

从右至左显示语言示例图

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。