圆形进度条 (CircularProgress)

SwiftUI 包，用于创建动画圆形进度条

安装：至少需要 iOS 15、iPadOS 15、macOS 12 和 Xcode 13！

在 Xcode 中，转到 File -> Add Packages... 并粘贴仓库的 URL：https://github.com/ArnavMotwani/CircularProgressSwiftUI.git，然后选择一个版本或主分支

我将更频繁地更新主分支，进行小的更改，而版本只有在发生重大更改时才会增加。

还有一个名为 iOS13 的分支，它支持 iOS 13+ 和 macOS 10_15+

用法

使用 import CircularProgress 将包导入到文件中

示例

以下是如何实现没有自定义的默认视图

import SwiftUI
import CircularProgress

struct ContentView: View {
    @State var count = 0
    let total = 10
    var progress: CGFloat{
        return CGFloat(count)/CGFloat(total)
    }
    var body: some View {
        VStack {
            CircularProgressView(count: count, total: total, progress: progress)
                .padding(50)
            HStack{
                Button("Decrease", action: {self.count -= 1})
                Spacer()
                Button("Increase", action: {self.count += 1})
            }
            .padding(50)
        }
    }
}

填充自定义

进度条可以用线性或角度渐变填充。默认情况下，填充是 LinearGradient(gradient: Gradient(colors: [Color.green, Color.blue]), startPoint: .top, endPoint: .bottom)，但是您可以将自定义线性或角度渐变传递给 fill 参数。

参数

参数	可选？	类型	描述	默认值
count	必需	Int	当前值（中心较大的文本）	-
total	必需	Int	总值（中心较小的文本）	-
progress	必需	CGFloat	进度条的进度	-
fontOne	可选	Font	中心较大文本的字体	Font.system(size: 75, weight: .bold, design: .rounded)
fontTwo	可选	Font	中心较小文本的字体	Font.system(size: 25, weight: .bold, design: .rounded)
colorOne	可选	Color	中心较大文本的颜色	Color.primary
colorTwo	可选	Color	中心较小文本的颜色	Color.gray
fill	可选	LinearGradient 或 AngularGradient	进度条的填充	LinearGradient(gradient: Gradient(colors: [Color.green, Color.blue]), startPoint: .top, endPoint: .bottom)
lineWidth	可选	CGFloat	进度条的宽度	25.0
lineCap	可选	CGLineCap	进度条末端的线帽样式	CGLineCap.round
showText	可选	Bool	选择是否显示中心文本	true
showBottomText	可选	Bool	选择是否显示中心底部文本（如果 showText 为 true）	true

例子

fontOne

CircularProgressView(count: count, total: total, progress: progress, fontOne: Font.title.bold())

fontTwo

CircularProgressView(count: count, total: total, progress: progress, fontTwo: Font.title2)

colorOne

CircularProgressView(count: count, total: total, progress: progress, colorOne: Color.blue)

colorTwo

CircularProgressView(count: count, total: total, progress: progress, colorTwo: Color.blue)

fill

CircularProgressView(count: count, total: total, progress: progress, fill: LinearGradient(gradient: Gradient(colors: [Color.red, Color.blue]), startPoint: .leading, endPoint: .trailing))

lineWidth

CircularProgressView(count: count, total: total, progress: progress, lineWidth: 50)

lineCap

CircularProgressView(count: count, total: total, progress: progress, lineCap: CGLineCap.square)

showText

CircularProgressView(count: count, total: total, progress: progress, showText: false)

showBottomText

CircularProgressView(count: count, total: total, progress: progress, showBottomText: false)
}