Hide/show views on button tap - SwiftUI

Question

I have a view, created separately in another file, that I want to show and hide conditionally when a button is pressed.

I tried several techniques like changing the opacity or offset depending on a boolean, but it doesn't work once I put the view in another SwiftUI file.

My project looks like this:

In ContentView.swift, inside var body: some View

@State var doIWantThisViewToShow: Bool = false

MyView()
        .padding()
        .opacity(doIWantThisViewToShow ? 1 : 0)

In MyView.swift

struct MyView: View {
    var body: some View {
        Text("Text")
    }
}

Thanks in advance!

I tried to keep the mentioned code as short as possible, but yes I forgot to mention `@State var doIWantThisViewToShow`. — , Oct 30 '20 at 07:01

score 3 · Accepted Answer · edited Oct 30 '20 at 20:19

You can show/hide your view in different ways. Here are some that may help you:

opacity (the hidden view stays in the view hierarchy, ie. other views keep their positions):

struct ContentView: View {
    @State var doIWantThisViewToShow: Bool = false

    var body: some View {
        VStack {
            Button("Show/Hide MyView") {
                doIWantThisViewToShow.toggle()
            }
            MyView()
                .padding()
                .opacity(doIWantThisViewToShow ? 1 : 0)
        }
    }
}

if-statement (the hidden view is removed from the view hierarchy, ie. other views positions will be rearranged):

struct ContentView: View {
    @State var doIWantThisViewToShow: Bool = false

    var body: some View {
        VStack {
            Button("Show/Hide MyView") {
                doIWantThisViewToShow.toggle()
            }
            if doIWantThisViewToShow {
                MyView()
                    .padding()
            }
        }
    }
}

score 2 · Answer 2 · answered May 09 '21 at 20:33

In addition to the pawello's answer, you can hide it like:

MyView()
  .hidden($doIWantThisViewToShow)

with this simple extension

extension View {
    @ViewBuilder func hidden(_ shouldHide: Bool) -> some View {
        switch shouldHide {
        case true: self.hidden()
        case false: self
        }
    }
}

Hide/show views on button tap - SwiftUI

2 Answers2