鸿蒙5.0开发进阶：UI框架-ArkTS组件（Circle）

原创 于 2025-01-23 15:47:14 发布 · 1k 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#harmonyos #华为 #android #前端 #鸿蒙系统 #ArkUI #ArkTS

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

Circle

用于绘制圆形的组件。

说明

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

子组件

无

接口

Circle(value?: CircleOptions)

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

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

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

参数：

参数名类型必填说明
valueCircleOptions否设置圆形尺寸

CircleOptions对象说明

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

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

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

名称类型必填说明
widthstring | number否

宽度。

默认值：0

默认单位：vp

异常值按照默认值处理。

heightstring | number否

高度。

默认值：0

默认单位：vp

异常值按照默认值处理。

属性

除支持通用属性外，还支持以下属性：

fill

fill(value: ResourceColor)

设置填充区域颜色。异常值按照默认值处理。

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

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

参数：

参数名类型必填说明
valueResourceColor是

填充区域颜色。

默认值：Color.Black

fillOpacity

fillOpacity(value: number | string | Resource)

设置填充区域透明度。取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理。

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

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

参数：

参数名类型必填说明
valuenumber | string | Resource是

填充区域透明度。

默认值：1

stroke

stroke(value: ResourceColor)

设置边框颜色，不设置时，默认没有边框。异常值不会绘制边框。

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

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

参数：

参数名类型必填说明
valueResourceColor是边框颜色。

strokeDashArray

strokeDashArray(value: Array<any>)

设置边框间隙。异常值按照默认值处理。

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

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

参数：

参数名类型必填说明
valueArray<any>是

边框间隙。

默认单位：vp

默认值：[]

strokeDashOffset

strokeDashOffset(value: number | string)

设置边框绘制起点的偏移量。异常值按照默认值处理。

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

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

参数：

参数名类型必填说明
valuenumber | string是

边框绘制起点的偏移量。

默认值：0

默认单位：vp

strokeLineCap

strokeLineCap(value: LineCapStyle)

设置边框端点绘制样式。

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

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

参数：

参数名类型必填说明
valueLineCapStyle是

边框端点绘制样式。

默认值：LineCapStyle.Butt

strokeLineJoin

strokeLineJoin(value: LineJoinStyle)

设置边框拐角绘制样式。Circle组件无法形成拐角，该属性设置无效。

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

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

参数：

参数名类型必填说明
valueLineJoinStyle是

边框拐角绘制样式。

默认值：LineJoinStyle.Miter

strokeMiterLimit

strokeMiterLimit(value: number | string)

设置斜接长度与边框宽度比值的极限值。Circle组件无法设置尖角图形，该属性设置无效。

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

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

参数：

参数名类型必填说明
valuenumber | string是

斜接长度与边框宽度比值的极限值。

默认值：4

strokeOpacity

strokeOpacity(value: number | string | Resource)

设置边框透明度。该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理 。

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

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

参数：

参数名类型必填说明
valuenumber | string | Resource是

边框透明度。

默认值：1

strokeWidth

strokeWidth(value: Length)

设置边框宽度。该属性若为string类型, 暂不支持百分比，百分比按照1px处理。

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

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

参数：

参数名类型必填说明
valueLength是

边框宽度。

默认值：1

默认单位：vp

antiAlias

antiAlias(value: boolean)

设置是否开启抗锯齿效果。

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

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

参数：

参数名类型必填说明
valueboolean是

是否开启抗锯齿效果。

默认值：true

示例

使用fillOpacity、stroke、strokeDashArray分别绘制圆的透明度、边框颜色、边框间隙。

// xxx.ets
@Entry
@Component
struct CircleExample {
  build() {
    Column({ space: 10 }) {
      // 绘制一个直径为150的圆
      Circle({ width: 150, height: 150 })
      // 绘制一个直径为150、线条为红色虚线的圆环（宽高设置不一致时以短边为直径）
      Circle()
        .width(150)
        .height(200)
        .fillOpacity(0)
        .strokeWidth(3)
        .stroke(Color.Red)
        .strokeDashArray([1, 2])
    }.width('100%')
  }
}

鸿蒙5.0版开发：ArkTS绘制组件（Circle）
m0_69424697的博客
09-29 816
用于绘制圆形的组件。
鸿蒙ArkTS绘制组件：【Circle】
2401_82772199的博客
07-15 469
用于绘制圆形的组件。
鸿蒙Harmony应用开发—ArkTS声明式开发（绘制组件：Circle）
m0_64420071的博客
03-18 1498
ArkTS声明式开发（绘制组件：Circle）
鸿蒙Harmony应用开发—ArkTS声明式开发（绘制组件：Ellipse）
m0_64420071的博客
03-18 1274
ArkTS声明式开发（绘制组件：Ellipse）
鸿蒙HarmonyOS NEXT开发：Gauge（基础组件）
shudaoshanBBQ的博客
08-15 1216
数据量规图表组件，用于将数据展示为环形图表。
鸿蒙5.0版开发：ArkTS组件-基础组件（NavRouter）
m0_69424697的博客
09-14 1038
导航组件，默认提供点击响应处理，不需要开发者自定义点击事件逻辑。
鸿蒙5.0进阶开发：UI开发-构建自定义组件
AyomQAQ的博客
12-30 1021
ArkUI开发框架在NDK接口提供了自定义UI组件的能力，这些能力包括自定义测算，自定义布局和自定义绘制。
鸿蒙5.0版开发：ArkTS组件-Marquee
m0_69424697的博客
11-17 978
跑马灯组件，用于滚动展示一段单行文本。
鸿蒙5.0进阶开发：UI开发-容器组件（toolbar开发）
AyomQAQ的博客
01-07 349
toolbar为页面工具栏组件，用于展示针对当前界面的操作选项，可作为页面的一级导航。
鸿蒙5.0进阶开发：ArkWeb框架-解决Web组件本地资源跨域问题
AyomQAQ的博客
01-15 930
为了提高安全性，ArkWeb内核不允许file协议或者resource协议访问URL上下文中来自跨域的请求。
arkTS swiper 轮播图圆角滑动变会变成直角然后再回到圆角
weixin_38252066的博客
03-25 386
解决：给swiper也设置相同的圆角。
鸿蒙OS应用开发之百分比显示组件
大坡3D软件开发
01-11 1064
前面学习了动态加载的组件，在本文里将要学习百分比显示组件，这个组件可以把数据按百分比的情况进行图形显示出来。百分比图形显示还是很有用的，比如一个班里学生的成绩占比，还有软件项目开发进度的情况，还有软件下载进度等等。type是百分组件显示外形的方式，这里主要有两种显示，一种是圆形Circle，一个是线形Line。values是一个数组类型，描述每一段怎么显示，比如30%显示时，表示值就是30.里面的文本显示，还是采用别的代码来显示。这段代码就会显示30%占比，最大值为100，使用的圆形显示。
ArkTS的常用组件
2301_80263861的博客
12-10 1178
Swiper(){...Indicator.dot() // 设置小圆点的相关属性.itemWidth(20) // 未选中时候的高.itemHeight(20) // 未选中时候的宽.color(Color.Black) // 未选中时候的颜色.selectedItemWidth(30) // 选中时候的宽.selectedItemHight(30) // 选中时候的高.selectedColor(Color.White) // 选中时候的颜色。
使用画布绘制自定义图形（Canvas）
01-15 2754
使用CanvasRenderingContext2D对象在Canvas画布上绘制。@Entry@Component//用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。//用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。build() {//在canvas中调用CanvasRenderingContext2D对象。
鸿蒙HarmonyOS APP开发入门3——组件（九 按钮组件 ）—
2401_84160087的博客
04-18 957
(img-QXlHoPR4-1713442081512)]利用圆形按钮，胶囊按钮，文本组件可以绘制出如下拨号盘的UI界面。
鸿蒙Harmony-圆形绘制组件Circle使用详解
袁震的博客
10-31 2233
Circle是鸿蒙提供的圆形绘制组件，利用该组件可以绘制圆形背景，圆形图案等官方提供的参数和属性：参数名参数类型必填参数描述width否宽度。默认值：0异常值按照默认值处理。height否高度。默认值：0异常值按照默认值处理。名称类型默认值描述fill设置填充区域颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。异常值按照默认值处理。Resource1设置填充区域透明度。
基础ArkTS组件：数据面板组件（图表），日期选择器组件（HarmonyOS学习第三课【3.5】）
qq_58213084的博客
05-08 1878
数据面板组件，用于将多个数据占比情况使用占比图进行展示。说明该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
HarmonyOS鸿蒙ArkTS 模仿雷达动画效果
特创数字
01-16 877
【代码】HarmonyOS鸿蒙ArkTS 模仿雷达动画效果。
ArKTS的基本组件
morr_的博客
02-03 6764
设置文本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为400，取值越大，字体越粗。string类型仅支持number类型取值的字符串形式，例如“400”，以及“bold”、“bolder”、“lighter”、“regular”、“medium”，分别对应FontWeight中相应的枚举值。当文本内容较多超出了Text组件范围的时候，您可以使用textOverflow设置文本截取方式，需配合maxLines使用，单独设置不生效，maxLines用于设置文本显示最大行数。
鸿蒙5.0版开发：ArkTS组件通用属性（触摸热区设置）
最新发布
08-21
在 HarmonyOS 5.0 的 ArkTS 组件中，设置触摸热区（Touch Area）属性可以通过组件的 `touchable` 和 `hitTestBehavior` 等属性来实现。这些属性允许开发者定义组件响应触摸事件的区域和行为。 ### 配置触摸热区属性 #### 1. `touchable` 属性 `touchable` 属性用于控制组件是否可以响应触摸事件。设置为 `true` 时，组件将可以响应触摸事件；设置为 `false` 时，组件将忽略所有触摸事件。 ```ts @Component struct MyComponent { build() { Column() { Text('Click Me') .fontSize(30) .touchable(true) } .width('100%') .height(100) } } ``` #### 2. `hitTestBehavior` 属性 `hitTestBehavior` 属性用于定义组件在命中测试（Hit Test）中的行为。它有以下几种取值： - `HitTestBehavior.self`: 组件仅在其自身的区域内响应触摸事件。 - `HitTestBehavior.none`: 组件不响应任何触摸事件。 - `HitTestBehavior.default`: 组件按照默认行为响应触摸事件。 ```ts @Component struct MyComponent { build() { Column() { Text('Click Me') .fontSize(30) .hitTestBehavior(HitTestBehavior.self) } .width('100%') .height(100) } } ``` #### 3. 自定义触摸热区 如果需要更复杂的触摸热区配置，可以通过自定义组件的 `onTouch` 事件来实现。通过监听触摸事件，开发者可以自定义组件的响应逻辑。 ```ts @Component struct MyComponent { @State message: string = 'Touch Me' build() { Column() { Text(this.message) .fontSize(30) .onTouch((event: TouchEvent) => { if (event.type === TouchType.Down) { this.message = 'Touched Down' } else if (event.type === TouchType.Up) { this.message = 'Touched Up' } }) } .width('100%') .height(100) } } ``` ### 注意事项 - **性能优化**：在设置触摸热区时，应避免不必要的复杂逻辑，以确保应用的响应速度和性能。 - **交互设计**：触摸热区的设计应符合用户习惯，避免过于敏感或响应区域过小的问题。 通过以上方法，开发者可以灵活地配置 ArkTS 组件的触摸热区属性，以满足不同的交互需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值