鸿蒙5.0版开发：ArkTS组件通用属性（边框设置）

于 2024-08-27 16:16:01 发布
阅读量1k 收藏 20
点赞数 28
分类专栏： 鸿蒙5.0开发 ArkTS组件 文章标签： harmonyos 华为 鸿蒙 鸿蒙系统 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73088370/article/details/141605785
版权

边框设置

设置组件边框样式。

说明：

从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+否设置边框样式。

EdgeWidths9+对象说明

引入该对象时，至少传入一个参数。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称参数类型必填描述
leftLength否左侧边框宽度。
rightLength否右侧边框宽度。
topLength否上侧边框宽度。
bottomLength否下侧边框宽度。

LocalizedEdgeWidths12+对象说明

边框宽度类型，用于描述组件边框不同方向的宽度。 引入该对象时，至少传入一个参数。

卡片能力： 从API version 12开始，该接口支持在ArkTS卡片中使用。

名称参数类型必填描述
startLengthMetrics否左侧边框宽度。
从右至左显示语言模式下为右侧边框宽度。
endLengthMetrics否右侧边框宽度。
从右至左显示语言模式下为左侧边框宽度。
topLengthMetrics否上侧边框宽度。
bottomLengthMetrics否下侧边框宽度。

EdgeColors9+对象说明

引入该对象时，至少传入一个参数。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。

名称参数类型必填描述
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开始，该接口支持在原子化服务中使用。

名称参数类型必填描述
topStartLengthMetrics12+否左上角圆角半径。
从右至左显示语言模式下为右上角圆角半径。
topEndLengthMetrics12+否右上角圆角半径。
从右至左显示语言模式下为左上角圆角半径。
bottomStartLengthMetrics12+否左下角圆角半径。
从右至左显示语言模式下为右下角圆角半径。
bottomEndLengthMetrics12+否右下角圆角半径。
从右至左显示语言模式下为左下角圆角半径。

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)
    }
  }
}
ts

示例2

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

import { LengthMetrics } from '@ohos.arkui.node';
@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)
    }
  }
}
ts

从左至右显示语言示例图

从右至左显示语言示例图

看完三件事❤️

  • 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
  • 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
  • 关注作者龚众皓： 『 蜀道衫 』，不定期分享原创知识。
  • 关注后回复【666】扫码即可获取学习文档。
  • 同时可以期待后续文章ing🚀。

炫酷盖茨猫先生
关注
专栏目录
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：边框设置）
m0_64420071的博客
03-01 3622
ArkTS声明式开发（通用属性：边框设置）
鸿蒙开发之组件border属性
Lu_Ca的博客
01-09 1497
【代码】鸿蒙开发之组件border属性。
HarmonyOS NEXT实战开发：边框设置
hanyanyou的博客
07-21 1136
设置组件边框样式。
鸿蒙中边框属性是怎么样设置
m0_61426556的博客
07-09 572
首先设置圆角的属性是 borderRadius 但是里面有一些参数也可以写数值。其他的三种我不说大家都知道 我们重点说一下最后一种。今天为大家带来边框圆角是怎么样设置的。Text('我是椭圆')Text('我是圆形')附上整个代码 各位关注老爷自行下载。
鸿蒙HarmonyOS Arkts如何单独设置边框
yuanlaile的博客
03-12 1389
鸿蒙HarmonyOS Arkts如何单独设置边框？
鸿蒙的边框组件
m0_70153537的博客
07-25 306
边框（border）组件； 一，如调整边框的宽度 二，如何调整颜色 试图 三，在边框里居中的方式 四，边框样式 五，多选框 六，边框简写
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：外描边设置）
m0_64420071的博客
03-05 1182
ArkTS声明式开发（通用属性：外描边设置）
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：TextArea）
m0_64420071的博客
03-13 2069
ArkTS声明式开发（基础手势：TextArea）
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：TextInput）
m0_64420071的博客
03-13 2261
ArkTS声明式开发（基础手势：TextInput）
鸿蒙Harmony应用开发—ArkTS声明式开发（绘制组件：Path）
m0_64420071的博客
03-18 1116
ArkTS声明式开发（绘制组件：Path）
华为 ArkTS 边框怎么设置，单边边框怎么设置以及条件设置边框（鸿蒙开发）
都已经是第二年的立春、又何必执着于、当年的盛​夏呢？
12-05 2257
边框设置-通用属性-组件通用信息-组件-组件参考（基于ArkTS的声明式开发范式）-手机、平板、智慧屏和智能穿戴开发-ArkTS API参考-HarmonyOS应用开发。所以不能每个容器都加上四边的边框, 只能分比给每个加左边框，上边框， 然后第二列加右边框， 最后一行加下边框。需要给推荐商品列表添加边框， arkTS的边框跟前端一样，如果出现重叠也会加粗,如下图。border()接收一个对象参数，参数为width, color等，如代码实例。可以明显看到中间重叠的边框比较粗，
ArkTS中如何设置组件单边边框?(华为鸿蒙开发)如何只设置一个边框
m0_59069134的博客
04-20 2187
由此可见,我们只需要在border中,对width等属性书写具体的位置.如果我们需要其它边框,可以继续补充left,right,top,如果不写,则默认四边框全部存在.border({})
鸿蒙边框组件
2301_80107415的博客
07-25 233
今天内容比较简单，就了解了一下边框与对齐方式，以及跟之前学习css做了一个对比，ArkTs对于之前有基础的小伙伴来说还是比较友好的，今天的内容就到这里，下次我们再见。以上是我们学习HTML，css学习的边框。那我们接下来看看ArkTS是如何使用的。border（边框）我们回想一下学习HTML的时候边框是如何设置的。ArkTS的对齐方式也跟移动端学习的对齐方式也大差不差。我们对比一下是不是没有太大的区别，只有写法上的改变。今天我们学习ArkTS边框的使用。我们看一下ArkTs的写法。
鸿蒙星河版笔记来袭！布局元素、边框、圆角等附案例
黑马程序员官方博客
05-29 982
属性：.justifyContent(枚举FlexAlign) (Row 组件的 justifyContent 属性效果相似)属性：.backgroundImage(背景图地址, 背景图平铺方式-枚举ImageRepeat)宽高默认单位 → vp：虚拟像素，相对于不同的设备会自动转换，保证不同设备视觉一致 （推荐）作用：调整背景图在组件内的显示位置，默认显示位置为组件左上角。作用：在组件内添加间距，拉开内容与组件之间的距离。作用：在组件外添加间距，拉开两个组件之间的距离。
鸿蒙ArkTS声明式开发：跨平台支持列表【边框设置】 通用属性
m0_62167422的博客
05-30 1214
设置组件边框样式。点击或者复制转到。从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。从API Version 9开始，父节点的border显示在子节点内容之上。
已饱和，未来程序员真没法再干了？_程序员干不了活(1)，HarmonyOS鸿蒙 基础面试
2401_84181501的博客
04-15 503
是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
HarmonyOS组件
最新发布
Xikxmj02_17的博客
07-25 241
2、边框颜色：BorderColor。3、边框宽度：BorderWidth。4、边框样式：BorderStyle。多选框：checkbox。1、边框：border。
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：尺寸设置）
m0_64420071的博客
03-01 4553
ArkTS声明式开发（通用属性：尺寸设置）
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值