鸿蒙HarmonyOS NEXT开发：外描边设置（ArkTS通用属性）

最新推荐文章于 2024-08-28 17:45:02 发布
最新推荐文章于 2024-08-28 17:45:02 发布
阅读量989 收藏 15
点赞数 25
分类专栏： 鸿蒙 ArkTS 文章标签： harmonyos 华为 鸿蒙 android 驱动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shudaoshanBBQ/article/details/141109726
版权
鸿蒙 同时被 2 个专栏收录
99 篇文章 0 订阅
订阅专栏
ArkTS
94 篇文章 0 订阅
订阅专栏

外描边设置

设置组件外描边样式。

说明：

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

outline

outline(value: OutlineOptions)

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

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

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

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

参数：

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

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开始，该接口支持在原子化服务中使用。

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

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

LocalizedEdgeColors对象说明12+

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

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

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

名称参数类型必填描述
leftResourceColor否左侧外描边颜色。
从右至左显示语言模式下为右侧外描边颜色。
rightResourceColor否右侧外描边颜色。
从右至左显示语言模式下为左侧外描边颜色。
topResourceColor否上侧外描边颜色。
bottomResourceColor否下侧外描边颜色。

OutlineRadiuses对象说明

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

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

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

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

EdgeOutlineStyles对象说明

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

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

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

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

示例

示例1

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

示例2

// xxx.ets
// outline属性的color属性值使用LocalizedEdgeColors类型

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

从左至右显示语言示例图

从右至左显示语言示例图

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

 

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

总结

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

「已注销」
关注
  • 25
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HarmonyOS鸿蒙开发指南:Canvas组件 Path2D对象
sybh的博客
01-09 703
先使用createPath2D创建出路径对象，只对path1路径进行描边，所以画布上就只会出现path1的路径图形。点击text组件触发addPath方法会把path2路径对象当参数传入path1中，再对path1对象进行描边（stroke）操作后画布出现path1和path2两个图形。点击change文本改变setTransform属性值为setTransform(2, 0.1, 0.1, 2, 0,0)，图形变大并向左倾斜。创建Path2D，使用多条线段组合图形。
【愚公系列】2023年12月 HarmonyOS教学课程 029-ArkUI组件（Canvas）
热门推荐
时光隧道
12-13 5万+
Canvas直接绘制图形的原理是通过Canvas API调用一系列绘制方法来在Canvas元素上绘制图形和图像。Canvas元素本身是一个空的矩形区域，通过获取Canvas的上下文（context），可以使用上下文提供的绘制方法来进行绘制。@Entry@Component//用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。
鸿蒙HarmonyOS实战-ArkUI组件（Canvas）
shudaoshanQAQ的博客
01-06 2434
Canvas组件是一种图形渲染组件，它提供了一个画布（canvas），开发者可以在上面绘制各种图形、文本等。Canvas组件通常用于创建游戏、数据可视化等需要动态绘制图形的应用程序。
鸿蒙画布组件：【CanvasRenderingContext2D对象】方法
2401_82772199的博客
07-19 707
transform方法对应一个变换矩阵，想对一个图形进行变化的时候，只要设置此变换矩阵相应的参数，对图形的各个定点的坐标分别乘以这个矩阵，就能得到新的定点的坐标。矩阵变换效果可叠加。从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持PixelMap对象。从API version 9开始，该接口支持在ArkTS卡片中使用。从API version 9开始，该接口支持在ArkTS卡片中使用。从API version 9开始，该接口支持在ArkTS卡片中使用。
铁山靠之——HarmonyOS组件 - 2.0
VanWot的博客
12-26 1599
huawei HarmonyOS第五章
HarmonyOS标准描边类图标
12-18
HarmonyOS是一款由华为公司开发的面向全场景的分布式操作系统，旨在提供无缝的多设备体验。在HarmonyOS的用户界面设计中，图标是至关重要的元素，它们不仅代表着应用的功能，还影响着整体视觉效果和用户体验。...
HarmonyOS应用开发-Svg组件—polyline.docx
06-05
除了以上特定属性外，`polyline`组件还支持其他SVG组件的通用属性，如`fill`、`stroke`等，用于设置填充色、描边颜色等样式属性。 #### 四、动画支持 `polyline`组件支持多种类型的动画，包括但不限于： - **...
Android为TextView添加字体库和设置描边的方法
08-29
Android为TextView添加字体库和设置描边的方法是Android开发中一种常见的需求，本文主要介绍了Android为TextView添加字体库和设置描边的方法。 一、使用系统自带的字体 Android系统自带有三种字体：sans、serif...
HarmonyOSOpenHarmony应用开发ArkTS画布组件CanvasRenderingContext2D对象总述
03-03
在 HarmonyOS 和 OpenHarmony 应用开发中，Canvas 组件是用于图形绘制的重要工具，而 CanvasRenderingContext2D 是一个核心对象，它提供了丰富的接口来实现各种图形的绘制。这个对象允许开发者在 Canvas 上绘制矩形...
【HarmonyOS 4.0】@BuilderParam 装饰器
票票的博客
08-26 378
@BuilderParam 装饰器
理解 HarmonyOS 中的网格布局：综合指南
A1551143530的博客
08-24 1297
网格布局是创建响应式和结构化用户界面的强大工具。通过将界面划分为由行和列组成的单元格，网格可以精确控制组件的分布和对齐。这使得它们成为各种应用程序（例如图库、日历和计算器）的理想选择。在 HarmonyOS 中，ArkUI 提供了用于构建网格布局的Grid容器和GridItem组件。Grid组件用于定义网格的结构，而GridItem组件指定每个单元格内的内容。HarmonyOS 网格支持条件渲染、循环渲染和延迟加载等高级功能，以高效处理大型数据集。
【HarmonyOS NEXT星河版开发实战】灯泡定时开关
2302_80329073的博客
08-24 590
该案例是一个小型的娱乐项目，主要是定时器的应用。功能并不是很强大，只是简单图片的变化。有兴趣的小伙伴们可以根据界面效果自己进行实现。头部有倒计时的数字，此案例是以三秒举例，当点击开关时开始计时，同时灯泡会变成红色，等倒计时结束后灯泡会重新变暗。
HarmonyOS NEXT 地图服务中‘我的位置’功能全解析
白晓明的博客
08-24 2059
目前有两种方式可用于在地图上显示我的位置。推荐采用安全控件`LocationButton`方式，此方式能够临时获取精准定位权限，无需进行权限弹框授权确认。另一种方式则是申请授权方式，该方式需要动态向用申请设备位置信息`ohos.permission.LOCATION`和设备模糊位置信息`ohos.permission.APPROXIMATELY_LOCATION`两个权限。
HarmonyOs应用权限申请，system_grant和user_grant区别。本文附头像上传申请user-grant权限代码示例
s_407的博客
08-24 1130
user_grant权限授权要基于用户可知可控的原则，需要应用在运行时主动调用系统动态申请权限的接口，系统弹框由用户授权，用户结合应用运行场景的上下文，识别出应用申请相应敏感权限的合理性，从而做出正确的选择。user_grant指的是用户授权类型，在该类型的权限许可下，应用被允许访问的数据将会涉及到用户或设备的敏感信息，应用被允许执行的操作可能对系统或者其他应用产生严重的影响。系统不鼓励频繁弹窗打扰用户，如果用户拒绝授权，将无法再次拉起弹窗，需要应用引导用户在系统应用“设置”的界面中手动授予权限。
鸿蒙HarmonyOS之使用preferences首选项保存获取数据
最新发布
qq_46269365的博客
08-28 159
工具类，包括创建Preferences首选项、保存和获取对应Key的数据等方法。示例代码中以保存Token字符串值为例。直接调用工具类的方法。如有错误，欢迎指正！
【鸿蒙学习】java后端学鸿蒙开发有什么好处呢？
一个不断前行的程序者
08-25 1065
作为一名Java程序员，学习HarmonyNext开发具有重要意义。通过制定合理的学习路线，掌握基本知识和技能，您将能够在HarmonyNext领域取得一席之地。随着市场需求的不断增长，HarmonyNext开发者将面临更多机遇。抓住机遇，不断提升自己，成为一名优秀的HarmonyNext开发者。
HarmonyOS NEXT 实战开发：实现日常提醒应用
weixin_55362248的博客
08-28 526
根据文档以及自己之前开发经验做一个日常提醒demo 加深自己对HarmonyOS NEXT的理解和实际应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值