How to remove padding in the ZStack SwiftUI

Question

I'm getting weird padding when trying to put another VStack in ZStack. How to remove it?

struct ContentView: View {
var body: some View {
    VStack{
        VStack{
            Text("1")
        }
        .frame(width: 200, height: 50)
        .background(Color.init(.green))

        ZStack{
            VStack{
                Text("2")
            }
            .frame(width: 210, height: 50)
            .background(Color.init(.blue))
            VStack{
                Text("3")
            }
            .frame(width: 200, height: 50)
            .background(Color.init(.green))
        }

        VStack{
            Text("4")
        }
        .frame(width: 200, height: 50)
        .background(Color.init(.green))
    }    
}

}

if I comment VStack with Text("2"), padding will disappear.

score 0 · Accepted Answer · answered May 06 '20 at 07:37

0

Here it is

var body: some View {
    VStack(spacing: 0) { // << here !!

answered May 06 '20 at 07:37

Asperi

228,894
20
464
690

4

I believe the question was for "ZStack" Not "VStack" – avatarZuko May 20 '21 at 04:48
@avatarZuko, the question of topic starter was *how to remove weird padding* - and the reason was not in `ZStack`... how it is formulated does not matter in this case - this is a fix for provided code. – Asperi Nov 04 '21 at 10:42

score -2 · Answer 2 · answered May 06 '20 at 07:29

-2

You have provide different width in

VStack{
      Text("2")
}
.frame(width: 210, height: 50)
.background(Color.init(.blue))

the width is 210 and other element width is 200 provide the same width the padding will remove.

answered May 06 '20 at 07:29

Sumeet Mourya

434
1
7
23

1

No, it will not remove. I am talking about vertical paddings between 1 and 3 / 3 and 4 – Роман May 06 '20 at 07:34
okay.. This is because of the Top VStack view. provide the spacing in this VStack to avoid this space/margin/padding. – Sumeet Mourya May 06 '20 at 07:49

How to remove padding in the ZStack SwiftUI

2 Answers2