Home > Software design >  How to display a button on the picture that sees the change of "screen" in SwiftUI
How to display a button on the picture that sees the change of "screen" in SwiftUI

Time:12-23

Please tell me how to put a button on top of the picture (picture below), it should be located in the lower right corner of itself. And this button should lead to another screen (navigationview). Thanks in advance !

enter image description here

For a long time I tried to figure it out on my own, but nothing worked.

CodePudding user response:

You can take reference from this code.

import SwiftUI

struct ContentView: View {
    var body: some View {
            ZStack{
                    Button (action: {})
                    {
                        VStack{
                            ZStack{
                                VStack{
                                    Image("image")
                                        .resizable()
                                        .overlay {
                                            Button {
                                               // any action 
                                            } label: {
                                                Text("Let's Get acquainted")
                                                    .font(.system(size: 50))
                                                    .foregroundColor(.white)
                                                    .bold()
                                                    .position(x: 150, y: 100)
                                            }
                                        }
                                }
                                
                            }
                        }
                    }
            }
        }
}

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

CodePudding user response:

You need to use either a ZStack or .overlay:

  1. Using ZStack:
ZStack(alignment: .bottomTrailing) {
    //your content
    //your image
}
  1. Using .overlay:
//your content
    .overlay(alignment: .bottomTrailing) {
        //your Button
    }
  • Related