SwiftUI 简明教程之指示器

ProgressView

ProgressView 有两种呈现形式，一种是菊花样式，另一种是进度条样式，二者分别对应 ProgressViewStyle 中的 CircularProgressViewStyle 和 LinearProgressViewStyle。

如果我们没有通过绑定的浮点类型的值动态更新 ProgressView 的 value 值，那么它的默认样式就是 CircularProgressViewStyle，即菊花样式。比如：

ProgressView()

或者：

ProgressView("加载中...")

我们还可以通过

.foregroundColor(.blue)

.progressViewStyle(CircularProgressViewStyle(tint: .orange))

而要修改进度条的颜色，则可以通过

.accentColor(.orange)

进度条样式的实现也比较简单，当然我们也可以自定义 ProgressViewStyle。

如下是示例所示的全部代码，供参考：

struct IndicatorsView: View {
@State private var progress = 0.0 {
didSet {
if progress == 100 {
title = "下载完成！"
systemImgName = "checkmark.seal.fill"
} else {
title = "下载ing..."
systemImgName = "square.and.arrow.down"
}
}
}
@State private var title = "下载ing..."
@State private var systemImgName = "square.and.arrow.down"
/// 定时器
private let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()

var body: some View {
List {
// SectionHeaderView 是笔者自定义的视图控件
Section(header: SectionHeaderView(chapter: "ProgressView", section: nil)) {
ProgressView().centerHorizontal() // .centerHorizontal() 是笔者自定义的修饰器

ProgressView("加载中...").progressViewStyle(CircularProgressViewStyle(tint: .orange))
.centerHorizontal()
.footnote(".progressViewStyle(CircularProgressViewStyle(tint: .orange))")

ProgressView(title, value: progress, total: 100)
.foregroundColor(.blue)
.accentColor(.orange)
.footnote(".foregroundColor(.blue)\n.accentColor(.orange)")

ProgressView(value: progress, total: 100) {
HStack {
Image(systemName: systemImgName)
Text(title)
}
.foregroundColor(.blue)
} currentValueLabel: {
Text("\(Int(progress))%").foregroundColor(.orange)
}
.footnote("自定义视图")
}
.onReceive(timer) { _ in // 接收定时器更新事件
if progress < 100 {
progress = min(100, progress + Double(arc4random_uniform(5)+1))
}
}
}
.listStyle(InsetGroupedListStyle())
}
}