CODEWITHSUNDEEP
iosswiftswiftui
user1445685
user1445685

Reputation: 883

View with fullscreen image and navigationLink

i'm new to swiftui and struggling with some basic stuff I'm trying to create a view with 2 buttons on the botton. I want an image as background of the whole view.

var body: some View {
        ZStack {
            Image("bg-welcome").edgesIgnoringSafeArea(.all)
        }
    }

This works fine I set my view like this

NavigationView {
            ZStack {

                VStack(alignment: HorizontalAlignment.leading, spacing: 10) {
                    Text("1").foregroundColor(.white)
                    Text("2").foregroundColor(.white)
                    Spacer()
                    Button(action: {}){
                        Text("ooooooooo")
                    }
                }.background(Image("bg-welcome"))
            }

        }

Now I have 2 problems: - a white space is dispalyed just before the background image - the first text is pushed below, surely after the space reserved for the navigationbar and I don't want it because when I navigate to the next screen, the space is still taken and I want to have the whole avaiblable screen

thank you for your help

Upvotes: 1

Views: 1527

Answers (3)

user1445685
user1445685

Reputation: 883

I ended up doing something like this. Please let me know if there is a better way 

NavigationView {
            GeometryReader { gr in
            ZStack {
                VStack(alignment: HorizontalAlignment.center, spacing: 10) {
                    HStack{
                        Spacer()
                    }
                    Text("1").foregroundColor(.white).padding(EdgeInsets(top: 30, leading: 0, bottom: 0, trailing: 0))
                    Text("2").foregroundColor(.white)
                    Spacer()
                    HStack {
                        NavigationLink(destination: SigninScreen()){
                            Text("Button 1")
                        }

                        Button(action: {}){
                            Text("Button 2")
                        }
                    }.padding()
                }.background(Image("bg-welcome")
                    .resizable()
                    .aspectRatio(contentMode: .fill)).edgesIgnoringSafeArea(.all)
            }.navigationBarHidden(true)
        }
    }

Upvotes: 0

Chris
Chris

Reputation: 8091

you can add a padding to your button....

NavigationView {
            ZStack {

                VStack() {

                    Text("1").foregroundColor(.green).padding(.top, 40)
                        Text("2").foregroundColor(.green)
                        Spacer()
                        Button(action: {}){
                            Text("Button 1")
                        }.foregroundColor(Color.red)

                        Button(action: {}){
                            Text("Button 2")
                        }.foregroundColor(Color.red)

                }
            }.background(Image("remachine_poster")
            .resizable()
            .aspectRatio(contentMode: .fill))
                .edgesIgnoringSafeArea(.vertical)
        }

Upvotes: 1

Chris
Chris

Reputation: 8091

try this:

var body: some View {
        NavigationView {
            ZStack {

                VStack(alignment: HorizontalAlignment.leading, spacing: 10) {
                    Text("1").foregroundColor(.white)
                    Text("2").foregroundColor(.white)
                    Spacer()
                    Button(action: {}){
                        Text("Button 1")
                    }
                    Button(action: {}){
                        Text("Button 2")
                    }
                }.background(Image("remachine_poster")
                    .resizable()
                    .aspectRatio(contentMode: .fill)).edgesIgnoringSafeArea(.all)
            }
        }
    }

Upvotes: 2

Related Questions