矩形进度条swiftUI [英] Rectangle progress bar swiftUI

问题描述

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

像这样的事情吗？

  struct ProgressBar：视图{
 @Binding var进度：CGFloat // [0..1] 
 
 var主体：一些视图{
 RoundedRectangle（cornerRadius：10） 
 .trim（from：0.0，to：CGFloat（progress））
 .stroke（Color.red，lineWidth：2.0）
 .animation（.linear）
} 
} 
 
的结构DemoAnimatingProgress：视图{
 @State private var progress = CGFloat.zero 
 
 var body：some View {
 Button（演示）{
 if self.progress == .zero {
 self.simulateLoading（）
}否则{
 self.progress = 0 
 } 
} 
 .padding（）
 .background（ProgressBar（progress：$ progress））
} 
 
 func SimulationLoading（）{
 DispatchQueue.main.asyncAfter（截止日期：.now（）+ 0.5）{
 self.progress + = 0.1 
如果self.progress< 1.0 {
 self.simulateLoading（）
} 
} 
} 
} 
  

Hey does someone know how can I create rectangle progress bar in swiftUI?

Something like this? https://i.stack.imgur.com/CMwB3.gif

I have tried this:

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

解决方案

Here is simple demo of possible approach for [0..1] range progress indicator.

Tested with 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()
            }
        }
    }
}

这篇关于矩形进度条swiftUI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！