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

鸿蒙5.0开发：Line组件详解
最新推荐文章于 2025-02-28 17:49:03 发布
原创 最新推荐文章于 2025-02-28 17:49:03 发布 · 930 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

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

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

Line

直线绘制组件。

说明

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

子组件

无

接口

Line(value?: {width?: string | number, height?: string | number})

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

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

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

参数：

参数名类型必填说明
value{width?: string | number, height?: string | number}否

width：宽度。

值为异常值或缺省时按照自身内容需要的宽度处理。

默认单位：vp

height：高度。

值为异常值或缺省时按照自身内容需要的高度处理。

默认单位：vp

属性

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

startPoint

startPoint(value: Array<any>)

设置直线起点坐标点（相对坐标），异常值按照默认值处理。

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

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

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

参数：

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

直线起点坐标点（相对坐标），单位vp。

默认值：[0, 0]

endPoint

endPoint(value: Array<any>)

设置直线终点坐标点（相对坐标），异常值按照默认值处理。

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

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

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

参数：

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

直线终点坐标点（相对坐标），单位vp。

默认值：[0, 0]

fill

fill(value: ResourceColor)

设置填充区域颜色。Line组件无法形成闭合区域，该属性设置无效。

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

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

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

参数：

参数名类型必填说明
valueResourceColor是

填充区域颜色。

默认值：Color.Black

fillOpacity

fillOpacity(value: number | string | Resource)

设置填充区域透明度。Line组件无法形成闭合区域，该属性设置无效。

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

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

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

参数：

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

填充区域透明度。

默认值：1

stroke

stroke(value: ResourceColor)

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

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

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

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

参数：

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

strokeDashArray

strokeDashArray(value: Array<any>)

设置边框间隙。线段相交时可能会出现重叠现象。异常值按照默认值处理。

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

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

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

参数：

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

边框间隙。

默认值：[]

默认单位：vp

strokeDashOffset

strokeDashOffset(value: number | string)

设置边框绘制起点的偏移量。

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

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

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

参数：

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

边框绘制起点的偏移量。

默认值：0

默认单位：vp

strokeLineCap

strokeLineCap(value: LineCapStyle)

设置边框端点绘制样式。

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

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

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

参数：

参数名类型必填说明
valueLineCapStyle是

边框端点绘制样式。

默认值：LineCapStyle.Butt

strokeLineJoin

strokeLineJoin(value: LineJoinStyle)

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

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

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

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

参数：

参数名类型必填说明
valueLineJoinStyle是

边框拐角绘制样式。

默认值：LineJoinStyle.Miter

strokeMiterLimit

strokeMiterLimit(value: number | string)

设置锐角绘制成斜角的极限值。Line组件无法设置锐角图形，该属性设置无效。

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

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

系统能力： 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卡片中使用。

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

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

参数：

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

边框透明度。

默认值：1

strokeWidth

strokeWidth(value: Length)

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

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

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

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

参数：

参数名类型必填说明
valueLength是

边框宽度。

默认值：1

默认单位：vp

antiAlias

antiAlias(value: boolean)

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

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

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

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

参数：

参数名类型必填说明
valueboolean是

是否开启抗锯齿效果。

默认值：true

示例

示例1（组件属性绘制）

使用startPoint、endPoint、fillOpacity、stroke、strokeDashArray、strokeDashOffset属性分别绘制直线的起始点、结束点、透明度、直线颜色、边框间隙、绘制起点。

// xxx.ets
@Entry
@Component
struct LineExample {
  build() {
    Column({ space: 10 }) {
      // 线条绘制的起止点坐标均是相对于Line组件本身绘制区域的坐标
      Line()
        .width(200)
        .height(150)
        .startPoint([0, 0])
        .endPoint([50, 100])
        .stroke(Color.Black)
        .backgroundColor('#F5F5F5')
      Line()
        .width(200)
        .height(150)
        .startPoint([50, 50])
        .endPoint([150, 150])
        .strokeWidth(5)
        .stroke(Color.Orange)
        .strokeOpacity(0.5)
        .backgroundColor('#F5F5F5')
      // strokeDashOffset用于定义关联虚线strokeDashArray数组渲染时的偏移
      Line()
        .width(200)
        .height(150)
        .startPoint([0, 0])
        .endPoint([100, 100])
        .stroke(Color.Black)
        .strokeWidth(3)
        .strokeDashArray([10, 3])
        .strokeDashOffset(5)
        .backgroundColor('#F5F5F5')
      // 当坐标点设置的值超出Line组件的宽高范围时，线条会画出组件绘制区域
      Line()
        .width(50)
        .height(50)
        .startPoint([0, 0])
        .endPoint([100, 100])
        .stroke(Color.Black)
        .strokeWidth(3)
        .strokeDashArray([10, 3])
        .backgroundColor('#F5F5F5')
    }
  }
}

示例2（边框端点绘制）

使用strokeLineCap绘制直线的边框端点样式。

// xxx.ets
@Entry
@Component
struct LineExample1 {
  build() {
    Row({ space: 10 }) {
      // 当LineCapStyle值为Butt时
      Line()
        .width(100)
        .height(200)
        .startPoint([50, 50])
        .endPoint([50, 200])
        .stroke(Color.Black)
        .strokeWidth(20)
        .strokeLineCap(LineCapStyle.Butt)
        .backgroundColor('#F5F5F5')
        .margin(10)
      // 当LineCapStyle值为Round时
      Line()
        .width(100)
        .height(200)
        .startPoint([50, 50])
        .endPoint([50, 200])
        .stroke(Color.Black)
        .strokeWidth(20)
        .strokeLineCap(LineCapStyle.Round)
        .backgroundColor('#F5F5F5')
      // 当LineCapStyle值为Square时
      Line()
        .width(100)
        .height(200)
        .startPoint([50, 50])
        .endPoint([50, 200])
        .stroke(Color.Black)
        .strokeWidth(20)
        .strokeLineCap(LineCapStyle.Square)
        .backgroundColor('#F5F5F5')
    }
  }
}

示例3（边框间隙绘制）

使用strokeDashArray绘制直线的边框间隙。

// xxx.ets
@Entry
@Component
struct LineExample {
  build() {
    Column() {
      Line()
        .width(300)
        .height(30)
        .startPoint([50, 30])
        .endPoint([300, 30])
        .stroke(Color.Black)
        .strokeWidth(10)
      // 设置strokeDashArray的数组间隔为 50
      Line()
        .width(300)
        .height(30)
        .startPoint([50, 20])
        .endPoint([300, 20])
        .stroke(Color.Black)
        .strokeWidth(10)
        .strokeDashArray([50])
      // 设置strokeDashArray的数组间隔为 50, 10
      Line()
        .width(300)
        .height(30)
        .startPoint([50, 20])
        .endPoint([300, 20])
        .stroke(Color.Black)
        .strokeWidth(10)
        .strokeDashArray([50, 10])
      // 设置strokeDashArray的数组间隔为 50, 10, 20
      Line()
        .width(300)
        .height(30)
        .startPoint([50, 20])
        .endPoint([300, 20])
        .stroke(Color.Black)
        .strokeWidth(10)
        .strokeDashArray([50, 10, 20])
      // 设置strokeDashArray的数组间隔为 50, 10, 20, 30
      Line()
        .width(300)
        .height(30)
        .startPoint([50, 20])
        .endPoint([300, 20])
        .stroke(Color.Black)
        .strokeWidth(10)
        .strokeDashArray([50, 10, 20, 30])
    }
  }
}

鸿蒙5.0版开发：ArkTS绘制组件（Line）
m0_69424697的博客
09-30 1225
直线绘制组件。
鸿蒙5.0版开发：ArkTS组件-Line
m0_69424697的博客
11-22 782
直线绘制组件。
鸿蒙Harmony应用开发—ArkTS声明式开发（绘制组件：Line）
m0_64420071的博客
03-18 2383
ArkTS声明式开发（绘制组件：Line）
鸿蒙app 开发中的 横线 竖线 line
Ruiqi8的博客
02-28 380
而不用前端 类似的 盒子的边框来实现 这种实现 方式 更加的灵活。实现下面中线 可以使用 line。
鸿蒙开发 四十八 Line 组件
renfujiang的专栏
10-19 743
strokeDashArray第一个是指实线的宽度或者是高度，第二个是指隔开那个缺口的宽度或者是高度。startPoint开始的xy坐标，endPoint结束的xy坐标，stroke指定线的颜色，strokeDashArray第一个参数是实线的长或者是宽，第二个参数是空格处的长或者是宽。Line是组件，提供了画虚线的方法,strokeWidth线的宽度，，如果将这条线画为水平的，这样改。
鸿蒙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为页面工具栏组件，用于展示针对当前界面的操作选项，可作为页面的一级导航。
鸿蒙ArkTS媒体组件：【Line】
2401_82772199的博客
07-16 699
直线绘制组件。
鸿蒙仓颉语言【cryptocj 库】（介绍与SHA、MD5、HMAC摘要算法）
鸿蒙的技术博客
07-24 1556
cryptocj 是一个安全的密码库，包括常用的密码算法、常用的密钥生成和签名验证。 该库是对 C 语言的 openSSL 封装的仓颉加密算法
如何使用命令行对RK开发板进行OpenHarmony版本烧录？
m0_64420071的博客
03-29 2057
开发版烧录
简化的鸿蒙WiFi接口，仅需几行代码，简单易用！
Python研究所
11-27 1195
此文转载自：https://my.oschina.net/u/4857646/blog/4753376 大咖揭秘Java人都栽在了哪？点击免费领取《大厂面试清单》，攻克面试难关~>>> 使用鸿蒙原始WiFI API接口进行编程，整个过程稍显繁琐，为此我们对鸿蒙原始WiFi API接口做了一层封装，形成了一套更简单易用的接口。 简化后的API接口 STA模式 // 连...
使用画布绘制自定义图形（Canvas）
01-15 2753
使用CanvasRenderingContext2D对象在Canvas画布上绘制。@Entry@Component//用来配置CanvasRenderingContext2D对象的参数，包括是否开启抗锯齿，true表明开启抗锯齿。//用来创建CanvasRenderingContext2D对象，通过在canvas中调用CanvasRenderingContext2D对象来绘制。build() {//在canvas中调用CanvasRenderingContext2D对象。
鸿蒙next:接口(interface)
LIUCHANGSHUO的博客
12-25 1076
属性：明确对象应有的字段，例如{ name: string;}，规定了对象需包含name和age两个字段，且类型分别为字符串和数字。方法：描述对象能够执行的行为，像{ calculate: (a: number, b: number) => number;}，表示对象要有一个calculate方法，接收两个数字参数并返回一个数字。索引签名：如{ [index: string]: any;}，意味着可以通过字符串索引访问对象成员，对象的属性名和值类型较为灵活。可选属性：通过?标记，如{ address?
鸿蒙(HarmonyOS)--接口、泛型、模块化、工具类、关键字
hqy1989的博客
09-22 3120
目录1. 接口1.1 接口属性1.1.1 必需属性：1.1.2 可选属性：1.1.3 只读属性：1.1.4 函数类型的属性：1.2 接口继承1.3 接口实现2. 泛型2.1 泛型类2.2 泛型接口2.3 泛型约束2.4 泛型函数2.5 泛型默认值2.6 多个泛型参数 2.7 泛型约定3. 空安全3.1 非空断言运算符3.2 空值合并运算符3.3 可选链4. 模块4.1 导出（Export）4.2 导入（Import）4.2.1 静态导入4.2.2 动态导入4.2.3 全部导入4.2.4 导入HarmonyO
鸿蒙进阶篇-接口和泛型
2401_88463044的博客
11-13 1042
/ 1. 字符串return arg// 2. 数字return arg// 3. 布尔return arg这几个函数实现的逻辑都是一样的，就只有传入和返回的类型不一样，如果还有很多其他类型的，那就要多写很多个相似的函数，那么能否只定义一个函数，实现一样的效果呢？return arg以上代码中，只是在函数名后面加了尖括号和T“”，然后分别把参数和返回值的类型也相应换成了T而已，就搞定啦~而其中最关键的是尖括号，在这里它是一个代表泛型的标记，固定写法；
HarmonyOS NEXT - ArkTS语言 - 接口
u011143672的博客
06-17 766
泛型类型的类型参数可以绑定。例如，HashMap容器中的Key类型参数必须具有哈希方法，即它应该是可哈希的。这样可以不指定实际的类型实参，而只使用泛型类型名称。在上面的例子中，Key类型扩展了Hashable，Hashable接口的所有方法都可以为key调用。继承接口包含被继承接口的所有属性和方法，还可以添加自己的属性和方法。泛型类型和函数允许创建的代码在各种类型上运行，而不仅支持单一类型。任何一个类的实例只要实现了特定接口，就可以通过该接口实现多态。接口是定义代码协定的常见方式。
鸿蒙OS(编译框架和接口简介)
m0_54842832的博客
07-21 576
编译框架： 引用： 什么是Ninja 在Unix/Linux下通常使用Makefile来控制代码的编译，但是Makefile对于比较大的项目有时候会比较慢，代码在编译 都变成了程序员放松的借口了。所以这个Google的程序员在开发Chrome的时候因为忍受不了Makefile的速度，自己 重新开发出来一套新的控制编译的工具叫作Ninja，Ninja相对于Makefile这套工具更注重于编译速度。除了Chrome 现在还有一些其他的比较大的项目也在开始使用Ninja。 基本了解了代码
鸿蒙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、付费专栏及课程。

余额充值