Link In a List, Use the Full Row

Question

erichCompSci OP

Created Apr ’22

Replies 2

Boosts 0

Participants 2

Hello,

I am building an application in SwiftUI and I have put a Link View in a List View, beside some Navigation Links.

All of my views contain an Image and then some text. For the navigation links, when I touch the white space that is not covered by either an image or text, the navigation link will activate, but that is not so when I set up the Link.

I have tried setting the .frame(maxWidth: .infinity) parameter on both the Link, as well as the Text View on the inside of the link to try and get this to work but to no avail.

The hacky solution that seems to work is to pad the Text View with an enormous amount of blank space. This is hacky, but it at least gives the desired behavior, though I do worry about it breaking on some update.

Here is simplified code below:

List {
      Link(destination: "https://google.com") {
            Image(systemName: "bell")
            Text("Doesn't activate in white space")
       }
}

If you build a test example, you'll see that if you press on the space not covered by text, the link will not work. This is not desired behavior. Changing .frame options does not help. How do I do this properly?

Boost

Answer 1

Claude31 OP

Apr ’22

I don't think it is possible directly.

You should have to rebuild something specific using onTapGesture on the different objects in the cell.

Note: Does your code compile ? I had to change as:

            Link(destination: URL(string: "https://google.com")!) {

0

Answer 2

Claude31 OP

Apr ’22

I may miss your question.

I tried:

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Link(destination: URL(string:  "https://google.com")!) {
                      Image(systemName: "bell")
                      Text("Doesn't activate in white space")
                 }
            }
        }
    }
}

And this fires wherever I tap in cell.

Idem without NavigationView

struct ContentView: View {
    var body: some View {
            List {
                Link(destination: URL(string:  "https://google.com")!) {
                    Image(systemName: "bell")
                    Text("Doesn't activate in white space")
                }
        }
    }
}

I understood you wanted NOT to activate outside of Text and Image. I got it with onTapGesture:

struct LinkedView: View {
    var body: some View {
        WebView(request: URLRequest(url: URL(string:  "https://google.com")!)) 
     }
}

struct ContentView: View {
    @State var isLinkActive = false // We can activate link

    var body: some View {
        NavigationView {
            List {
                NavigationLink(destination: LinkedView(), isActive: $isLinkActive) {
                    Image(systemName: "bell")
                        .onTapGesture {
                            isLinkActive = true
                            print("Image isLinkActive", isLinkActive)
                        }
                    Text("Doesn't activate in white space")
                        .frame(width: 150, height: 60, alignment: .leading)
                        .onTapGesture {
                            isLinkActive = true
                            print("Text isLinkActive", isLinkActive)
                        }
                }
            }
            .onTapGesture {  // Intercept and do not navigate
                print("Submit", isLinkActive)
            }
        }
    }
}

0