HStack background color blending into safe area

user_8569903 0
Viewed 294

I am trying to prevent the background of my HStack from going into my safearea.

There is a ZStack that is setting the background color. I am using green just to be more defined for now.enter image description here

    struct AccountView: View {
    var body: some View {
        ZStack{
            Color(.green)
                .ignoresSafeArea()
            
            VStack(spacing: 32){
                HStack {
                    Image(systemName: "person")
                        .resizable()
                        .scaledToFill()
                        .frame(width: 64, height: 64)
                        .clipShape(Circle())
                        .padding(.leading)
                    VStack(alignment: .leading, spacing: 4) {
                        Text("First Last")
                            .font(.system(size: 18))
                        Text("Available")
                            .foregroundColor(.gray)
                            .font(.system(size: 14))
                    }
                    Spacer()
                        
                }
                .frame(height: 80)
                .background(Color("ItemBG"))
        
                Spacer()
            }
        }
    }
    
}
swiftui
2 Answers

We need to use shape as background instead of pure-colour, then it is not spread outside.

Here is simplified demo. Tested with Xcode 13.2 / iOS 15.2

demo

var body: some View {
    VStack {
        HStack {
            Text("Hello")
        }
        .frame(maxWidth: .infinity, maxHeight: 80)
        .background(Rectangle().fill(.yellow))       // << here !!
        Spacer()
    }
    .background(Color.green.ignoresSafeArea())
}
user_122990300

I was able to figure it out...

I had to give by HStack a padding of 1 on the top. Apparently with IOS 15 if it touches the safe area it bleeds.

HStack {
            Image(systemName: "person")
                .resizable()
                .scaledToFill()
                .frame(width: 64, height: 64)
                .clipShape(Circle())
                .padding(.leading)
            
            VStack(alignment: .leading, spacing: 4) {
                Text("First Last")
                    .font(.system(size: 18))
                Text("Available")
                    .foregroundColor(.gray)
                    .font(.system(size: 14))
            }
            Spacer()
            
        }
        .frame(height: 80)
        .background(Color("ItemBG"))
        .padding(.top, 1)
user_85699030
Related