Without Description
With Description

I want to make it so that when I click on an egg, the Text element will show up. However, when the Text element doesn’t show any text, I don’t want the layout to move or shift. Currently, my elements are put in a VStack and I’m not quite sure how to proceed as I am still quite new to Swift. Thank you!

//
//  ContentView.swift
//  habit-hatchers
//
//

import SwiftUI
import UIKit 
extension UIScrollView {  open override var clipsToBounds: Bool {   get { false }   set { }  } }

struct ContentView: View {
    @State var fulfilled = 0
    @State var numOfEggs = 7
    @State var habitEggs: [HabitEggButton] = []
    @State var displayHabit = ""
    
    var body: some View {
        
        NavigationView {
            let chickenImageName = fulfilled == numOfEggs ? "chicken_in_egg" : "chicken_in_egg_sad"
        
            ZStack {
                // background color
                Color(#colorLiteral(red: 0.9294117647, green: 0.9294117647, blue: 0.9137254902, alpha: 1)).ignoresSafeArea()
                  
                VStack() {
                    HStack() {
                        // settings wheel
                        Spacer().frame(maxWidth: 300)
                        Button(action: {
                            print("Settings tapped")
                        }) {
                            Image("settings")
                                .resizable()
                                .background(Color.clear)
                                .frame(width: 37, height: 37)
                        }
                        
                    }
                    
                    // main chicken
                    Image(chickenImageName)
                        .resizable()
                        .background(Color.clear)
                        .frame(width: 350, height: 350)
                    
                    
                    // habit egg buttons
                    ScrollView(.horizontal, showsIndicators: false) {
                        HStack(spacing: -10) {
                            
                            // invisible placeholder egg if empty
                            if numOfEggs == 0 {
                                HabitEggButton(habitName: "MyHabit", clickable: false).opacity(0)
                            }
                            
                            // creates eggs
                            else {
                                ForEach(0..<numOfEggs) { _ in
                                    HabitEggButton(habitName: "MyHabit", clickable: true)
                                }
                            }
                        }
                    }.offset(x: 25)
                    
                    if (displayHabit == "") {
                        Text("Drink Water").font(Font.custom("Inika-Bold", size: 26))
                    }
                }
                .offset(y: -80)
                
                
            }
        }.navigationBarHidden(true)
    }
}

#Preview {
    ContentView()
}

I tried changing the Z index and looking through the attributes of the Text component. I couldn’t quite find a way to make it so that the layout doesn’t move once the Text disappears.