SwiftUI - ProgressView

690 阅读1分钟

ProgressView

一种是菊花样式,另一种是进度条样式,二者分别对应 ProgressViewStyle 中的 circular 和 linear

iShot_2022-12-09_14.24.37.gif

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)
    }
}