SwiftUI里ProgressView用法示例

1,104 阅读1分钟
//
//  ContentView.swift
//  SliderDemo
//
//  Created by dacaiguoguo on 2021/7/6.
//

import SwiftUI


//### Styling Progress Views
//
//You can customize the appearance and interaction of progress views by
//creating styles that conform to the ``ProgressViewStyle`` protocol. To set a
//specific style for all progress view instances within a view, use the
//``View/progressViewStyle(_:)`` modifier. In the following example, a custom
//style adds a dark blue shadow to all progress views within the enclosing
//``VStack``:

struct ShadowedProgressViews: View {
    var body: some View {
        VStack {
            ProgressView(value: 0.25)
        }
        .progressViewStyle(DarkBlueShadowProgressViewStyle())
    }
}

struct DarkBlueShadowProgressViewStyle: ProgressViewStyle {
    func makeBody(configuration: Configuration) -> some View {
        ProgressView(configuration)
            .shadow(color: Color(red: 0, green: 0, blue: 0.6),
                    radius: 4.0, x: 1.0, y: 2.0)
    }
}

struct ContentView: View {
    @State var processValue:CGFloat = 0
    var body: some View {
        VStack {

            ProgressView(value: processValue * 0.01).progressViewStyle(LinearProgressViewStyle(tint: .green))
            Spacer().frame(width: 10, height: 30, alignment: .center)

            ProgressView().progressViewStyle(CircularProgressViewStyle(tint: .green))
            Spacer().frame(width: 10, height: 30, alignment: .center)

            ShadowedProgressViews()
            Spacer().frame(width: 10, height: 30, alignment: .center)

            ProgressView(value: processValue * 0.01).progressViewStyle(DarkBlueShadowProgressViewStyle())

        }.onAppear() {
            Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { atimer in
                processValue += 1
                if processValue > 100 {
                    processValue = 0
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}