鸿蒙HarmonyOS NEXT实战开辟：边框设置

干翻全岛蛙蛙 发表于 2024-10-21 16:19:56

HarmonyOS NEXT实战开辟：边框设置

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

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

borderStyle(value: BorderStyle | EdgeStyles)
设置元素的边框线条样式。
卡片本领：从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API：从API version 11开始，该接口支持在元服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明valueBorderStyle | EdgeStyles9+是设置元素的边框样式。
默认值：BorderStyle.Solid
borderWidth

borderWidth(value: Length | EdgeWidths | LocalizedEdgeWidths)
设置边框的宽度。
卡片本领：从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API：从API version 11开始，该接口支持在元服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明valueLength | EdgeWidths9+ | LocalizedEdgeWidths12+是设置元素的边框宽度，不支持百分比。 borderColor

borderColor(value: ResourceColor | EdgeColors | LocalizedEdgeColors)
设置边框的颜色。
卡片本领：从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API：从API version 11开始，该接口支持在元服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明valueResourceColor | EdgeColors9+ | LocalizedEdgeColors12+是设置元素的边框颜色。
默认值：Color.Black
borderRadius

borderRadius(value: Length | BorderRadiuses | LocalizedBorderRadiuses)
设置边框的圆角。圆角大小受组件尺寸限制，最大值为组件宽或高的一半。
卡片本领：从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API：从API version 11开始，该接口支持在元服务中使用。
系统本领： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填阐明valueLength | BorderRadiuses9+ | LocalizedBorderRadiuses12+是设置元素的边框圆角半径，支持百分比，百分比依据组件宽度。 BorderOptions对象阐明

卡片本领：从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API：从API version 11开始，该接口支持在元服务中使用。
名称参数范例必填形貌widthLength | EdgeWidths9+ | LocalizedEdgeWidths12+否设置边框宽度。colorResourceColor | EdgeColors9+ | LocalizedEdgeColors12+否设置边框颜色。radiusLength | BorderRadiuses9+ | LocalizedBorderRadiuses12+否设置边框圆角半径。styleBorderStyle | EdgeStyles9+否设置边框样式。dashGap12+LengthMetrics | EdgeWidths | LocalizedEdgeWidths否设置虚线的线段间距，仅在边框样式为虚线时生效。
不支持设置百分比。
dashWidth12+LengthMetrics | EdgeWidths | LocalizedEdgeWidths否设置虚线的线段长度，仅在边框样式为虚线时生效。
不支持设置百分比。
EdgeWidths9+对象阐明

引入该对象时，至少传入一个参数。
卡片本领：从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API：从API version 11开始，该接口支持在元服务中使用。
名称参数范例必填形貌leftLength否左侧边框宽度。rightLength否右侧边框宽度。topLength否上侧边框宽度。bottomLength否下侧边框宽度。 LocalizedEdgeWidths12+对象阐明

边框宽度范例，用于形貌组件边框不同方向的宽度。
引入该对象时，至少传入一个参数。
卡片本领：从API version 12开始，该接口支持在ArkTS卡片中使用。
名称参数范例必填形貌startLengthMetrics否左侧边框宽度。
从右至左显示语言模式下为右侧边框宽度。
endLengthMetrics否右侧边框宽度。
从右至左显示语言模式下为左侧边框宽度。
topLengthMetrics否上侧边框宽度。bottomLengthMetrics否下侧边框宽度。 EdgeColors9+对象阐明

引入该对象时，至少传入一个参数。
元服务API：从API version 11开始，该接口支持在元服务中使用。
卡片本领：从API version 9开始，该接口支持在ArkTS卡片中使用。
名称参数范例必填形貌leftResourceColor否左侧边框颜色。rightResourceColor否右侧边框颜色。topResourceColor否上侧边框颜色。bottomResourceColor否下侧边框颜色。 LocalizedEdgeColors12+对象阐明

边框颜色，用于形貌组件边框四条边的颜色。
引入该对象时，至少传入一个参数。
卡片本领：从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API：从API version 12开始，该接口支持在元服务中使用。
名称参数范例必填形貌startResourceColor否左侧边框颜色。
从右至左显示语言模式下为右侧边框颜色。
endResourceColor否右侧边框颜色。
从右至左显示语言模式下为左侧边框颜色。
topResourceColor否上侧边框颜色。bottomResourceColor否下侧边框颜色。 BorderRadiuses9+对象阐明

引用该对象时，至少传入一个参数。
卡片本领：从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API：从API version 11开始，该接口支持在元服务中使用。
名称参数范例必填形貌topLeftLength否左上角圆角半径。topRightLength否右上角圆角半径。bottomLeftLength否左下角圆角半径。bottomRightLength否右下角圆角半径。 LocalizedBorderRadiuses12+对象阐明

圆角范例，用于形貌组件边框圆角半径。
引用该对象时，至少传入一个参数。
卡片本领：从API version 12开始，该接口支持在ArkTS卡片中使用。
元服务API：从API version 12开始，该接口支持在元服务中使用。
名称参数范例必填形貌topStartLengthMetrics否左上角圆角半径。
从右至左显示语言模式下为右上角圆角半径。
topEndLengthMetrics否右上角圆角半径。
从右至左显示语言模式下为左上角圆角半径。
bottomStartLengthMetrics否左下角圆角半径。
从右至左显示语言模式下为右下角圆角半径。
bottomEndLengthMetrics否右下角圆角半径。
从右至左显示语言模式下为左下角圆角半径。
EdgeStyles9+对象阐明

引入该对象时，至少传入一个参数。
卡片本领：从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API：从API version 11开始，该接口支持在元服务中使用。
名称参数范例必填形貌leftBorderStyle否左侧边框样式。rightBorderStyle否右侧边框样式。topBorderStyle否上侧边框样式。bottomBorderStyle否下侧边框样式。示例

示例1

// xxx.ets
@Entry
@Component
struct BorderExample {
build() {
Column() {
   Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
   // 线段
   Text('dashed')
      .borderStyle(BorderStyle.Dashed).borderWidth(5).borderColor(0xAFEEEE).borderRadius(10)
      .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
   // 点线
   Text('dotted')
      .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })
      .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
   }.width('100%').height(150)

   Text('.border')
   .fontSize(50)
   .width(300)
   .height(300)
   .border({
      width: { left: 3, right: 6, top: 10, bottom: 15 },
      color: { left: '#e3bbbb', right: Color.Blue, top: Color.Red, bottom: Color.Green },
      radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
      style: {
         left: BorderStyle.Dotted,
         right: BorderStyle.Dotted,
         top: BorderStyle.Solid,
         bottom: BorderStyle.Dashed
      }
   }).textAlign(TextAlign.Center)
}
}
}
https://i-blog.csdnimg.cn/blog_migrate/a14394be99ea73d571fe4e22e0319826.gif
示例2

// xxx.ets
// border属性的width、radius、color属性值使用LocalizedEdgeWidths类型和LocalizedEdgeColors类型

import { LengthMetrics } from '@kit.ArkUI';
@Entry
@Component
struct BorderExample {
build() {
Column() {
   Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
   // 线段
   Text('dashed')
      .borderStyle(BorderStyle.Dashed)
      .borderWidth(5)
      .borderColor(0xAFEEEE)
      .borderRadius(10)
      .width(120)
      .height(120)
      .textAlign(TextAlign.Center)
      .fontSize(16)
   // 点线
   Text('dotted')
      .border({ width: 5, color: 0x317AF7, radius: 10, style: BorderStyle.Dotted })
      .width(120)
      .height(120)
      .textAlign(TextAlign.Center)
      .fontSize(16)
   }.width('100%').height(150)

   Text('.border')
   .fontSize(50)
   .width(300)
   .height(300)
   .border({
      width: {
         start: LengthMetrics.vp(3),
         end: LengthMetrics.vp(6),
         top: LengthMetrics.vp(10),
         bottom: LengthMetrics.vp(15)
      },
      color: { start: '#e3bbbb', end: Color.Blue, top: Color.Red, bottom: Color.Green },
      radius: {
         topStart: LengthMetrics.vp(10),
         topEnd: LengthMetrics.vp(20),
         bottomStart: LengthMetrics.vp(40),
         bottomEnd: LengthMetrics.vp(80)
      },
      style: {
         left: BorderStyle.Dotted,
         right: BorderStyle.Dotted,
         top: BorderStyle.Solid,
         bottom: BorderStyle.Dashed
      }
   })
   .textAlign(TextAlign.Center)
}
}
} 从左至右显示语言示例图

https://i-blog.csdnimg.cn/blog_migrate/2850c3b3fa982c93afd0878aa743ebcb.png
从右至左显示语言示例图

https://i-blog.csdnimg.cn/blog_migrate/d718aaa6fe86895cabdbb44004754317.png
最后

有许多小同伴不知道学习哪些鸿蒙开辟技能？不知道需要重点掌握哪些鸿蒙应用开辟知识点？而且学习时频仍踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开辟必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开辟组件、Stage模型、多端摆设、分布式应用开辟、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、OpenHarmony南向开辟、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技能知识点。
渴望这一份鸿蒙学习资料能够给各人带来帮助，有需要的小同伴自行领取，限时开源，先到先得~无套路领取！！
获取这份完备版高清学习门路，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料
鸿蒙（HarmonyOS NEXT）最新学习门路

https://i-blog.csdnimg.cn/blog_migrate/82967ac31e4c439001dec2528f765664.png

[*] HarmonOS基础技能
https://i-blog.csdnimg.cn/blog_migrate/d15791a8d9157b12cf470e6e20e199cd.png

[*]HarmonOS就业必备技能 https://i-blog.csdnimg.cn/blog_migrate/219a3f80b24947602f5ce80869c0f0d1.png
[*] HarmonOS多媒体技能
https://i-blog.csdnimg.cn/blog_migrate/f76470c4171a878d5f6071f6d009b828.png

[*]鸿蒙NaPi组件进阶
https://i-blog.csdnimg.cn/blog_migrate/8755cfeac3a887ec19fb168f7164234c.png

[*]HarmonOS高级技能
https://i-blog.csdnimg.cn/blog_migrate/1e210328c1ebf43f08d3b6c5f5c13b48.png

[*]初识HarmonOS内核 https://i-blog.csdnimg.cn/blog_migrate/24384aae472f78c055f7bf545467db7f.png
[*]实战就业级装备开辟
https://i-blog.csdnimg.cn/blog_migrate/9b0c4eb9a30ca059d28eceb4727b593e.png
有了门路图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开辟入门教学视频，内容包含：ArkTS、ArkUI、Web开辟、应用模型、资源分类…等知识点。
获取以上完备版高清学习门路，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料
《鸿蒙 (OpenHarmony)开辟入门教学视频》

https://i-blog.csdnimg.cn/blog_migrate/9b893c2a4956d6ce72b63212f9216eab.png
《鸿蒙生态应用开辟V2.0白皮书》

https://i-blog.csdnimg.cn/blog_migrate/343917b8910aff13b48316fe3db39da6.jpeg
《鸿蒙 (OpenHarmony)开辟基础到实战手册》

OpenHarmony北向、南向开辟环境搭建
https://i-blog.csdnimg.cn/blog_migrate/2e05bbd2cb0f05ec297905ba57f803c2.png
《鸿蒙开辟基础》

[*]ArkTS语言
[*]安装DevEco Studio
[*]运用你的第一个ArkTS应用
[*]ArkUI声明式UI开辟
[*].……
https://i-blog.csdnimg.cn/blog_migrate/48e16dbee395ba8de1264149330856d4.png
《鸿蒙开辟进阶》

[*]Stage模型入门
[*]网络管理
[*]数据管理
[*]电话服务
[*]分布式应用开辟
[*]通知与窗口管理
[*]多媒体技能
[*]安全技能
[*]使命管理
[*]WebGL
[*]国际化开辟
[*]应用测试
[*]DFX面向将来设计
[*]鸿蒙系统移植和裁剪定制
[*]……
https://i-blog.csdnimg.cn/blog_migrate/adf72eca696abc1415cd768fceda1af7.png
《鸿蒙进阶实战》

[*]ArkTS实践
[*]UIAbility应用
[*]网络案例
[*]……
https://i-blog.csdnimg.cn/blog_migrate/c077a46bb540fc657713d99f39e9c74c.png
获取以上完备鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料
总结

总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑衅，也是一个时机。只有积极应对变化，不断学习和提拔自己，他们才能在这个厘革的期间中立于不败之地。

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

页: [1]

ToB企服应用市场:ToB评测及商务社交产业平台's Archiver

HarmonyOS NEXT实战开辟：边框设置