SwiftUI List row HIGHLIGHT animation on tap WITHOUT NavigationLink

Question

SwiftUI List will automatically highlight the tapped row, iff there is a NavigationLink inside.

Since I use SwiftUI embedded in UIKit via UIHostingController, I handle my navigation with a UINavigationController, so I do not want to use NavigationLink.

However, I need the List rows to be highlighted on tap, which is not there when using .onTapGesture

How can I do that?

Here is an example:

List {
    Section(header: Text("Section header text")) {
        HStack { // A row in the list
                Image(systemName: "circle")
                VStack(alignment: .leading) {
                    Text("profile name")
                    // Sub label
                    Text("Description")
                        .foregroundColor(.secondary)
                        .font(.system(size: 12))
            }
            Spacer()
        }
        .contentShape(Rectangle())
        .onTapGesture { // Detect tap on the row
            Print("Perform action here...")
            // THE TAP IS NOT ANIMATED BECAUSE THERE IS NO NAVIGATION LINK HERE.
        }
    }
}

show a minimal example code that you have, and the desired display. See: https://stackoverflow.com/help/minimal-reproducible-example — workingdog support Ukraine, Sep 05 '22 at 07:26
Does this answer your question? [SwiftUI List with NavigationLink how to make custom highlight on tap](https://stackoverflow.com/questions/59089400/swiftui-list-with-navigationlink-how-to-make-custom-highlight-on-tap) — Ptit Xav, Sep 05 '22 at 07:56
Not at all, I want highlight WITHOUT NavigationLink. The EmptyView used there has not helped when I tried. But thanks anyway. — vomi, Sep 05 '22 at 08:01

score 7 · Accepted Answer · answered Sep 05 '22 at 08:36

why not use Button()

struct ContentView: View {
var body: some View {
    List {
        Section(header: Text("Section header text")) {
            
            Button(action: {
                print("Perform action here...")
                
            }, label: {
                HStack { // A row in the list
                        Image(systemName: "circle")
                        .foregroundColor(.primary)
                        VStack(alignment: .leading) {
                            Text("profile name")
                                .foregroundColor(.primary)
                            // Sub label
                            Text("Description")
                                .foregroundColor(.secondary)
                                .font(.system(size: 12))
                    }
                    Spacer()
                }
            })
            .contentShape(Rectangle())
            
        }
    }
}
}

Nice! I love the simplicity. On my iOS 16 device, it also nicely animates (fade out) when touched up. — vomi, Sep 05 '22 at 08:57

workingdog support Ukraine · Answer 2 · 2022-09-05T08:24:11.040

you could try this approach, using listRowBackground and a selected row/item:

struct ContentView: View {
    @State var selected = ""  // <-- here
    @State var arr = ["item-1", "item-2"]
    
    var body: some View {
        List (arr, id: \.self) { item in
            Section(header: Text("Section header text")) {
                HStack { // A row in the list
                    Image(systemName: "circle")
                    VStack(alignment: .leading) {
                        Text("profile name")
                        Text("Description").foregroundColor(.secondary).font(.system(size: 12))
                    }
                    Spacer()
                }
                .contentShape(Rectangle())
                .onTapGesture {
                    selected = item  // <-- here
                }
                .listRowBackground(selected == item ? Color.red : Color.clear) // <-- here, adjust to your needs
            }
        }
    }
}

This is a great idea. How would you perform the animation? i.e. the color fading away after the tap? — vomi, Sep 05 '22 at 08:33
see: https://developer.apple.com/documentation/swiftui/animations Offhand, don't know. — workingdog support Ukraine, Sep 05 '22 at 08:42

SwiftUI List row HIGHLIGHT animation on tap WITHOUT NavigationLink

2 Answers2