Dynamically Hiding View in SwiftUI

DevTechie Inc
Jan 29, 2023


Dynamically Hiding View in SwiftUI

Today, we will work on another custom modifier. This time we will build a modifier to hide/show content dynamically.

Current SwiftUI’s hidden modifier that comes out of the box is hides the view but it doesn’t take any parameter or condition.

We have a choice of putting the view we want to hide inside a conditional but that may look messy depending upon the code structure so to solve that problem, we will build a custom modifier to hide on condition.

Let’s get started, we will create a view with two Text views and a Toggle to hide/show the view.

struct DevTechieDynamicHidingView: View {
    
    @State private var hide = false
    
    var body: some View {
        VStack {
            Text("DevTechie.com")
                .font(.largeTitle)
            Text("Video Courses")
            
            Toggle("Hide something", isOn: $hide)
        }
        .padding()
    }
}
Now is the time to create our new ViewModifier so let’s create a new struct and call it “IsHidden”. This struct will conform to the ViewModifier protocol and will take two parameters.

hidden: boolean value used to determine the hide/show state of the view.

remove: boolean value used to determine whether to keep hidden view in view hierarchy or not.

struct IsHidden: ViewModifier {
    var hidden = false
    var remove = false
    func body(content: Content) -> some View {
        
    }
}
inside the body function we get access to the content of the view this modifier is being applied to so we can apply conditional logic here, which will keep our code reusable and clean.

struct IsHidden: ViewModifier {
    var hidden = false
    var remove = false
    func body(content: Content) -> some View {
        if hidden {
            if remove {
                
            } else {
                content.hidden()
            }
        } else {
            content
        }
    }
}
Here are our checks.

  • If hidden is true and remove is true, we want to remove view from hierarchy
  • if hidden is true and remove is false, we want to hide the view.
  • if hidden is false, we want to keep the view visible on screen.
Let’s add View extension for this modifier, for convenience.

extension View {
    func isHidden(hidden: Bool = false, remove: Bool = false) -> some View {
        modifier(
            IsHidden(
                hidden: hidden,
                remove: remove))
    }
}
Time to use this new ViewModifier.

struct DevTechieDynamicHidingView: View {
    
    @State private var hide = false
    
    var body: some View {
        VStack {
            Text("DevTechie.com")
                .font(.largeTitle)

            Text("Video Courses")
                .isHidden(hidden: hide, remove: true)
            
            Toggle("Hide something", isOn: $hide)
        }
        .padding()
    }
}
Notice the text “DevTechie.com” is moving down when “View Courses” text is hidden. It’s because we have remove set to true meaning the Text view containing “View Courses” is being removed from the view hierarchy.

Let’s remove the second parameter “remove” so the modifier takes its default value.

struct DevTechieDynamicHidingView: View {
    
    @State private var hide = false
    
    var body: some View {
        VStack {
            Text("DevTechie.com")
                .font(.largeTitle)
                
            Text("Video Courses")
                .isHidden(hidden: hide)
            
            Toggle("Hide something", isOn: $hide)
        }
        .padding()
    }
}
With that we have reached the end of this article. Thank you once again for reading. Don’t forget to 👏 and follow 😍. Also subscribe our newsletter at https://www.devtechie.com
Like