I have a close or dismiss view button that I would am trying to place in the upper left hand of a SwiftUIView. The button has an image within it and it action is to dismiss the view.
To the right of the button is a large centered image. I can put the button the correct place using negative padding, however, the tappable area for the button is not moving with it and stays at the original location of the button. My understanding is I can make a nice padded tappable button by padding the image within the button. however, I am having to apply negative padding to move it up to the upper left hand corner.
Note there is a Z-stack having to do with an animation of the headshot but I have not incpluded the animation code as this would confuse things. How can I move up the button together with its tappable aread.
Current code;
ZStack{
Group{
Button(action: {
Task {
presentationMode.wrappedValue.dismiss()
}
})
{Image("x-filled")
.scaledToFit()
.padding(.leading,15)
.padding(.top,-50)
.frame(height:30)
.frame(maxWidth: .infinity,alignment: .topLeading)
.listRowSeparator(.hidden)
}
Image("big-headshot")
.resizable()
.scaledToFit()
.padding(.top,-20)
.padding(.bottom,-40)
.frame(height:130)//was 160
.frame(maxWidth: .infinity,alignment: .center)
.listRowSeparator(.hidden)
}
}
Your title Negative padding lifts button in SwiftUI but not tappable area so button is not recognizing tap is not quite correct.
You are not padding the Button, only the Image. So change your code
attaching .padding(.leading,15) and .padding(.top,-50) to the
Button, as shown in this example code. Then you should be able to tap
on the Button as intended. I have added some .border to show
where the views are located.
struct ContentView: View {
var body: some View {
ZStack{
Group{
Button(action: {
print("----> action") // <--- for testing
})
{
Image(systemName: "globe")
.scaledToFit()
.frame(height:30)
.frame(maxWidth: .infinity,alignment: .topLeading)
.listRowSeparator(.hidden)
.border(.blue)
}
.padding(.leading,15) // <--- here
.padding(.top,-50) // <--- here
.border(.red) // <--- for testing
Image(systemName: "info")
.resizable()
.scaledToFit()
.padding(.top,-20)
.padding(.bottom,-40)
.frame(height:130)//was 160
.frame(maxWidth: .infinity,alignment: .center)
.listRowSeparator(.hidden)
.border(.green) // <--- for testing
}
}
}
}