SwiftUI 簡明教程之指示器

• 2021 年 5 月 11 日
• 筆記
• iOS, SwiftUI

本文為 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 查看更多內容。