harmony 鸿蒙Rect

2025-06-12
浏览 (2)

Rect

矩形绘制组件。

说明：

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

该组件从API version 20开始支持使用AttributeUpdater类的updateConstructorParams接口更新构造参数。

子组件

无

接口

Rect(options?: RectOptions|RoundedRectOptions)

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

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

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

参数：

参数名	类型	必填	说明
options	RectOptions \|RoundedRectOptions	否	Rect绘制属性。

RectOptions¹⁸⁺对象说明

用于描述Rect绘制属性。

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

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

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

名称	类型	必填	说明
width	Length	否	宽度，取值范围≥0。默认值：0 默认单位：vp 异常值按照默认值处理。
height	Length	否	高度，取值范围≥0。默认值：0 默认单位：vp 异常值按照默认值处理。
radius	Length \|Array<any>	否	圆角半径，支持分别设置四个角的圆角度数，取值范围≥0。该属性和radiusWidth/radiusHeight属性效果类似，在组合使用时优先于radiusWidth/radiusHeight生效。默认值：0 默认单位：vp 异常值按照默认值处理。

RoundedRectOptions¹⁸⁺对象说明

用于描述Rect绘制属性。

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

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

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

名称	类型	必填	说明
width	Length	否	宽度，取值范围≥0。默认值：0 默认单位：vp 异常值按照默认值处理。
height	Length	否	高度，取值范围≥0。默认值：0 默认单位：vp 异常值按照默认值处理。
radiusWidth	Length	否	圆角宽度，取值范围≥0。默认值：0 默认单位：vp 异常值按照默认值处理。
radiusHeight	Length	否	圆角高度，取值范围≥0。默认值：0 默认单位：vp 异常值按照默认值处理。

属性

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

radiusWidth

radiusWidth(value: Length )

设置圆角的宽度，仅设置宽时宽高一致，支持attributeModifier动态设置属性方法。异常值按照默认值处理。

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

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

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

参数：

参数名	类型	必填	说明
value	Length	是	圆角的宽度，取值范围≥0。默认值：0 默认单位：vp

radiusHeight

radiusHeight(value: Length)

设置圆角的高度，仅设置高时宽高一致，支持attributeModifier动态设置属性方法。异常值按照默认值处理。

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

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

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

参数：

参数名	类型	必填	说明
value	Length	是	圆角的高度，取值范围≥0。默认值：0 默认单位：vp

radius

radius(value: Length|Array<any>)

设置圆角半径大小，取值范围≥0，支持attributeModifier动态设置属性方法。异常值按照默认值处理。

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

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

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

参数：

参数名	类型	必填	说明
value	Length \| Array<any>	是	圆角半径大小。默认值：0 默认单位：vp

fill

fill(value: ResourceColor)

设置填充区域的颜色，支持attributeModifier动态设置属性方法，异常值按照默认值处理。与通用属性foregroundColor同时设置时，后设置的属性生效。

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

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

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

参数：

参数名	类型	必填	说明
value	ResourceColor	是	填充区域颜色。默认值：Color.Black

fillOpacity

fillOpacity(value: number|string|Resource)

设置填充区域透明度，支持attributeModifier动态设置属性方法。取值范围是[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

参数：

参数名	类型	必填	说明
value	number \| string \| Resource	是	填充区域透明度。默认值：1

stroke

stroke(value: ResourceColor)

设置边框颜色，支持attributeModifier动态设置属性方法，不设置时，默认无边框。异常值不会绘制边框。

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

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

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

参数：

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

strokeDashArray

strokeDashArray(value: Array<any>)

设置边框间隙，支持attributeModifier动态设置属性方法。取值范围≥0，异常值按照默认值处理。

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

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

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

参数：

参数名	类型	必填	说明
value	Array<any>	是	边框间隙。默认值：[] 默认单位：vp

strokeDashOffset

strokeDashOffset(value: number|string)

设置边框绘制起点的偏移量，支持attributeModifier动态设置属性方法。异常值按照默认值处理。

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

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

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

参数：

参数名	类型	必填	说明
value	number \| string	是	边框绘制起点的偏移量。默认值：0 默认单位：vp

strokeLineCap

strokeLineCap(value: LineCapStyle)

设置边框端点绘制样式，支持attributeModifier动态设置属性方法。

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

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

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

参数：

参数名	类型	必填	说明
value	LineCapStyle	是	边框端点绘制样式。默认值：LineCapStyle.Butt

strokeLineJoin

strokeLineJoin(value: LineJoinStyle)

设置边框拐角绘制样式，支持attributeModifier动态设置属性方法。

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

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

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

参数：

参数名	类型	必填	说明
value	LineJoinStyle	是	边框拐角绘制样式。默认值：LineJoinStyle.Miter

strokeMiterLimit

strokeMiterLimit(value: number|string)

设置斜接长度与边框宽度比值的极限值，支持attributeModifier动态设置属性方法。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。该属性取值需在strokeLineJoin属性取值LineJoinStyle.Miter时生效。

该属性的合法值范围应当大于等于1.0，当取值范围在[0,1)时按1.0处理，其余异常值按默认值处理。

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

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

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

参数：

参数名	类型	必填	说明
value	number \| string	是	斜接长度与边框宽度比值的极限值。默认值：4

strokeOpacity

strokeOpacity(value: number|string|Resource)

设置边框透明度，支持attributeModifier动态设置属性方法。该属性的取值范围是[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

参数：

参数名	类型	必填	说明
value	number \| string \| Resource	是	边框透明度。默认值：1

strokeWidth

strokeWidth(value: Length)

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

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

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

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

参数：

参数名	类型	必填	说明
value	Length	是	边框宽度，取值范围≥0。默认值：1 默认单位：vp 异常值按照默认值处理。

antiAlias

antiAlias(value: boolean)

设置是否开启抗锯齿效果，支持attributeModifier动态设置属性方法。

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

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

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

参数：

参数名	类型	必填	说明
value	boolean	是	是否开启抗锯齿效果。 true：开启抗锯齿；false：关闭抗锯齿。默认值：true

示例

示例1（组件属性绘制）

使用fill、fillOpacity、stroke、radius属性分别绘制矩形的填充颜色、透明度、边框颜色、圆角。

// xxx.ets
@Entry
@Component
struct RectExample {
  build() {
    Column({ space: 10 }) {
      Text('normal').fontSize(11).fontColor(0xCCCCCC).width('90%')
      // 绘制90% * 50的矩形
      Column({ space: 5 }) {
        Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%')
        // 绘制90% * 50矩形
        Rect({ width: '90%', height: 50 })
          .fill(Color.Pink)
        // 绘制90% * 50的矩形框
        Rect()
          .width('90%')
          .height(50)
          .fillOpacity(0)
          .stroke(Color.Red)
          .strokeWidth(3)

        Text('with rounded corners').fontSize(11).fontColor(0xCCCCCC).width('90%')
        // 绘制90% * 80的矩形, 圆角宽高分别为40、20
        Rect({ width: '90%', height: 80 })
          .radiusHeight(20)
          .radiusWidth(40)
          .fill(Color.Pink)
        // 绘制90% * 80的矩形, 圆角宽高为20
        Rect({ width: '90%', height: 80 })
          .radius(20)
          .fill(Color.Pink)
          .stroke(Color.Transparent)
      }.width('100%').margin({ top: 10 })

      // 绘制90% * 50矩形, 左上圆角宽高40,右上圆角宽高20,右下圆角宽高40,左下圆角宽高20
      Rect({ width: '90%', height: 80 })
        .radius([[40, 40], [20, 20], [40, 40], [20, 20]])
        .fill(Color.Pink)
    }.width('100%').margin({ top: 5 })
  }
}

zh-cn_image_0000001174264386

示例2（绘制渐变色矩形）

通过通用属性linearGradient、clipShape分别绘制渐变色的矩形。

// xxx.ets
@Entry
@Component
struct RectExample {
  build() {
    Column({ space: 10 }) {
      Column()
        .width(100)
        .height(100)
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
        })
        .clipShape(new Rect({ width: 100, height: 100, radius: 40 }))
      Rect()
        .width(100)
        .height(100)
        // 设置矩形填充，如果需要显示背景的渐变色，请设置区域透明度.fillOpacity(0.0)
        .fill(Color.Pink)
        // 设置倒角为40
        .radius(40)
        .stroke(Color.Black)
        // 设置渐变色，仅100*100的矩形区域生效，渐变色的边界不包含倒角
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
        })
    }
  }
}

zh-cn_image_0000001174264386

示例3（使用不同参数类型绘制矩形）

width、height、radius、radiusWidth、radiusHeight等属性分别使用不同的长度类型绘制图形。

// xxx.ets
@Entry
@Component
struct RectExample {
  build() {
    Column({ space: 10 }) {
      // 绘制90% * 50矩形，圆角半径为5
      Rect({ width: '90%', height: '50', radius: '5' })//使用string类型
        .fill(Color.Green)
      // 绘制90% * 50的矩形框，圆角半径为5
      Rect({ width: 200, height: 50, radius: 5 })//使用number类型
        .fillOpacity(0)
        .stroke(Color.Red)
        .strokeWidth(3)
      // 绘制90% * 50矩形, 圆角宽80, 圆角高20
      Rect({
        width: $r('app.string.RectWidth'), //使用Resource类型，需用户自定义
        height: $r('app.string.RectHeight'),
        radius: $r('app.string.RectRadius')
      })
        .radiusWidth($r('app.string.RectRadiusWidth'))
        .radiusHeight($r('app.string.RectRadiusHeight'))
        .fill(Color.Green)
    }.width('100%').margin({ top: 5 })
  }
}

rectDemo3

示例4（使用attributeModifier动态设置Rect组件的属性）

以下示例展示了如何使用attributeModifier动态设置Rect组件的fill、fillOpacity、stroke、strokeDashArray、strokeDashOffset、strokeLineCap、strokeLineJoin、strokeMiterLimit、strokeOpacity、strokeWidth和antiAlias属性。

// xxx.ets
class MyRectModifier implements AttributeModifier<RectAttribute> {
  applyNormalAttribute(instance: RectAttribute): void {
    // 填充颜色#707070，填充透明度0.5，边框颜色#2787D9，边框间隙[20]，向左偏移15，线条两端样式为半圆，拐角样式使用尖角连接路径段，斜接长度与边框宽度比值的极限值为5，边框透明度0.5，边框宽度10，抗锯齿开启
    instance.fill("#707070")
    instance.fillOpacity(0.5)
    instance.stroke("#2787D9")
    instance.strokeDashArray([20])
    instance.strokeDashOffset("15")
    instance.strokeLineCap(LineCapStyle.Round)
    instance.strokeLineJoin(LineJoinStyle.Miter)
    instance.strokeMiterLimit(5)
    instance.strokeOpacity(0.5)
    instance.strokeWidth(10)
    instance.antiAlias(true)
  }
}

@Entry
@Component
struct RectModifierDemo {
  @State modifier: MyRectModifier = new MyRectModifier()

  build() {
    Column() {
      Rect()
        .width(200)
        .height(200)
        .attributeModifier(this.modifier)
        .offset({ x: 20, y: 20 })
    }
  }
}

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ComposeListItem

harmony 鸿蒙ComposeTitleBar

harmony 鸿蒙advanced.Counter

harmony 鸿蒙弹出框 (Dialog)

harmony 鸿蒙DialogV2

0 赞

所属分类： 后端技术
本文标签：
版权声明： 原创文章如转载，请注明本文链接: https://m.seaxiang.com/blog/HmbxhV

harmony 鸿蒙Rect

Rect

子组件

接口

RectOptions¹⁸⁺对象说明

RoundedRectOptions¹⁸⁺对象说明

属性

radiusWidth

radiusHeight

radius

fill

fillOpacity

stroke

strokeDashArray

strokeDashOffset

strokeLineCap

strokeLineJoin

strokeMiterLimit

strokeOpacity

strokeWidth

antiAlias

示例

示例1（组件属性绘制）

示例2（绘制渐变色矩形）

示例3（使用不同参数类型绘制矩形）

示例4（使用attributeModifier动态设置Rect组件的属性）

你可能感兴趣的鸿蒙文章

热门推荐

标签云

最新文章

本文目录

harmony 鸿蒙Rect

Rect

子组件

接口

RectOptions18+对象说明

RoundedRectOptions18+对象说明

属性

radiusWidth

radiusHeight

radius

fill

fillOpacity

stroke

strokeDashArray

strokeDashOffset

strokeLineCap

strokeLineJoin

strokeMiterLimit

strokeOpacity

strokeWidth

antiAlias

示例

示例1（组件属性绘制）

示例2（绘制渐变色矩形）

示例3（使用不同参数类型绘制矩形）

示例4（使用attributeModifier动态设置Rect组件的属性）

你可能感兴趣的鸿蒙文章

热门推荐

标签云

最新文章

本文目录

RectOptions¹⁸⁺对象说明

RoundedRectOptions¹⁸⁺对象说明