#3 Creating Shapes in SwiftUI

86 阅读1分钟

示例程序

struct ShapesBootcamp: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 4)
            .stroke(
                Color.purple,
                style: StrokeStyle(lineWidth: 4, dash: [10, 5])
            )
            .frame(width: 200, height: 100)
    }
}

形状类型

类型初始化几何描述
Circle()无参外接最小圆
Ellipse()无参外接椭圆
Capsule(style:).circular / .continuous两端半圆
Rectangle()无参无圆角
RoundedRectangle(cornerRadius:style:)半径 + 风格四角等半径

所有形状默认撑满父视图提案尺寸;使用 .frame() 可强制固定宽高。

视觉修饰符

修饰符功能示例备注
.fill(_:)内部填充.fill(Color.blue)支持纯色、渐变
.stroke(_:lineWidth:)等宽描边.stroke(.red, lineWidth: 2)默认线帽 butt
.stroke(_:style:)高级描边.stroke(.orange, style: StrokeStyle(...))虚线、线帽、线连接
.trim(from:to:)路径裁剪.trim(from: 0.2, to: 0.8)0–1 比例
.frame(width:height:alignment:)固定尺寸.frame(200, 100)形状无固有尺寸
.scale(_:anchor:)缩放.scale(1.2)锚点默认 center
.rotation(_:anchor:)旋转.rotation(.degrees(45))同上
.offset(x:y:)平移.offset(x: 10)仅视觉偏移
.opacity(_:)透明度.opacity(0.5)0–1
.blendMode(_:)混合模式.blendMode(.multiply)需同级 ZStack
.mask(_:)遮罩.mask(Circle())支持任意 View
.shadow(color:radius:x:y:)阴影.shadow(.black, 4, x: 2, y: 2)先阴影后形状
.accessibilityHidden(true)隐藏朗读见上纯装饰时推荐

任务速查表

需求片段
圆角按钮背景RoundedRectangle(cornerRadius: 12).fill(.accent)
环形进度Circle().trim(from: 0, to: progress).stroke(.blue, lineWidth: 4)
虚线边框Rectangle().stroke(style: StrokeStyle(lineWidth: 1, dash: [5]))
胶囊标签Capsule().fill(Color.gray.opacity(0.2))

性能与可访问性

  1. 矢量路径自动适配 @2x/@3x,无位图失真。
  2. 支持动态颜色与「降低透明度」辅助选项。
  3. 动画复杂时启用 .drawingGroup() 以 Metal 合成,降低 CPU 负担。
  4. 纯装饰形状请附加 .accessibilityHidden(true),避免 VoiceOver 读出「图像」。