CODEWITHSUNDEEP
swiftui
Samin Jilani
Samin Jilani

Reputation: 155

How place a Vstack container in center of Zstack container?

I want to align the two buttons on the bottom of my Text. How can I align an H-stack container on bottom of a view ??

ZStack{
            VStack{
        Color.white.ignoresSafeArea()
        Text("TAP TO SEE MORE")
            .foregroundColor(Color.black)
            .font(.system(size: 30))
            .bold()

        HStack(alignment: .center, spacing: 50, content: {
            
            Button("Admin"){

            }

            Button("Employee"){

            }
            
            
        })

        
    
        }
    }

enter image description here

I want to have this content in the middle of screen

Upvotes: 0

Views: 128

Answers (2)

Andrew Bogaevskyi
Andrew Bogaevskyi

Reputation: 2615

You have to move Color inside the ZStack instead of VStack:

ZStack {
    Color.gray.ignoresSafeArea() // <-- here
    VStack{
        Text("TAP TO SEE MORE")
            .foregroundColor(Color.black)
            .font(.system(size: 30))
            .bold()

        HStack(alignment: .center, spacing: 50) {
            Button("Admin") { }
            Button("Employee") { }
        }
    }
}

Upvotes: 0

Qwertytops
Qwertytops

Reputation: 13

ZStack{
    Color.white.ignoresSafeArea()
        VStack{

    Text("TAP TO SEE MORE")
        .foregroundColor(Color.black)
        .font(.system(size: 30))
        .bold()

    HStack(alignment: .center, spacing: 50, content: {
        
        Button("Admin"){

        }

        Button("Employee"){

        }
        
        
    })

    

    }
}

This should fix it. The problem was that you had Color.white.ingoresSafeArea() inside the VStack, which was placing it above the text and buttons instead of behind, which caused the text etc. to be pushed to the bottom.

Upvotes: 0

Related Questions