View — Capsule

https://developer.apple.com/documentation/swiftui/capsule

什么是 Capsule？ #

Capsule 是 SwiftUI 中的一种形状视图（Shape View），它呈现为一个圆角矩形，并在宽高相等时显示为一个完整的椭圆。Capsule 的本质是一个几何形状，它可以用来创建按钮、标签、背景装饰等视图。

特点 #

  1. Capsule 的形状类似于药丸（或圆角矩形）。
  2. 它的圆角半径会根据自身的尺寸进行自动调整（即圆角会始终覆盖整个边缘，呈现为半椭圆）。
  3. Capsule 可以自由调整大小、填充颜色，并支持边框和渐变效果。

基础用法 #

Capsule 的使用非常简单，类似于其他形状视图（例如 Circle 或 Rectangle），可以通过一些修饰符改变其外观，例如尺寸、填充颜色、边框等。

import SwiftUI

struct CapsuleBasicExample: View {
    var body: some View {
        Capsule()
            .frame(width: 200, height: 80) // 设置宽高
            .foregroundColor(.blue)        // 设置填充颜色
    }
}

效果：

  • 一个蓝色的药丸形状元素，宽为 200，高为 80。

1. Capsule 的基础操作 #

1.1 设置边框 #

你可以为 Capsule 添加边框，并调整边框颜色和宽度。

struct CapsuleBorderExample: View {
    var body: some View {
        Capsule()
            .stroke(Color.red, lineWidth: 5) // 添加红色边框，线宽为 5
            .frame(width: 180, height: 60)
    }
}
  • stroke(Color, lineWidth:) 方法为形状添加边框颜色和宽度，形状内部会保持透明。

1.2 填充颜色 #

可以使用 .fill(Color) 方法来填充 Capsule 的内部。

示例：填充颜色

struct CapsuleFillExample: View {
    var body: some View {
        Capsule()
            .fill(Color.green) // 绿色填充
            .frame(width: 200, height: 80)
    }
}

1.3 设置渐变填充 #

结合渐变（LinearGradient、RadialGradient、AngularGradient），你可以为 Capsule 添加很酷的渐变效果。

struct CapsuleGradientExample: View {
    var body: some View {
        Capsule()
            .fill(
                LinearGradient(
                    gradient: Gradient(colors: [.blue, .purple]),  // 渐变颜色
                    startPoint: .leading,                         // 渐变起点
                    endPoint: .trailing                          // 渐变终点
                )
            )
            .frame(width: 250, height: 80)
    }
}

2. Capsule 的常见用途 #

Capsule 是一种非常灵活的形状组件，在按钮、标记或装饰性背景中非常实用。

2.1 创建按钮 #

使用 Capsule 创建一个简单的按钮。

struct CapsuleButtonExample: View {
    var body: some View {
        Button(action: {
            print("Capsule Button Tapped")
        }) {
            Text("Click Me")
                .font(.headline)
                .foregroundColor(.white)
                .padding()
                .frame(width: 200, height: 50)
                .background(Capsule().fill(Color.blue)) // 使用 Capsule 作为按钮背景
        }
    }
}

2.2 添加标签样式 #

Capsule 可以作为标签的背景，用于视觉分组或加标签的样式化设计。

struct CapsuleLabelExample: View {
    var body: some View {
        HStack {
            Text("iOS")
                .padding(.horizontal, 20)
                .padding(.vertical, 8)
                .background(Capsule().fill(Color.green)) // 背景使用 Capsule
                .foregroundColor(.white)

            Text("UI Design")
                .padding(.horizontal, 20)
                .padding(.vertical, 8)
                .background(Capsule().fill(Color.orange))
                .foregroundColor(.white)
        }
        .padding()
    }
}

2.3 进度条 #

借助 Capsule 的形状特性，很容易实现一个自定义进度条。

struct CapsuleProgressBar: View {
    @State private var progress: CGFloat = 0.5 // 进度值（0.0 - 1.0）

    var body: some View {
        VStack {
            ZStack(alignment: .leading) {
                Capsule()
                    .fill(Color.gray.opacity(0.3)) // 背景条
                    .frame(width: 300, height: 20)

                Capsule()
                    .fill(Color.blue) // 前景条
                    .frame(width: 300 * progress, height: 20) // 根据 progress 动态调整宽度
            }
            .padding()

            Button("Increase") {
                withAnimation {
                    if progress < 1.0 {
                        progress += 0.1
                    }
                }
            }
            .padding(.top, 20)
        }
    }
}

3. 动态和交互性 #

你可以通过状态（@State）结合 Capsule 进行动态效果或者交互式设计。

3.1 动态动画 #

改变 Capsule 的外观属性（如大小、颜色），可以实现简单的动态效果。

import SwiftUI

struct CapsuleAnimationExample: View {
    @State private var isExpanded = false

    var body: some View {
        VStack {
            Capsule()
                .fill(isExpanded ? Color.purple : Color.orange) // 动态切换填充颜色
                .frame(width: isExpanded ? 300 : 100, height: 80) // 动态宽度
                .onTapGesture {
                    withAnimation(.easeInOut(duration: 1)) {
                        isExpanded.toggle()
                    }
                }

            Text("Tap the Capsule to Expand")
                .font(.caption)
        }
    }
}

3.2 仿切换按钮（Toggle Switch） #

Capsule 可以用来模拟一个自定义的切换按钮（Toggle Switch）。

struct CapsuleToggleExample: View {
    @State private var isOn = false

    var body: some View {
        ZStack {
            Capsule()
                .fill(isOn ? Color.green : Color.gray.opacity(0.3)) // 根据状态改变颜色
                .frame(width: 200, height: 50)

            HStack {
                Circle()
                    .fill(Color.white)
                    .shadow(radius: 5)
                    .frame(width: 40, height: 40)
                    .offset(x: isOn ? 60 : -60) // 控制圆圈的位置
            }
            .animation(.spring(), value: isOn)
        }
        .onTapGesture {
            isOn.toggle()
        }
        .padding()
    }
}

4. 自定义样式实例 #

通过将多个修饰符组合，可以灵活创建精美的 UI 样式。

4.1 Capsule 的阴影和边框 #

struct CapsuleWithShadowExample: View {
    var body: some View {
        Capsule()
            .fill(Color.yellow)
            .frame(width: 200, height: 80)
            .shadow(color: .gray.opacity(0.5), radius: 10, x: 0, y: 5) // 添加阴影
            .overlay(
                Capsule() // 添加边框
                    .stroke(Color.orange, lineWidth: 3)
            )
    }
}

总结：Capsule 的核心要点 #

  1. 基础功能

    • Capsule 是一种类似药丸的形状，能够根据宽高自适应成为矩形或圆形。
    • 可以通过 .fill() 和 .stroke() 分别控制填充颜色或边框。

  2. 实用场景

    • 用于创建按钮、标签样式、装饰性背景或辅助进度条等功能。
    • 适合与动态数据绑定，增加交互性。

  3. 搭配修饰符

    • background, overlay, shadow 等修饰符可以使 Capsule 更加丰富多样。
    • 常结合渐变、动画和状态变化实现动态效果。

Capsule 是 SwiftUI 中一个非常灵活且实用的视图组件，既可以用于简单的装饰，也可结合动画和状态生成复杂的设计模式。

本文共 1418 字，上次修改于 Jan 8, 2025