文章目录基础语法初始化方式核心属性示例场景解析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)结合圆角、填充透明度与白色边框实现半透明遮罩、悬浮卡片效果。完整示例EntryComponentstruct 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 / radiusHeightText(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)}}}运行效果如图总结宽高必设Rect 必须指定width、height否则无法渲染显示图形。圆角两种模式单一数值为四角统一圆角二维数组可单独控制四个角圆角大小。椭圆圆角需同时设置radiusWidth和radiusHeight才会生效。样式优先级linearGradient渐变 fill纯色填充。镂空实现设置fillOpacity(0)即可只显示边框、不填充内部颜色。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力