当前位置：首页 > news >正文

HarmonyOS 6 ArkUI Rect 矩形组件使用文档

news 2026/6/17 16:11:59

文章目录

- 基础语法
- - 初始化方式
- 核心属性
- 示例场景解析
- - 1. 基础直角矩形（纯色填充）
  - 2. 仅描边矩形（无填充）
  - 3. 统一圆角矩形
  - 4. 椭圆圆角矩形
  - 5. 虚线边框矩形
  - 6. 渐变填充矩形
  - 7. 四个角不同圆角
  - 8. 带透明度矩形
- 完整示例
- 总结

Rect是 HarmonyOS ArkUI 内置基础绘图组件，用于快速绘制直角矩形、圆角矩形、椭圆矩形、异形四角矩形，支持纯色填充、边框描边、虚线边框、渐变填充、透明度设置等样式能力。

基础语法

初始化方式

构造器传参初始化宽高

Rect({width:宽度,height:高度})

链式调用设置宽高

Rect().width().height()

核心属性

属性名称	功能描述	使用示例
width	设置矩形宽度	`.width(220)`
height	设置矩形高度	`.height(80)`
radius	设置统一圆角 / 四角独立圆角	`.radius(20)`/`.radius([[左上],[右上],[右下],[左下]])`
radiusWidth	圆角水平半径，配合 radiusHeight 实现椭圆圆角	`.radiusWidth(110)`
radiusHeight	圆角垂直半径	`.radiusHeight(40)`
fill	设置矩形内部填充色	`.fill('#409EFF')`
fillOpacity	填充颜色透明度，取值 0~1	`.fillOpacity(0.6)`
stroke	设置矩形边框描边颜色	`.stroke('#67C23A')`
strokeWidth	设置边框宽度	`.strokeWidth(3)`
strokeDashArray	配置虚线边框，格式`[实线长度, 间隔长度]`	`.strokeDashArray([10, 5])`
linearGradient	配置线性渐变填充，覆盖纯色fill	`.linearGradient({angle,colors})`

示例场景解析

1. 基础直角矩形（纯色填充）

Rect({width:220,height:80}).fill('#409EFF')

通过构造器直接定义宽高，纯色填充默认直角矩形，适用于基础色块、背景占位。

2. 仅描边矩形（无填充）

Rect().width(220).height(80).fillOpacity(0).stroke('#67C23A').strokeWidth(3)

设置填充透明度为0，隐藏内部填充，只保留边框线条，实现镂空矩形边框效果。

3. 统一圆角矩形

Rect().width(220).height(80).radius(20).fill('#E6A23C')

通过radius传入单一数值，四个角统一为相同圆角，常用于卡片、按钮背景。

4. 椭圆圆角矩形

Rect().width(220).height(80).radiusWidth(110).radiusHeight(40).fill('#F56C6C')

分别设置水平、垂直圆角半径，生成椭圆弧度圆角，可实现胶囊形、跑道形样式。

5. 虚线边框矩形

Rect().width(220).height(80).fillOpacity(0).stroke('#9B59B6').strokeWidth(2).strokeDashArray([10,5])

镂空样式搭配strokeDashArray，实现虚线边框，适用于草稿框、可选区域装饰。

6. 渐变填充矩形

Rect().width(220).height(80).radius(12).linearGradient({angle:90,colors:[['#1E88E5',0.0],['#9C27B0',1.0]]})

使用线性渐变替代纯色填充，支持角度和多色过渡，提升视觉层次感，渐变优先级高于 fill 纯色。

7. 四个角不同圆角

Rect().width(220).height(80).radius([[10,10],[30,30],[10,10],[30,30]]).fill('#1ABC9C')

radius 传入二维数组，依次设置左上、右上、右下、左下四个角的独立圆角，适配异形UI设计。

8. 带透明度矩形

Rect().width(220).height(80).radius(15).fill('#FF5E7C').fillOpacity(0.6).stroke('#fff').strokeWidth(2)

结合圆角、填充透明度与白色边框，实现半透明遮罩、悬浮卡片效果。

完整示例

@Entry@Componentstruct RectDemo{build(){Scroll(){Column({space:25}){// 1. 基础直角矩形（纯色填充）Text('1. 基础直角矩形').fontSize(14).fontColor('#666')Rect({width:220,height:80}).fill('#409EFF')// 2. 仅描边矩形（无填充）Text('2. 仅描边矩形').fontSize(14).fontColor('#666')Rect().width(220).height(80).fillOpacity(0).stroke('#67C23A').strokeWidth(3)// 3. 统一圆角矩形Text('3. 统一圆角矩形').fontSize(14).fontColor('#666')Rect().width(220).height(80).radius(20).fill('#E6A23C')// 4. 椭圆圆角（radiusWidth / radiusHeight）Text('4. 椭圆圆角矩形').fontSize(14).fontColor('#666')Rect().width(220).height(80).radiusWidth(110).radiusHeight(40).fill('#F56C6C')// 5. 虚线边框矩形Text('5. 虚线边框矩形').fontSize(14).fontColor('#666')Rect().width(220).height(80).fillOpacity(0).stroke('#9B59B6').strokeWidth(2).strokeDashArray([10,5])// 6. 渐变填充矩形Text('6. 渐变填充矩形').fontSize(14).fontColor('#666')Rect().width(220).height(80).radius(12).linearGradient({angle:90,colors:[['#1E88E5',0.0],['#9C27B0',1.0]]})// 7. 四个角不同圆角Text('7. 自定义四角圆角').fontSize(14).fontColor('#666')Rect().width(220).height(80).radius([[10,10],[30,30],[10,10],[30,30]]).fill('#1ABC9C')// 8. 带透明度矩形Text('8. 半透明矩形').fontSize(14).fontColor('#666')Rect().width(220).height(80).radius(15).fill('#FF5E7C').fillOpacity(0.6).stroke('#fff').strokeWidth(2)}.width('100%').padding(20).backgroundColor('#F5F7FA')}}}