CODEWITHSUNDEEP
iosswiftswiftui
Nion
Nion

Reputation: 169

SwiftUI background color from Text ignores safe area even though it is NOT set to ignore

My problem is the title itself. I follow this tutorial in order to understand the VStack, HStack, ZStack and spacers: https://www.youtube.com/watch?v=6cM6wTMb-Co&t=973s

The problem begins at 17:05 of the video, where I cannot get the same result of the video. The background Color of the Text view is ignoring the top and bottom safe areas of the emulator.

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack{
            HStack{
                Text("Left side").background(Color.green)
                Spacer()
            }
            Spacer()
            HStack{
                Spacer()
                Text("Right Side").background(Color.green)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

The result : enter image description here

Even though I have not specified for the background color of the Text view ,to ignore safe areas, they ignore it. Is this the true end result ? Because on the video the result is different. Thank you in advance for any replies !

Upvotes: 5

Views: 2441

Answers (2)

DevGom
DevGom

Reputation: 349

I found other question and anwer Ignore Safe Area in Xcode with SwiftUI

And document said default 'ignore safearea is .all' https://developer.apple.com/documentation/swiftui/view/background(_:ignoressafeareaedges:)

So, use empty edge set

.background(Color.green.edgesIgnoringSafeArea([]))

Upvotes: 3

Asperi
Asperi

Reputation: 258413

Instead of pure color (which seems fill everything now, maybe bug maybe not), use colored shape as a background, which is valid in any case:

demo

var body: some View {
    VStack{
        HStack{
            Text("Left side")
              .background(Rectangle().fill(Color.green))    // << !!
            Spacer()
        }
        Spacer()
        HStack{
            Spacer()
            Text("Right Side")
              .background(Rectangle().fill(Color.green))   // << !!
        }
    }
}

Tested with Xcode 13.2 / iOS 15.2

Upvotes: 7

Related Questions