pin view to bottom of screen and ignore bottom safe area

Question

Layout question - how do I setup for a view block to expand over the bottom safe area? I've looked through various sources for ignoresSafeAreas() but can't achieve quite the result I'm looking for. I want, later, to be able to expand this view upwards but start it short. If that makes sense.

    var body: some View {
    VStack{
        Spacer()
            HStack(alignment: .center) {
                Text ("Expand to fill bottom safe area ...?")
                    .foregroundColor(.white)
            }

        .frame(minWidth: 100, maxWidth: .infinity, minHeight: 50, maxHeight: 100)
        .background(Color.red)
        .ignoresSafeArea()
    }
}

user_14351818 · Answer

Option 1

Put ignoresSafeArea inside background. This will let the red color extend over to the device edges, but the HStack's position will stay the same.

struct ContentView: View {
    var body: some View {
        VStack{
            Spacer()
            
            HStack(alignment: .center) {
                Text ("Expand to fill bottom safe area ...?")
                    .foregroundColor(.white)
            }
            
            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 50, maxHeight: 100)
            .background(Color.red.ignoresSafeArea()) /// inside `background`
        }
    }
}

Option 2

Put ignoresSafeArea on the VStack, and everything will ignore the safe area.

struct ContentView: View {
    var body: some View {
        VStack{
            Spacer()
            
            HStack(alignment: .center) {
                Text ("Expand to fill bottom safe area ...?")
                    .foregroundColor(.white)
            }
            
            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 50, maxHeight: 100)
            .background(Color.red)
        }
        .ignoresSafeArea() /// attached to `VStack`
    }
}

Result:

Option 1	Option 2

pin view to bottom of screen and ignore bottom safe area

1 Answers

Option 1

Option 2