圆形进度条 (CircularProgress)

SwiftUI 中简单而灵活的圆形进度条视图

CircularProgress 是 SwiftUI 中圆形进度条视图的一个小巧且灵活的实现。它允许你向你的应用程序添加美观且可定制的圆形进度加载器。

亮点

简单只需将 CircularProgress() 添加到你的视图层级结构中，你就能得到一个平滑且可动画的进度条视图。
灵活实现允许你定义自定义样式和圆形内的内容。
轻量级 该包很小，不会给 SPM 解析过程带来任何开销，没有第三方依赖项。

用法

带有默认样式的圆形进度条

struct SimpleExampleView: View {
    @State
    var progress: Double = 0
    let lineWidth: CGFloat
    
    var body: some View {
        CircularProgress(lineWidth: lineWidth, state: progress)
            .onTimer { progress += 0.34 }
    }
}

带有交互式样式的圆形进度条

struct InteractiveExampleView: View {
    @State
    var progress = CircularProgressState.inProgress(0)
    let lineWidth: CGFloat
    
    var body: some View {
        CircularProgress(lineWidth: lineWidth, state: progress)
            .progressStyle(.interactive)
            .onTimer {
                progress = if progress.rawValue + 0.34 >= 1 { Bool.random() ? .succeeded : .failed }
                else { .inProgress(progress.rawValue + 0.34) }
            }
    }
}

带有旋转样式的圆形进度条

struct RotatingExampleView: View {
    @State
    var progress: Double = 0
    let lineWidth: CGFloat
    
    var body: some View {
        CircularProgress(lineWidth: lineWidth, state: progress)
            .progressStyle(.rotating)
            .onTimer(1) { progress += 0.25 }
    }
}

带有自定义样式的圆形进度条

struct CustomExampleView: View {
    @State
    var progress: CustomState = .inProgress(0)
    let lineWidth: CGFloat
    
    var body: some View {
        CircularProgress(lineWidth: lineWidth, state: progress)
            .progressStyle(.custom)
            .onTimer(0.5) {
                progress = if progress.rawValue + 0.34 >= 1 { .finished }
                else { .inProgress(progress.rawValue + 0.34) }
            }
    }
}

enum CustomState {
    case inProgress(Double)
    case finished
}

extension CustomState: RawRepresentable {
    public var rawValue: Double {
        switch self {
        case let .inProgress(progress): progress
        case .finished: 1.0 }
    }
    
    public init?(rawValue: Double) {
        self = .inProgress(rawValue)
    }
}

struct CustomCircularProgressStyle: CircularProgressStyle {
    func makeBody(configuration: CircularProgressStyleConfiguration<CustomState>) -> some View {
        CircularProgress(
            lineWidth: configuration.lineWidth,
            state: configuration.state,
            color: { state in
                switch state {
                case .finished: .pink
                case .inProgress: .white }
            }
        ) { state in
            switch state {
            case .finished: Text("🎉").font(.largeTitle).bold()
            case .inProgress: Text(String("\(state.rawValue * 100)")) }
            
        }
    }
}

extension CircularProgressStyle where Self == CustomCircularProgressStyle {
    static var custom: CustomCircularProgressStyle { CustomCircularProgressStyle() }
}

Sources/Examples 中示例的演示

circular_progress_examples.mov

要求

iOS 14.0+
macOS 11.0+
watchOS 7.0+
tvOS 14.0+

安装

SwiftPM

.package(url: "https://github.com/aleksproger/circular-progress.git", .upToNextMajor(from: "1.1.0"))

Bazel

git_repository(
    name = "circular-progress",
    branch = "1.1.0",
    remote = "https://github.com/aleksproger/circular-progress.git",
    repo_mapping = {},
)