矩形进度条swiftUI答案

【问题标题】：Rectangle progress bar swiftUI矩形进度条swiftUI
【发布时间】：2020-08-28 07:15:09
【问题描述】：

嘿，有人知道如何在 swiftUI 中创建矩形进度条吗？

这样的？ https://i.stack.imgur.com/CMwB3.gif

我试过这个：

struct ProgressBar: View
{
    @State var degress = 0.0
    @Binding var shouldLoad: Bool

    var body: some View
    {
        RoundedRectangle(cornerRadius: cornerRadiusValue)
            .trim(from: 0.0, to: CGFloat(degress))
            .stroke(Color.Scheme.main, lineWidth: 2.0)
            .frame(width: 300, height: 40, alignment: .center)
            .onAppear(perform: shouldLoad == true ? {self.start()} : {})
    }

    func start()
    {
        Timer.scheduledTimer(withTimeInterval: 0.3, repeats: true)
        {
            timer in

            withAnimation
            {
                self.degress += 0.3
            }
        }
    }
}

【问题讨论】：

展示你自己的尝试并参考这个stackoverflow.com/help/how-to-ask，然后有人可以帮助你。

标签： swift animation swiftui ios-animations swiftui-environment

【解决方案1】：

这里是 [0..1] 范围进度指示器的可能方法的简单演示。

使用 Xcode 11.4 / iOS 13.4 测试

struct ProgressBar: View {
    @Binding var progress: CGFloat // [0..1]

    var body: some View {
        RoundedRectangle(cornerRadius: 10)
            .trim(from: 0.0, to: CGFloat(progress))
            .stroke(Color.red, lineWidth: 2.0)
            .animation(.linear)
    }
}

struct DemoAnimatingProgress: View {
    @State private var progress = CGFloat.zero

    var body: some View {
        Button("Demo") {
            if self.progress == .zero {
                self.simulateLoading()
            } else {
                self.progress = 0
            }
        }
        .padding()
        .background(ProgressBar(progress: $progress))
    }

    func simulateLoading() {
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
            self.progress += 0.1
            if self.progress < 1.0 {
                self.simulateLoading()
            }
        }
    }
}

【讨论】：

您好，感谢您的帮助。有没有办法在等待服务器响应时使用这个加载？
@Johanna，如果您知道预期数据的长度，那么只需将进度更新为收到的百分比。如果不是，那么类似 undetermined 会更合适。

【解决方案2】：

适用于 XCode 12。

import SwiftUI

//MARK: - ProgressBar
struct ContentView: View {
    
    @State private var downloaded = 0.0
    
    var body: some View {
        ProgressView("Downloaded...", value: downloaded, total: 100)
    }
}

//MARK: - Circular ProgressBar
struct ContentView: View {
        
    @State private var downloaded = 0.0
        
    var body: some View {
        ProgressView("Downloaded...", value: downloaded, total: 100)
            .progressViewStyle(CircularProgressViewStyle())
    }
}

【讨论】：