#3 Creating Shapes in SwiftUI

lancoff2025-11-29 14:35

示例程序

swift 复制代码

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))`

性能与可访问性

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