harmony 鸿蒙Rect

2025-06-12
浏览 (4)

Rect

The Rect component is used to draw a rectangle.

NOTE

This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

Child Components

Not supported

APIs

Rect(options?: RectOptions|RoundedRectOptions)

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
options	RectOptions \|RoundedRectOptions	No	Options for drawing a rectangle.

RectOptions¹⁸⁺

Describes the options for drawing a rectangle.

Widget capability: This API can be used in ArkTS widgets since API version 18.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Description
width	string \|number	No	Width. The value must be greater than or equal to 0. Default value: 0 Default unit: vp An invalid value is handled as the default value.
height	string \|number	No	Height. The value must be greater than or equal to 0. Default value: 0 Default unit: vp An invalid value is handled as the default value.
radius	string \|number \|Array<string \|number>	No	Radius of the rounded corner. You can set separate radii for the four rounded corners. The value must be greater than or equal to 0. This property takes precedence over radiusWidth and radiusHeight when used together. Default value: 0 Default unit: vp An invalid value is handled as the default value.

RoundedRectOptions¹⁸⁺

Describes the options for drawing a rounded rectangle.

Widget capability: This API can be used in ArkTS widgets since API version 18.

Atomic service API: This API can be used in atomic services since API version 18.

System capability: SystemCapability.ArkUI.ArkUI.Full

Name	Type	Mandatory	Description
width	string \|number	No	Width. The value must be greater than or equal to 0. Default value: 0 Default unit: vp An invalid value is handled as the default value.
height	string \|number	No	Height. The value must be greater than or equal to 0. Default value: 0 Default unit: vp An invalid value is handled as the default value.
radiusWidth	string \|number	No	Width of the rounded corner. The value must be greater than or equal to 0. Default value: 0 Default unit: vp An invalid value is handled as the default value.
radiusHeight	string \|number	No	Height of the rounded corner. The value must be greater than or equal to 0. Default value: 0 Default unit: vp An invalid value is handled as the default value.

Attributes

In addition to the universal attributes, the following attributes are supported.

radiusWidth

radiusWidth(value: number|string)

Sets the width of the rounded corner. If not set, the height of the rounded corner is the same as its width. An invalid value is handled as the default value.

Widget capability: This API can be used in ArkTS widgets since API version 7.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number \|string	Yes	Width of the rounded corner. The value must be greater than or equal to 0. Default value: 0 Default unit: vp

radiusHeight

radiusHeight(value: number|string)

Height of the rounded corner. If not set, the width of the rounded corner is the same as its height. An invalid value is handled as the default value.

Widget capability: This API can be used in ArkTS widgets since API version 7.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number \|string	Yes	Height of the rounded corner. The value must be greater than or equal to 0. Default value: 0 Default unit: vp

radius

radius(value: number|string|Array<string|number>)

Sets the radius of the rounded corner. The value must be greater than or equal to 0. An invalid value is handled as the default value.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number \|string \|Array<string \|number>	Yes	Radius of the rounded corner. You can set separate radiuses for the four rounded corners. Default value: 0 Default unit: vp

fill

fill(value: ResourceColor)

Sets the color of the fill area. An invalid value is handled as the default value. If this attribute and the universal attribute foregroundColor are both set, whichever is set later takes effect.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceColor	Yes	Color of the fill area. Default value: Color.Black

fillOpacity

fillOpacity(value: number|string|Resource)

Opacity of the fill area. The value range is [0.0, 1.0]. A value less than 0.0 evaluates to the value 0.0. A value greater than 1.0 evaluates to the value 1.0. Any other value evaluates to the value 1.0.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number \|string \|Resource	Yes	Opacity of the fill area. Default value: 1

stroke

stroke(value: ResourceColor)

Stroke color. If this attribute is not set, the component does not have any stroke. If the value is invalid, no stroke will be drawn.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceColor	Yes	Stroke color.

strokeDashArray

strokeDashArray(value: Array<any>)

Sets the stroke dashes. The value must be greater than or equal to 0. Invalid values are treated as the default value.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Array<any>	Yes	Stroke dashes. Default value: [] Default unit: vp

strokeDashOffset

strokeDashOffset(value: number|string)

Sets the offset of the start point for drawing the stroke. An invalid value is handled as the default value.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number \|string	Yes	Offset of the start point for drawing the stroke. Default value: 0 Default unit: vp

strokeLineCap

strokeLineCap(value: LineCapStyle)

Sets the cap style of the stroke.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	LineCapStyle	Yes	Cap style of the stroke. Default value: LineCapStyle.Butt

strokeLineJoin

strokeLineJoin(value: LineJoinStyle)

Sets the join style of the stroke.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	LineJoinStyle	Yes	Join style of the stroke. Default value: LineJoinStyle.Miter

strokeMiterLimit

strokeMiterLimit(value: number|string)

Sets the limit on the ratio of the miter length to the value of strokeWidth used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter. This attribute works only when strokeLineJoin is set to LineJoinStyle.Miter.

The value must be greater than or equal to 1.0. If the value is in the [0, 1) range, the value 1.0 will be used. In other cases, the default value will be used.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number \|string	Yes	Limit on the ratio of the miter length to the value of strokeWidth used to draw a miter join. Default value: 4

strokeOpacity

strokeOpacity(value: number|string|Resource)

Sets the stroke opacity. The value range is [0.0, 1.0]. A value less than 0.0 is treated as 0.0. A value greater than 1.0 is treated as 1.0. Any other value is treated as 1.0.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number \|string \|Resource	Yes	Stroke opacity. Default value: 1

strokeWidth

strokeWidth(value: Length)

Sets the stroke width. If of the string type, this parameter cannot be set in percentage. A percentage is processed as 1 px.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	Length	Yes	Stroke width. The value must be greater than or equal to 0. Default value: 1 Default unit: vp An invalid value is handled as the default value.

antiAlias

antiAlias(value: boolean)

Specifies whether anti-aliasing is enabled.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	boolean	Yes	Whether anti-aliasing is enabled. true: Anti-aliasing is enabled. false: Anti-aliasing is disabled. Default value: true

Example

Example 1: Drawing Rectangles

This example demonstrates how to use fill, fillOpacity, stroke, and radius to draw rectangles with specific fill colors, opacity, stroke colors, and rounded corners.

// xxx.ets
@Entry
@Component
struct RectExample {
  build() {
    Column({ space: 10 }) {
      Text('normal').fontSize(11).fontColor(0xCCCCCC).width('90%')
      // Draw a 90% x 50 rectangle.
      Column({ space: 5 }) {
        Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%')
        // Draw a 90% x 50 rectangle.
        Rect({ width: '90%', height: 50 })
          .fill(Color.Pink)
        // Draw a 90% x 50 rectangle.
        Rect()
          .width('90%')
          .height(50)
          .fillOpacity(0)
          .stroke(Color.Red)
          .strokeWidth(3)

        Text('with rounded corners').fontSize(11).fontColor(0xCCCCCC).width('90%')
        // Draw a 90% x 80 rectangle, with the width and height of its rounded corners being 40 and 20, respectively.
        Rect({ width: '90%', height: 80 })
          .radiusHeight(20)
          .radiusWidth(40)
          .fill(Color.Pink)
        // Draw a 90% x 80 rectangle, with the width and height of its rounded corners being both 20.
        Rect({ width: '90%', height: 80 })
          .radius(20)
          .fill(Color.Pink)
          .stroke(Color.Transparent)
      }.width('100%').margin({ top: 10 })

      // Draw a 90% x 50 rectangle, with the width and height of its rounded corners as follows: 40 for the upper left rounded corner, 20 for the upper right rounded corner, 40 for the lower right rounded corner, and 20 for the lower left rounded corner.
      Rect({ width: '90%', height: 80 })
        .radius([[40, 40], [20, 20], [40, 40], [20, 20]])
        .fill(Color.Pink)
    }.width('100%').margin({ top: 5 })
  }
}

en-us_image_0000001174264386

Example 2: Drawing a Gradient Rectangle

This example demonstrates how to use the universal attributes linearGradient and clipShape to draw a gradient rectangle.

// 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)
        // Set the color of the fill area. To display the color gradient of the background, set .fillOpacity(0.0).
        .fill(Color.Pink)
        // Set the radius of the rounded corner to 40.
        .radius(40)
        .stroke(Color.Black)
        // Set the color gradient. It takes effect only for a 100 x 100 rectangular area. The boundary of the gradient does not contain rounded corners.
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
        })
    }
  }
}

en-us_image_0000001174264386

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ComposeListItem

harmony 鸿蒙ComposeTitleBar

harmony 鸿蒙advanced.Counter

harmony 鸿蒙Dialog Box (Dialog)

harmony 鸿蒙DialogV2

harmony 鸿蒙DownloadFileButton

0 赞

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

harmony 鸿蒙Rect

Rect

Child Components

APIs

RectOptions¹⁸⁺

RoundedRectOptions¹⁸⁺

Attributes

radiusWidth

radiusHeight

radius

fill

fillOpacity

stroke

strokeDashArray

strokeDashOffset

strokeLineCap

strokeLineJoin

strokeMiterLimit

strokeOpacity

strokeWidth

antiAlias

Example

Example 1: Drawing Rectangles

Example 2: Drawing a Gradient Rectangle

你可能感兴趣的鸿蒙文章

热门推荐

标签云

最新文章

本文目录

harmony 鸿蒙Rect

Rect

Child Components

APIs

RectOptions18+

RoundedRectOptions18+

Attributes

radiusWidth

radiusHeight

radius

fill

fillOpacity

stroke

strokeDashArray

strokeDashOffset

strokeLineCap

strokeLineJoin

strokeMiterLimit

strokeOpacity

strokeWidth

antiAlias

Example

Example 1: Drawing Rectangles

Example 2: Drawing a Gradient Rectangle

你可能感兴趣的鸿蒙文章

热门推荐

标签云

最新文章

本文目录

RectOptions¹⁸⁺

RoundedRectOptions¹⁸⁺