ProgressView
一种是菊花样式,另一种是进度条样式,二者分别对应 ProgressViewStyle 中的 circular 和 linear。
struct ContentView: 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 {
Section {
ProgressView()
ProgressView("加载中...")
.progressViewStyle(CircularProgressViewStyle(tint: .orange))
ProgressView(title, value: progress, total: 100)
.foregroundColor(.blue)
.accentColor(.orange)
ProgressView(value: progress, total: 100) {
HStack {
Image(systemName: systemImgName)
Text(title)
}
.foregroundColor(.blue)
} currentValueLabel: {
Text("\(Int(progress))%").foregroundColor(.orange)
}
} header: {
// header View
}
.onReceive(timer) { _ in // 接收定时器更新事件
if progress < 100 {
progress = min(100, progress + Double(arc4random_uniform(5)+1))
}
}
}
.listStyle(.insetGrouped)
}
}