CODEWITHSUNDEEP
swiftswiftui
iPadawan
iPadawan

Reputation: 1110

How to show or hide an overlay at a Text or Button

I do have a few items that I need to hide ( not disable ) or show depending on a value.

As for a Text() or BUtton() sample, I need to have a overlay or no overlay.

    Button("how secret?", action: {
        self.secretOverlay = true
    })
         .overlay( TopSecretOverlayView()
                 ....
             })

I did try something like

     struct TopSecretOverlayView: View {
    var body: some View {
        HStack {
          if secretOverlay {
            Text("Top Secret")
                .bold()
                .font(.system(size: 64))
                .frame(width: 350, height: 80, alignment: .center) 
            } else { 
                ....
            }
        }
    }
  }

.presentation is deprecated. Not sure if that was the way. But how should I switch a overlay between hidden and visable? Where should an if statement look like?

As always, thank you!

Upvotes: 1

Views: 4551

Answers (3)

Islam
Islam

Reputation: 3733

Have you tried this:

Button("how secret?") {
    showSecretOverlay = true
}
.overlay(TopSecretOverlayView().opacity(showSecretOverlay ? 1 : 0))

Another way of handling it is with a view builder:

struct SecretView: View {
    @State private var showSecretOverlay = false
    
    var body: some View {
        Button("show password?") {
            showSecretOverlay.toggle()
        }
        .overlay(secretOverlay)
    }
    
    @ViewBuilder
    private var secretOverlay: some View {
        if showSecretOverlay {
            TopSecretOverlayView()
        }
    }
}

struct TopSecretOverlayView: View {
    var body: some View {
        Text("password")
            .foregroundColor(.white)
            .background(.black)
    }
}

struct SecretView_Previews: PreviewProvider {
    static var previews: some View {
        SecretView()
    }
}

Upvotes: 5

plato522
plato522

Reputation: 143

I know this may be a little old but it seems like you could probably do what you want using an ObservedObject passed into the view.

struct TopSecretOverlayView: View {

    @ObservedObject var secretVM: SecretViewModel

    var body: some View {
        HStack {
            switch secretVM.accessType {
            case .top:
                Text("Top Secret")
                    .bold()
                    .font(.system(size: 64))
                    .frame(width: 350, height: 80, alignment: .center)
            case .middle:
                Text("Secret")
                    .bold()
                    .font(.system(size: 64))
                    .frame(width: 350, height: 80, alignment: .center)
            case .low:
                Text("Common Knowledge")
                    .bold()
                    .font(.system(size: 64))
                    .frame(width: 350, height: 80, alignment: .center)
            default:
                Text("Access Denied")
                    .bold()
                    .font(.system(size: 64))
                    .frame(width: 350, height: 80, alignment: .center)
            }
        }
    }
  }

Then where ever you change the accessType property it should cause it to update the overlay.

Button("how secret?", action: {
        self.secretVM.accessType = .top
    })
         .overlay( TopSecretOverlayView(secretVM:self.secretVM)
                 ....
             })

Upvotes: 0

Loren Rogers
Loren Rogers

Reputation: 359

If the button tap will always have the same action, then how about setting the opacity to 0 if you want it invisible and a 1 if you want it visible?

Upvotes: 0

Related Questions