Shape 是 HarmonyOS ArkUI 提供的绘图容器组件，作为通用画布载体，可内部嵌套 Rect、Circle、Ellipse、Path、Polyline、Polygon 等所有基础绘图子组件`，支持多图形叠加、图层组合、独立定位、整体样式统一配置，是实现复杂自定义复合图形、UI 装饰图形、自定义图标绘制的核心容器。

组件核心

1. 容器特性：Shape 为画布容器，内部可承载各类基础绘图子组件，支持多层图形叠加绘制；
2. 尺寸约束：必须显式设置 width、height 定义画布大小，否则内部图形无法正常渲染；
3. 图层规则：容器内代码先定义的图形处于底层，后定义的图形叠加在上层；
4. 定位能力：子组件可通过 offset({x,y}) 实现画布内任意偏移定位；
5. 样式复用：支持为 Shape 容器统一设置渐变、描边、填充等样式，作用于整体画布；
6. 抗锯齿能力：默认开启图形抗锯齿，保证绘制边缘平滑。

核心属性

属性名称	功能描述	应用场景
width	设置 Shape 画布宽度	定义绘图容器可视区域宽度
height	设置 Shape 画布高度	定义绘图容器可视区域高度
offset	子组件偏移属性	实现内部图形在画布内自定义位置
fill	画布背景填充色	设置 Shape 整体背景颜色
stroke	画布边框颜色	为绘图容器添加外边框
strokeWidth	画布边框宽度	控制边框线条粗细
strokeDashArray	虚线边框配置	实现容器虚线边框效果
linearGradient	线性渐变	为整个 Shape 画布设置渐变填充

代码场景解析

1. Shape 容器嵌套基础矩形

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

基础用法：Shape 作为画布承载 Rect 矩形组件，固定画布宽高，实现单一图形托管绘制，适配基础色块展示场景。

2. Shape 容器嵌套圆形

Shape() {
  Circle({ width: 80, height: 80 })
    .fill('#67C23A')
}
.width(80)
.height(80)

将圆形图形放入 Shape 容器中，由容器统一约束绘制区域，保持图形居中适配画布。

3. Shape 容器嵌套椭圆

Shape() {
  Ellipse({ width: 180, height: 80 })
    .fill('#E6A23C')
}
.width(180)
.height(80)

通过 Shape 承载椭圆组件，依托容器尺寸限制图形展示范围，实现标准椭圆绘制。

4. 矩形与圆形组合复合图形

Shape() {
  Rect({ width: 200, height: 100 })
    .fillOpacity(0)
    .stroke('#F56C6C')
    .strokeWidth(3)
  Circle({ width: 40, height: 40 })
    .fill('#F56C6C')
    .offset({ x: 80, y: 30 })
}
.width(200)
.height(100)

利用 Shape 多元素叠加特性，底层绘制镂空矩形，上层通过 offset 偏移定位小圆，实现自定义组合图形。

5. Shape 容器嵌套 Path 路径

Shape() {
  Path()
    .commands('M0 40 L100 0 L200 40 Z')
    .fill('#9B59B6')
}
.width(200)
.height(80)

承载 Path 路径组件，通过 SVG 路径命令绘制自定义三角形，由 Shape 限定画布范围，约束图形显示区域。

6. Shape 容器嵌套多边形

Shape() {
  Polygon()
    .points([[100, 0], [0, 80], [200, 80]])
    .fill('#1ABC9C')
}
.width(200)
.height(80)

托管 Polygon 多边形组件，依托坐标顶点绘制三角形，Shape 画布保证图形完整展示不被裁剪。

7. Shape 整体渐变+子组件虚线边框

Shape() {
  Rect({ width: 220, height: 80 })
    .fillOpacity(0)
    .stroke('#FF5E7C')
    .strokeWidth(2)
    .strokeDashArray([10, 5])
}
.width(220)
.height(80)
.linearGradient({
  angle: 90,
  colors: [['#FFE0E0', 0], ['#FFC0C0', 1]]
})

同时结合容器级渐变样式与子组件虚线边框样式，实现画布背景渐变、内部图形虚线描边的复合视觉效果。

8. 多元素复杂叠加图形

Shape() {
  // 底层矩形
  Rect({ width: 220, height: 100 })
    .fill('#E5F6FF')
    .radius(15)
  // 上层路径
  Path()
    .commands('M20 50 L110 20 L200 50 Z')
    .fill('#1E88E5')
  // 小圆点
  Circle({ width: 20, height: 20 })
    .fill('#fff')
    .offset({ x: 100, y: 40 })
}
.width(220)
.height(100)

多层级叠加绘制：底层圆角矩形、中层三角路径、顶层偏移小圆点，依托 Shape 图层特性，实现高度自定义的复杂UI装饰图形。

完整源码

@Entry
@Component
struct ShapeDemo {
  build() {
    Scroll() {
      Column({ space: 25 }) {

        // 1. 基础 Shape + 矩形
        Text('1. Shape 容器 + 矩形').fontSize(14).fontColor('#666')
        Shape() {
          Rect({ width: 220, height: 80 })
            .fill('#409EFF')
        }
        .width(220)
        .height(80)

        // 2. Shape + 圆形
        Text('2. Shape 容器 + 圆形').fontSize(14).fontColor('#666')
        Shape() {
          Circle({ width: 80, height: 80 })
            .fill('#67C23A')
        }
        .width(80)
        .height(80)

        // 3. Shape + 椭圆
        Text('3. Shape 容器 + 椭圆').fontSize(14).fontColor('#666')
        Shape() {
          Ellipse({ width: 180, height: 80 })
            .fill('#E6A23C')
        }
        .width(180)
        .height(80)

        // 4. Shape 组合图形（矩形 + 圆形）
        Text('4. 组合图形：矩形 + 圆形').fontSize(14).fontColor('#666')
        Shape() {
          Rect({ width: 200, height: 100 })
            .fillOpacity(0)
            .stroke('#F56C6C')
            .strokeWidth(3)
          Circle({ width: 40, height: 40 })
            .fill('#F56C6C')
            .offset({ x: 80, y: 30 })
        }
        .width(200)
        .height(100)

        // 5. Shape + 路径 Path
        Text('5. Shape 容器 + Path 路径').fontSize(14).fontColor('#666')
        Shape() {
          Path()
            .commands('M0 40 L100 0 L200 40 Z')
            .fill('#9B59B6')
        }
        .width(200)
        .height(80)

        // 6. Shape + 多边形
        Text('6. Shape 容器 + 多边形').fontSize(14).fontColor('#666')
        Shape() {
          Polygon()
            .points([[100, 0], [0, 80], [200, 80]])
            .fill('#1ABC9C')
        }
        .width(200)
        .height(80)

        // 7. Shape + 渐变 + 虚线
        Text('7. Shape 渐变 + 虚线边框').fontSize(14).fontColor('#666')
        Shape() {
          Rect({ width: 220, height: 80 })
            .fillOpacity(0)
            .stroke('#FF5E7C')
            .strokeWidth(2)
            .strokeDashArray([10, 5])
        }
        .width(220)
        .height(80)
        .linearGradient({
          angle: 90,
          colors: [['#FFE0E0', 0], ['#FFC0C0', 1]]
        })

        // 8. 复杂组合图形（多元素叠加）
        Text('8. 复杂组合图形').fontSize(14).fontColor('#666')
        Shape() {
          // 底层矩形
          Rect({ width: 220, height: 100 })
            .fill('#E5F6FF')
            .radius(15)
          // 上层路径
          Path()
            .commands('M20 50 L110 20 L200 50 Z')
            .fill('#1E88E5')
          // 小圆点
          Circle({ width: 20, height: 20 })
            .fill('#fff')
            .offset({ x: 100, y: 40 })
        }
        .width(220)
        .height(100)

      }
      .width('100%')
      .padding(20)
      .backgroundColor('#F5F7FA')
    }
  }
}

运行效果如图：

总结

1. 画布尺寸必设：Shape 必须配置 width 和 height，默认无尺寸，未设置时内部所有绘图子组件均无法显示；
2. 图层顺序规则：容器内代码从上到下依次渲染，先编写的图形在下层，后编写的图形在上层；
3. 子组件定位：内部图形需要错位布局时，可使用 offset 属性设置 x、y 偏移量，实现精准定位；
4. 样式作用范围：Shape 容器设置的渐变、填充样式作用于整个画布，子组件样式仅作用于自身图形；
5. 适配规范：所有属性均为官方稳定 API，无废弃属性，兼容各版本 HarmonyOS 系统；
6. 图形裁剪：子图形坐标超出 Shape 画布宽高范围的部分，会被自动裁剪隐藏。

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力