【鸿蒙next开发】ArkUI框架：ArkTS组件-外描边设置

最新推荐文章于 2025-05-16 10:44:35 发布
最新推荐文章于 2025-05-16 10:44:35 发布
阅读量577 收藏 12
点赞数 17
分类专栏： ArkTS组件 ArkUI框架 鸿蒙5.0开发 文章标签： harmonyos 华为 android ArkTS ArkUI 前端 鸿蒙系统
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73088370/article/details/147981525
版权

 往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）

外描边设置

设置组件外描边（outline）样式。外描边绘制在组件的外侧，不影响布局，不会占用组件本身大小。

说明

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

outline

outline(value: OutlineOptions)

统一外描边样式设置接口。

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

元服务API： 从API version 12开始，该接口支持在元服务中使用。

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

参数：

参数名类型必填说明
valueOutlineOptions是外描边样式。

OutlineStyle11+枚举说明

外描边样式。

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

元服务API： 从API version 12开始，该接口支持在元服务中使用。

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

名称说明
SOLID显示为一条实线。
DASHED显示为一系列短的方形虚线。
DOTTED显示为一系列圆点，圆点半径为outlineWidth的一半。

outlineStyle

outlineStyle(value: OutlineStyle | EdgeOutlineStyles)

设置元素的外描边样式。

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

元服务API： 从API version 12开始，该接口支持在元服务中使用。

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

参数：

参数名类型必填说明
valueOutlineStyle | EdgeOutlineStyles是

设置元素的外描边样式。

默认值：OutlineStyle.SOLID

outlineWidth

outlineWidth(value: Dimension | EdgeOutlineWidths)

设置元素的外描边宽度。

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

元服务API： 从API version 12开始，该接口支持在元服务中使用。

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

参数：

参数名类型必填说明
valueDimension | EdgeOutlineWidths是

设置元素的外描边宽度，不支持百分比。

默认值：0，外描边效果width为必设项。

outlineColor

outlineColor(value: ResourceColor | EdgeColors)

设置元素的外描边颜色。

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

元服务API： 从API version 12开始，该接口支持在元服务中使用。

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

参数：

参数名类型必填说明
valueResourceColor | EdgeColors是

设置元素的外描边颜色。

默认值：Color.Black。

outlineRadius

outlineRadius(value: Dimension | OutlineRadiuses)

设置元素的外描边圆角半径。

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

元服务API： 从API version 12开始，该接口支持在元服务中使用。

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

参数：

参数名类型必填说明
valueDimension | OutlineRadiuses是

设置元素的外描边圆角半径，不支持百分比。

默认值：0。

最大生效值：组件width/2 + outlineWidth或组件height/2 + outlineWidth。

OutlineOptions对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

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

名称类型必填说明
widthDimension | EdgeOutlineWidths否

设置外描边宽度，不支持百分比。

默认值：0，外描边效果width为必设项，否则不显示外描边。

colorResourceColor | EdgeColors | LocalizedEdgeColors12+否

设置外描边颜色。

默认值：Color.Black。

radiusDimension | OutlineRadiuses否

设置外描边圆角半径，不支持百分比。

默认值：0。

最大生效值：组件width/2 + outlineWidth或组件height/2 + outlineWidth。

styleOutlineStyle | EdgeOutlineStyles否

设置外描边样式。

默认值：OutlineStyle.SOLID。

EdgeOutlineWidths对象说明

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

元服务API： 从API version 12开始，该接口支持在元服务中使用。

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

名称参数类型必填描述
leftDimension否左侧外描边宽度。
rightDimension否右侧外描边宽度。
topDimension否上侧外描边宽度。
bottomDimension否下侧外描边宽度。

EdgeColors对象说明

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

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

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

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

名称参数类型必填描述
leftResourceColor否左侧外描边颜色。
rightResourceColor否右侧外描边颜色。
topResourceColor否上侧外描边颜色。
bottomResourceColor否下侧外描边颜色。

LocalizedEdgeColors对象说明12+

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

元服务API： 从API version 12开始，该接口支持在元服务中使用。

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

名称参数类型必填描述
startResourceColor否

左侧外描边颜色。

从左至右显示语言模式下为右侧外描边颜色。

endResourceColor否

右侧外描边颜色。

从左至右显示语言模式下为左侧外描边颜色。

topResourceColor否上侧外描边颜色。
bottomResourceColor否下侧外描边颜色。

OutlineRadiuses对象说明

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

元服务API： 从API version 12开始，该接口支持在元服务中使用。

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

名称参数类型必填描述
topLeftDimension否左上角圆角半径。
topRightDimension否右上角圆角半径。
bottomLeftDimension否左下角圆角半径。
bottomRightDimension否右下角圆角半径。

EdgeOutlineStyles对象说明

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

元服务API： 从API version 12开始，该接口支持在元服务中使用。

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

名称参数类型必填描述
leftOutlineStyle否左侧外描边样式。
rightOutlineStyle否右侧外描边样式。
topOutlineStyle否上侧外描边样式。
bottomOutlineStyle否下侧外描边样式。

示例

示例1（使用外描边属性）

该示例主要演示如何通过outline来实现组件外描边。

// xxx.ets
@Entry
@Component
struct OutlineExample {
  build() {
    Column() {
      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
        // 线段
        Text('DASHED')
          .backgroundColor(Color.Pink)
          .outlineStyle(OutlineStyle.DASHED).outlineWidth(5).outlineColor(0xAFEEEE).outlineRadius(10)
          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
        // 点线
        Text('DOTTED')
          .backgroundColor(Color.Pink)
          .outline({ width: 5, color: 0x317AF7, radius: 10, style: OutlineStyle.DOTTED })
          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
      }.width('100%').height(150)

      Text('.outline')
        .backgroundColor(Color.Pink)
        .fontSize(50)
        .width(300)
        .height(300)
        .outline({
          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: OutlineStyle.DOTTED,
            right: OutlineStyle.DOTTED,
            top: OutlineStyle.SOLID,
            bottom: OutlineStyle.DASHED
          }
        }).textAlign(TextAlign.Center)
    }
  }
}

示例2（使用LocalizedEdgeColors类型）

该示例将outline属性中的color属性值设置为LocalizedEdgeColors类型。

// xxx.ets

@Entry
@Component
struct OutlineExample {
  build() {
    Column() {
      Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
        // 线段
        Text('DASHED')
          .backgroundColor(Color.Pink)
          .outlineStyle(OutlineStyle.DASHED).outlineWidth(5).outlineColor(0xAFEEEE).outlineRadius(10)
          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
        // 点线
        Text('DOTTED')
          .backgroundColor(Color.Pink)
          .outline({ width: 5, color: 0x317AF7, radius: 10, style: OutlineStyle.DOTTED })
          .width(120).height(120).textAlign(TextAlign.Center).fontSize(16)
      }.width('100%').height(150)

      Text('.outline')
        .backgroundColor(Color.Pink)
        .fontSize(50)
        .width(300)
        .height(300)
        .outline({
          width: { left: 3, right: 6, top: 10, bottom: 15 },
          color: { start: '#e3bbbb', end: Color.Blue, top: Color.Red, bottom: Color.Green },
          radius: { topLeft: 10, topRight: 20, bottomLeft: 40, bottomRight: 80 },
          style: {
            left: OutlineStyle.DOTTED,
            right: OutlineStyle.DOTTED,
            top: OutlineStyle.SOLID,
            bottom: OutlineStyle.DASHED
          }
        }).textAlign(TextAlign.Center)
    }
  }
}

从左至右显示语言示例图

从右至左显示语言示例图

鸿蒙5.0版开发：ArkTS组件通用属性-外描边设置
m0_69424697的博客
10-27 761
设置组件外描边样式。
鸿蒙harmonyOS方舟框架ARK etsUI 占位和留白的小技巧
IT程序员的编程黑洞（鸽子王）抖音同名
06-03 970
这里有一个空白 2.找一个控件 不显示资源 只设置宽高即可 这里用Text 设置高 代码如下（示例）： 总结 就是这样
鸿蒙HarmonyOS NEXT开发：外描边设置（ArkTS通用属性）
shudaoshanBBQ的博客
08-11 1279
设置组件外描边样式。
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（外描边设置）
Androidbye的博客
12-26 1088
设置组件外描边（outline）样式。
【鸿蒙next开发】ArkUI框架：ArkTS组件-图像效果
m0_73088370的博客
05-13 569
文章详细解析了多个API接口及其参数，包括图像效果设置、元服务API、系统能力等。
鸿蒙5.0版开发：ArkTS组件-Radio
m0_69424697的博客
11-10 778
单选框，提供相应的用户交互选择项。
鸿蒙NEXT开发：ArkTS组件-通用属性（图像效果）
ZPYQAQ的博客
03-24 998
设置组件的模糊、阴影、球面效果以及设置图片的图像效果。
鸿蒙5.0版开发：ArkTS组件-Slider
m0_69424697的博客
11-10 975
滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。
鸿蒙5.0版开发：ArkTS组件-Progress
m0_69424697的博客
11-18 784
进度条组件，用于显示内容加载或操作处理等进度。
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（图像效果）
Androidbye的博客
12-22 984
设置组件的模糊、阴影、球面效果以及设置图片的图像效果。
鸿蒙5.0开发进阶：UI框架-ArkTS组件（Radio）
Androidbye的博客
01-11 726
单选框，提供相应的用户交互选择项。
【HarmonyOS 5】鸿蒙碰一碰分享功能开发指南
路漫漫亦无涯
05-12 882
摘要： HarmonyOS 5 的碰一碰分享功能通过设备轻触实现跨端快速分享，支持文件传输、Wi-Fi 共享等场景。开发者可通过注册靠近分享、构造分享数据、调用 API 等步骤实现该功能。系统提供三种分享卡片模板，开发者可根据需求选择。开发过程中需注意设备版本、分享服务状态等条件，并在 3 秒内完成分享操作。源码示例展示了如何导入模块、定义方法、处理事件及使用分享卡片模板，帮助开发者快速集成碰一碰分享功能。
鸿蒙NEXT开发动画案例10
鸿蒙布道师
05-16 944
本文介绍了如何在鸿蒙系统中创建一个名为SpinTen的动画组件。首先，在Page文件夹下新建Spin.ets文件，定义了一个包含旋转动画的组件，通过Grid布局和Canvas绘制实现动画效果。接着，修改Index.ets文件，引入并调用SpinTen组件，设置其大小和颜色。最后，运行项目并登录华为账号进行签名，即可看到动画效果。该动画通过Keyframe动画实现，具有平滑的缩放和位移效果，适用于加载或等待场景。
鸿蒙Next API17学习新特性之组件可见区域变化事件新增支持设置事件的回调参数，限制它的执行间隔
风中追风
05-14 603
鸿蒙开发文档更新的非常快，对应我们开发者的学习能力也要求非常高，今天这篇文章给大家分享一下鸿蒙API17中更新的新特性学习。鸿蒙 Next 的组件可见区域变化事件在最新的 API Version 17 中得到了增强，新增了支持设置事件的回调参数的功能，并能够限制回调的执行间隔。这一改进使得开发者可以更精细地控制组件可见区域变化事件的触发频率，从而优化应用性能和用户体验。本文将深入探讨这一新特性的使用方法和应用场景。
【HarmonyOs鸿蒙】七种传参方式
m0_64455070的博客
05-13 504
在HarmonyOS应用开发中，参数传递是组件间通信和数据共享的重要机制。以下是鸿蒙（ArkUI）开发中常见的7种传参方式及其具体实现
鸿蒙5.0项目开发——鸿蒙天气项目的实现（主页2）
高心星的专栏
05-16 50
这是一个基于 HarmonyOS 开发的天气应用，提供实时天气查询、天气预报和城市搜索等功能。
HarmonyOS 开发之 —— 合理使用动画与转场
最新发布
this_is_bug的博客
05-16 47
本文介绍了在HarmonyOS开发中如何合理使用动画与转场效果，以提升用户体验。首先，文章详细讲解了属性动画（Property Animation），包括其核心组件如Animator、ValueAnimator、ObjectAnimator，以及插值器和估值器的作用。通过代码示例展示了如何实现视图位置移动、组合动画（缩放与透明度变化）以及自定义属性动画。接着，文章探讨了转场动画（Transition Animation），分为简单转场和带共享元素的转场，并提供了页面滑动切换和图片点击放大进入新页面的具体实现
按钮导航组件 | 纯血鸿蒙组件库AUI
weixin_46696182的博客
05-12 851
可设置导航数据(含文本及路由)，可设置按钮颜色、导航标题及导航子标题。
鸿蒙接入flutter环境变量配置windows-命令行或者手动配置-到项目的创建-运行demo项目
weixin_42301175的博客
05-13 661
鸿蒙接入flutter环境变量配置windows-命令行或者手动配置-到项目的创建-运行demo项目
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值