Image not clickable

App Development
1

I’m trying to make both the text and the image clickable so that it opens a new view. The text is clickable, but NOT the image. How do I resolve this??

             Button("Info") {
                    isSheetPresented.toggle()
                 }
                 .font(.custom("airstrike", size: 30))
                 .foregroundStyle(Color.black)
                 .padding(.horizontal)
                 .drawingGroup() // prevent end clipping of custom font
                 Image(systemName: "info.circle")
                    .foregroundStyle(Color.blue)
                 .sheet(isPresented: $isSheetPresented) {
                    SetupView()
                    }
2

You will need to use a different button in order to achieve what you want. Try this:

Button(action: {
    isSheetPresented.toggle()
}, label: {
    Text("Info")
    Image(systemName: "info.circle")
        .foregroundStyle(Color.blue)
})
.font(.custom("airstrike", size: 30))
.foregroundStyle(Color.black)
.padding(.horizontal)

By default the label: closure places the items side by side (as in an implied HStack) so it you want the SF symbol and the Text to be one above the other then wrap them in a VStack.

3

That gave me some direction, but wasn’t quite right. The code below works great.

   VStack {
                     Button(action: {
                        isSheetPresented.toggle()
                     }, label: {
                        VStack {
                              Text("Info")
                                 .font(.custom("airstrike", size: 25))
                                 .foregroundStyle(Color.black)
                                 .padding([.leading, .bottom, .trailing], 1.0)
                                 .drawingGroup()
                              Image(systemName: "info.circle")
                                 .sheet(isPresented: $isSheetPresented) {
                                    InfoView()
                           
                        } //sheet
                        } //vstack
                     }) //button
                    } //vstack
4

Most developers add the .sheet modifier to the top View inside the body property which makes the code a little cleaner and easier to read. Adding the .sheet modifier to the Image view adds clutter. I didn’t include the .sheet simply because it was the button label: that was the objective to get both the Text and the Image to respond to a tap gesture.

This is the complete View struct containing the example.

struct ContentView: View {
    @State private var isSheetPresented = false

    var body: some View {
        VStack {

            Button(action: {
                isSheetPresented.toggle()
            }, label: {
                Text("Info")
                Image(systemName: "info.circle")
                    .foregroundStyle(Color.blue)
            })
            .font(.custom("airstrike", size: 30))
            .foregroundStyle(Color.black)
            .padding(.horizontal)

        }
        .sheet(isPresented: $isSheetPresented) {
            SetupView()
        }
    }
}

.drawingGroup() is not required since there isn’t any complex rendering being performed.
See this article from Paul Hudson where .drawingGroup does make a difference:

1 Like
5

Yes, I tend to write messy code, I’m not very good at this stuff.

The .drawingGroup is because the custom font keeps getting clipped on the right side and cuts off about a 3rd of the last character.

Thank you very much for helping!

6

OK, that’s fair. I had not downloaded that font to see the impact.