Hidden modifier in SwiftUI

DevTechie Inc
Jan 29, 2023

Hidden modifier is used to hide views. Views that are hidden are invisible and don’t receive or respond to the interactions but they remain in view hierarchy and take the space in layout.

Let’s put together an example. We will start with HStack and four Image views.

struct DevTechieHiddenExample: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("DevTechie")
                .font(.largeTitle)
                .foregroundColor(.orange)
            HStack {
                Image(systemName: "a.circle.fill")
                Image(systemName: "b.circle.fill")
                Image(systemName: "c.circle.fill")
                Image(systemName: "d.circle.fill")
            }
            .font(.largeTitle)
        }
    }
}
Let’s apply hidden modifier to letter B.

Image(systemName: "b.circle.fill").hidden()
Notice that the view is gone but its place is still taken up by the hidden view, this mean that even though the view is not present but it exists in view hierarchy.

If we want to remove view from hierarchy and cover the space taken by the view by distributing other views. We need to employ a different technique.

struct DevTechieHiddenExample: View {
    @State private var hideB = false
    
    var body: some View {
        VStack(spacing: 20) {
            Text("DevTechie")
                .font(.largeTitle)
                .foregroundColor(.orange)
            HStack {
                Image(systemName: "a.circle.fill")
                if !hideB {
                    Image(systemName: "b.circle.fill")
                }
                Image(systemName: "c.circle.fill")
                Image(systemName: "d.circle.fill")
            }
            .font(.largeTitle)
            .onTapGesture {
                withAnimation {
                    hideB.toggle()
                }
            }
        }
    }
}



With that we have reached the end of this article. Thank you once again for reading. Don’t forget to subscribe our newsletter at https://www.devtechie.com
Like