Search code examples
swiftuivstack

full screen background image with vstack


i want to have a full screen background image with a navigationview (must be on top because it is from the basis view and not in "this" view normally). In this view i want a VStack which is just inside the secure area, so between navigationbar and bottom layout.

unfortunately i got (see picture)

I expected the texts inside...enter image description here

struct ContentView: View {
    var body: some View {
        NavigationView {
            ZStack(alignment: .center) {

                Image("laguna")
                    .resizable()
                    .edgesIgnoringSafeArea(.all)
                    .scaledToFill()
                    .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)

                VStack(alignment: .center) {
                    Text("just a test")
                        .font(.largeTitle)
                        .foregroundColor(Color.white)
                    Spacer()
                    Text ("not centered....why?")
                        .font(.largeTitle)
                        .foregroundColor(Color.white)

                }
                .zIndex(4)
                .navigationBarTitle("nav bar title")
            }
        }
    }
}

Solution

  • Here is a bit modified variant. Tested with Xcode 11.4 (finally released) / iOS 13.4

    demo

    struct TestFullScreenImage: View {
        var body: some View {
            NavigationView {
                ZStack {
                    Image("large_image")
                        .resizable()
                        .edgesIgnoringSafeArea(.all)
                        .scaledToFill()
    
                    VStack {
                        Text("Just a test")
                            .font(.largeTitle)
                            .foregroundColor(.white)
                            Spacer()
                        Text("centered")
                            .font(.largeTitle)
                            .background(Color.green)
                    }
                    .navigationBarTitle("Navigation Title")
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }