5

Hello I want to make undetermined Progress View on bar button item. when its done I want to make it hidden, but the hidden() method doesn't have parameter like disabled(Bool). how can I hide the progress view when the task getting done?

This is what I want enter image description here

I don't know how to hide it programmatically on swiftui because it has no parameter.

this is the code

.navigationBarItems(leading:
   Button(action: {
      self.presentationMode.wrappedValue.dismiss()
   }, label: {
        Text("Cancel")
            .foregroundColor(.orange)
    })
 , trailing:
    //this should be hidden when the work done not always
    ProgressView()
        .hidden()
  )
Farras Doko
  • 307
  • 4
  • 11

3 Answers3

8

You can create that ViewExtension

extension View {
    @ViewBuilder func isHidden(_ isHidden: Bool) -> some View {
        if isHidden {
            self.hidden()
        } else {
            self
        }
    }
}

And then dynamically hide the view:

struct ContentView : View {
    
    @State var isHidden = false
    
    var body : some View {
        
        NavigationView {
            VStack {
                Text("Hello World")
            
                Button(action: {
                    self.isHidden.toggle()
                })
                {
                    Text("Change loading")
                }
            }
            .navigationBarItems(leading:
               Button(action: {
               }, label: {
                    Text("Cancel")
                        .foregroundColor(.orange)
                })
             , trailing:
                ProgressView()
                .isHidden(isHidden) //<< isHidden takes a bool whether it should be hidden
            )
        }
    }
}
davidev
  • 7,694
  • 5
  • 21
  • 56
4

Custom reusable ProgressView - Circular

struct CustomProgressView: View {

var title: String
var total: Double = 100
@Binding var isShown: Bool
@Binding var value: Double

var body: some View {
    VStack {
    
        ProgressView(value: value, total: total) {
            Text(title)
                .font(.headline)
                .padding()
        }
        .background(RoundedRectangle(cornerRadius: 25.0)
                        .fill(Color.white)
                        .overlay(RoundedRectangle(cornerRadius: 25.0)
                                    .stroke(Color.gray, style: StrokeStyle()))
        )
        .progressViewStyle(CircularProgressViewStyle(tint: .muckleGreen))
        .padding()
    
    }
    .padding(.top)
    .isHidden(!isShown)
}

}

You can use it like this in your view

VStack {
 ZStack {
 CustomProgressView(title: "Adding Post", isShown: self.$viewModel.isLoading, 
 value: self.$viewModel.uploadPercentageComplete)

 }

 }

enter image description here

Di Nerd Apps
  • 770
  • 8
  • 15
1

Oh my friend had another solution. It use EmptyView if the $isProgressViewShow state is false.

.navigationBarItems(leading:
     Button(action: {
          self.presentationMode.wrappedValue.dismiss()
     }, label: {
           Text("Cancel")
             .foregroundColor(.orange)
     })
, trailing: self.isProgressViewShow ?
     AnyView(ProgressView()) : AnyView(EmptyView())

)

to hide the Progress View

self.isProgressViewShow = true
Farras Doko
  • 307
  • 4
  • 11