harmony 鸿蒙边框设置

  • 2025-06-12
  • 浏览 (7)

边框设置

设置组件边框样式。

说明：

从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

border

border(value: BorderOptions): T

设置边框样式。

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

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

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value BorderOptions 是 统一边框样式设置接口。
说明：
边框宽度默认值为0，即不显示边框。
从API version 9开始，父节点的border显示在子节点内容之上。

返回值：

类型 说明
T 返回当前组件。

borderStyle

borderStyle(value: BorderStyle|EdgeStyles): T

设置元素的边框线条样式。

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

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

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value BorderStyle | EdgeStyles9+ 是 设置元素的边框样式。
默认值：BorderStyle.Solid

返回值：

类型 说明
T 返回当前组件。

borderWidth

borderWidth(value: Length|EdgeWidths|LocalizedEdgeWidths): T

设置边框的宽度。

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

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

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value Length | EdgeWidths9+ | LocalizedEdgeWidths12+ 是 设置元素的边框宽度，不支持百分比。

返回值：

类型 说明
T 返回当前组件。

borderColor

borderColor(value: ResourceColor|EdgeColors|LocalizedEdgeColors): T

设置边框的颜色。

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

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

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value ResourceColor | EdgeColors9+ | LocalizedEdgeColors12+ 是 设置元素的边框颜色。
默认值：Color.Black

返回值：

类型 说明
T 返回当前组件。

borderRadius

borderRadius(value: Length|BorderRadiuses|LocalizedBorderRadiuses): T

设置边框的圆角。圆角大小受组件尺寸限制，最大值为组件宽或高的一半。

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

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

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名 类型 必填 说明
value Length | BorderRadiuses9+ | LocalizedBorderRadiuses12+ 是 设置元素的边框圆角半径，支持百分比，百分比依据组件宽度。设置圆角后，可搭配.clip属性进行裁剪，避免子组件超出组件自身。

返回值：

类型 说明
T 返回当前组件。

BorderOptions对象说明

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

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

名称 参数类型 必填 描述
width Length | EdgeWidths9+ | LocalizedEdgeWidths12+ 否 设置边框宽度。
color ResourceColor | EdgeColors9+ | LocalizedEdgeColors12+ 否 设置边框颜色。
radius Length | BorderRadiuses9+ | LocalizedBorderRadiuses12+ 否 设置边框圆角半径。
style BorderStyle | EdgeStyles9+ 否 设置边框样式。
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 LengthMetrics12+ 否 左上角圆角半径。
从右至左显示语言模式下为右上角圆角半径。
topEnd LengthMetrics12+ 否 右上角圆角半径。
从右至左显示语言模式下为左上角圆角半径。
bottomStart LengthMetrics12+ 否 左下角圆角半径。
从右至左显示语言模式下为右下角圆角半径。
bottomEnd LengthMetrics12+ 否 右下角圆角半径。
从右至左显示语言模式下为左下角圆角半径。

EdgeStyles9+对象说明

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

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

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

名称 参数类型 必填 描述
left BorderStyle 否 左侧边框样式。
right BorderStyle 否 右侧边框样式。
top BorderStyle 否 上侧边框样式。
bottom BorderStyle 否 下侧边框样式。

示例

示例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)
    }
  }
}

zh-cn_image_0000001219982705

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

border属性的width、radius、color属性值使用LocalizedEdgeWidths类型和LocalizedEdgeColors类型。

// xxx.ets
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)
    }
  }
}

从左至右显示语言示例图

zh-cm_image_border_ltr

从右至左显示语言示例图

zh-cm_image_border_rtl

你可能感兴趣的鸿蒙文章

harmony 鸿蒙图像AI分析错误码

harmony 鸿蒙ArcButton

harmony 鸿蒙ArcSlider

harmony 鸿蒙Chip

harmony 鸿蒙ChipGroup

harmony 鸿蒙ComposeListItem

harmony 鸿蒙ComposeTitleBar

harmony 鸿蒙advanced.Counter

harmony 鸿蒙弹出框 (Dialog)

harmony 鸿蒙DialogV2

0  赞
  • 所属分类： 后端技术
  • 本文标签：
  • 版权声明： 原创文章如转载，请注明本文链接: https://www.seaxiang.com/blog/655pOn
热门推荐
标签云
Linux Java Spring Spring Boot docker 大数据 前端 生活 maven golang 软件 spring cloud fintech mac vscode 其他 区块链 以太坊 V神 开发者 技术 股票 git greenplum 分布式事务 chrome mysql flink kafka 设计模式 原理 鸿蒙 seo
最新文章
本文目录