本文為 Eul 樣章,如果您喜歡,請移步 AppStore/Eul 檢視更多內容。
Eul 是一款 SwiftUI & Combine 教程 App(iOS、macOS),以文章(文字、圖片、程式碼)配合真機示例(Xcode 12+、iOS 14+,macOS 11+)的形式呈現給讀者。筆者意在儘可能使用簡潔明瞭的語言闡述 SwiftUI & Combine 相關的知識,使讀者能快速掌握並在 iOS 開發中實踐。
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())
}
}
本文為 Eul 樣章,如果您喜歡,請移步 AppStore/Eul 檢視更多內容。