ArkUI 几何图形：圆、线、矩形一画，页面立刻有秩序

这一篇我们把几何图形单独拎出来。Rect、Circle、Ellipse、Line、Polyline、Polygon 都不难，但它们能解决很多“小地方不好看”的问题。

Demo 里先分两类

第一类是基础形状：矩形、圆、椭圆。它们适合做背景块、图标底、状态点。第二类是线和点集：直线、折线、多边形。它们更适合做分隔、走势、徽章和轻量装饰。

这里我们不做状态，也不做交互。原因很简单：几何图形先看清楚自己的尺寸、点位和颜色就够了，别一上来就把页面写成业务案例。

线条的关键是点

Line 用 startPoint 和 endPoint。这两个点一确定，线就出来了。

Line()
  .startPoint([20, 34])
  .endPoint([146, 34])
  .stroke('#0F766E')
  .strokeWidth(4)

Polyline 和 Polygon 都是一组点。区别是：Polyline 不闭合，适合折线；Polygon 会闭合，适合底形和徽章。

Polyline()
  .points([[16, 76], [52, 28], [88, 64], [124, 24], [160, 72]])

点位不用一次写到完美。一般我们先画出来，再一点点调坐标，这比凭空想象要靠谱。

什么时候别用它

如果你要画的是一张复杂插画，或者图形需要很多曲线控制，几何组件会开始吃力。这个时候可以转到 Path 或 Canvas。但做小标记、小趋势、小卡片装饰，几何组件很顺手。

你会把这些几何图形用在什么地方？比如状态点、流程线、还是卡片徽章？这个问题挺适合边做边想。

参考文档： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-geometric-shape-drawing

完整示例代码

文件位置：entry/src/main/ets/pages/arkUI/drawing/ArkUIGeometryDemo.ets

@Entry
@Component
struct ArkUIGeometryDemo {
  @Builder
  sectionTitle(title: string, desc: string) {
    Column({ space: 4 }) {
      Text(title)
        .width('100%')
        .fontSize(16)
        .fontWeight(700)
        .fontColor('#0F172A')

      Text(desc)
        .width('100%')
        .fontSize(13)
        .fontColor('#64748B')
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  label(text: string) {
    Text(text)
      .width('100%')
      .fontSize(12)
      .fontColor('#475569')
      .textAlign(TextAlign.Center)
  }

  build() {
    Scroll() {
      Column({ space: 18 }) {
        Text('ArkUI 几何图形')
          .width('100%')
          .fontSize(24)
          .fontWeight(700)
          .fontColor('#0F172A')

        Text('圆、线、矩形一画，页面立刻有秩序')
          .width('100%')
          .fontSize(22)
          .fontWeight(700)
          .fontColor('#111827')

        Text('这一页只看几何图形本身。它们不负责业务，也不负责复杂交互，适合做分隔、标记、背景、轻量装饰。')
          .width('100%')
          .fontSize(14)
          .fontColor('#64748B')
          .lineHeight(22)

        Column({ space: 12 }) {
          this.sectionTitle('Rect 负责稳，Circle 负责聚焦', '矩形、圆形和椭圆最常见。我们先把尺寸、填充、描边这些基础手感练出来。')

          Row({ space: 12 }) {
            Column({ space: 8 }) {
              Rect({ width: 96, height: 64, radius: 14 })
                .fill('#DBEAFE')
                .stroke('#2563EB')
                .strokeWidth(3)

              this.label('Rect')
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Center)

            Column({ space: 8 }) {
              Circle({ width: 70, height: 70 })
                .fill('#DCFCE7')
                .stroke('#16A34A')
                .strokeWidth(3)

              this.label('Circle')
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Center)

            Column({ space: 8 }) {
              Ellipse({ width: 104, height: 62 })
                .fill('#FEF3C7')
                .stroke('#D97706')
                .strokeWidth(3)

              this.label('Ellipse')
            }
            .layoutWeight(1)
            .alignItems(HorizontalAlign.Center)
          }
          .width('100%')
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#EFF6FF')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('Line 适合做明确分隔', 'Line 的关键是 startPoint 和 endPoint。它不会像 Divider 那样只能横平竖直，斜线也能画。')

          Column({ space: 16 }) {
            Line()
              .width(170)
              .height(40)
              .startPoint([20, 20])
              .endPoint([146, 20])
              .stroke('#0F766E')
              .strokeWidth(4)

            Line()
              .width(170)
              .height(56)
              .startPoint([20, 46])
              .endPoint([146, 8])
              .stroke('#C2410C')
              .strokeWidth(4)
          }
          .width('100%')
          .alignItems(HorizontalAlign.Center)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F0FDF4')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('Polyline 适合画折线趋势', 'Polyline 接收一组点，点和点连起来就是折线。它很适合做小型走势、路线、装饰线。')

          Shape() {
            Polyline()
              .points([[16, 76], [52, 28], [88, 64], [124, 24], [160, 72]])
              .fill('#00000000')
              .stroke('#7C3AED')
              .strokeWidth(5)
          }
          .width('100%')
          .height(100)
          .viewPort({ x: 0, y: 0, width: 176, height: 100 })
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#F5F3FF')
        .borderRadius(8)

        Column({ space: 12 }) {
          this.sectionTitle('Polygon 适合做徽章和底形', 'Polygon 也是一组点，但它会闭合。做角标、徽章、异形底色时，比硬拼多个布局更直接。')

          Row({ space: 12 }) {
            Shape() {
              Polygon()
                .points([[82, 10], [150, 48], [126, 122], [38, 122], [14, 48]])
                .fill('#FFE4E6')
                .stroke('#E11D48')
                .strokeWidth(3)
            }
            .width(164)
            .height(132)
            .viewPort({ x: 0, y: 0, width: 164, height: 132 })

            Text('五边形不用切图。点的位置一改，形状马上跟着变。')
              .layoutWeight(1)
              .fontSize(13)
              .fontColor('#64748B')
              .lineHeight(20)
          }
          .width('100%')
          .alignItems(VerticalAlign.Center)
        }
        .width('100%')
        .padding(16)
        .backgroundColor('#FFF1F2')
        .borderRadius(8)
      }
      .width('100%')
      .padding(20)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#FFFFFF')
  }
}