Search code examples
swiftimageswiftuiresizable

How to resize a background Image in SwiftUI without affecting the screen views?

I have a Content View which looks like this:

enter image description here

The code for the Content View is:

    var body: some View {
    ZStack(alignment: .bottom) {
        
        VStack {
            if selectedTab == "gearshape" {
                GearshapeView()
            }
        }
        CustomTabBar(selectedTab: $selectedTab)
    }
}

and this is the code of the GearshapeView:

 var body: some View {

Color.blue
.edgesIgnoringSafeArea(.all)

}

Now I want to add a picture in the background and keep the size of the menu same like before.

    var body: some View {

            Image("s7")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .ignoresSafeArea()

       }

Unfortunately when I resize the picture to fit the screen, the menu also resizes.

enter image description here

Any ideas on how to keep it static and not stretched?

Solution

  • Solved it by using Geometry reader:

      GeometryReader { geo in
            Image("s7")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: geo.size.width, height: geo.size.height)
    }
                .edgesIgnoringSafeArea(.all)