[SU] 形状

Source: Dev.to

请提供您希望翻译的完整文本内容，我将按照要求将其翻译为简体中文并保留原有的格式、Markdown 语法以及技术术语。谢谢！

考虑事项

一种形状会采用其容器的框架大小。

• Rectangle.init()
• RoundedRectangle.init(cornerRadius:style:)
• Circle.init()
• Ellipse.init()
• Capsule.init(style:)

形状的初始化器

Rectangle()
RoundedRectangle(cornerRadius: 20, style: .continuous)
Circle()
Ellipse()
Capsule()

Shapes 示例

struct ContentView: View {
    var body: some View {
        HStack {
            Rectangle()
                .frame(width: 100, height: 120)

            RoundedRectangle(cornerRadius: 20, style: .continuous)
                .frame(width: 100, height: 120)

            Circle()
                .frame(width: 100, height: 120)

            Ellipse()
                .frame(width: 100, height: 120)

            Capsule()
                .frame(width: 100, height: 120)
        }
        .padding()
    }
}

Shape 方法

• Shape.fill(_:style:)：使用颜色或渐变填充形状。
• ShapeView.stroke(_:lineWidth:antialiased:)：使用颜色或渐变绘制形状的边框。边框向外扩展 50%，向内扩展 50%。
• ShapeView.stroke(_:style:antialiased:)：使用 StrokeStyle 提供的额外样式信息绘制边框。
• ShapeView.strokeBorder(_:style:antialiased:)：返回一个视图，其内部边距相当于线宽的一半；边框向内扩展 100%。
• ShapeView.strokeBorder(_:lineWidth:antialiased:)：仅指定线宽的变体。

填充和边框示例

struct ContentView: View {
    var body: some View {
        HStack {
            Rectangle()
                .fill(.red)
                .frame(width: 100, height: 120)

            RoundedRectangle(cornerRadius: 20, style: .continuous)
                .fill(.white)
                .stroke(.red, lineWidth: 2)
                .frame(width: 100, height: 120)

            Circle()
                .fill(Color.white)
                .stroke(.red,
                        style: .init(lineWidth: 4,
                                     lineCap: .round,
                                     lineJoin: .miter,
                                     miterLimit: 0,
                                     dash: [10, 10],
                                     dashPhase: 10))
                .frame(width: 100, height: 120)

            Ellipse()
                .fill(Color.white)
                .strokeBorder(.red,
                             style: .init(lineWidth: 4,
                                          lineCap: .round,
                                          lineJoin: .miter,
                                          miterLimit: 0,
                                          dash: [10, 10],
                                          dashPhase: 10))
                .frame(width: 100, height: 120)

            Capsule()
                .fill(Color.white)
                .strokeBorder(.red,
                               style: .init(lineWidth: 4,
                                            lineCap: .round,
                                            lineJoin: .miter,
                                            miterLimit: 0,
                                            dash: [10, 10],
                                            dashPhase: 10))
                .frame(width: 100, height: 120)
        }
        .padding()
    }
}

使用 Shape 作为视图的背景

struct ContentView: View {
    var body: some View {
        VStack {
            Button {
                debugPrint("Hola1")
            } label: {
                Text("Activar 1")
                    .padding()
            }
            .tint(.white)
            .background(
                Capsule()
                    .fill(Color.blue)
            )

            Button {
                debugPrint("Hola2")
            } label: {
                Text("Activar 2")
                    .padding()
            }
            .tint(.white)
            .background(.blue, in: Capsule())
        }
        .padding()
    }
}

参考文献

Gauchat, J. D. (2024). SwiftUI for Masterminds: How to take advantage of Swift and SwiftUI to create insanely great apps for iPhones, iPads, and Macs (第5版). John D Gauchat.