SwiftUI: Change List row Highlight colour when tapped

Question

The default colour of a list row when tapped is grey.

I know how to change background colour using .listRowBackground, but then it changes to the whole list.

How can I change to a custom colour when tapped, so ONLY the tapped row stays red?

import SwiftUI

struct ExampleView: View {
    @State private var fruits = ["Apple", "Banana", "Grapes", "Peach"]

    var body: some View {
        NavigationView {
            List {
                ForEach(fruits, id: \.self) { fruit in
                    Text(fruit)
                }
                .listRowBackground(Color.red)

            }


        }
    }


}

struct ExampleView_Previews: PreviewProvider {
    static var previews: some View {
        ExampleView()
    }
}

Consider approaches provided in [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) — Asperi, Dec 02 '19 at 16:20
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) — fulvio, Dec 03 '19 at 03:48

score 21 · Accepted Answer · answered Dec 16 '19 at 05:21

First, you want the .ListRowBackground modifier on the row not the whole list and then use it to conditionally set the row background color on each row. If you save the tapped row's ID in a @State var, you can set the row to red or the default color based on selection state. Here's the code:

import SwiftUI

struct ContentView: View {
    @State private var fruits = ["Apple", "Banana", "Grapes", "Peach"]
    @State private var selectedFruit: String?

    var body: some View {
        NavigationView {
            List {
                ForEach(fruits, id: \.self) { fruit in
                    Text(fruit)
                        .onTapGesture {
                            self.selectedFruit = fruit
                    }
                    .listRowBackground(self.selectedFruit == fruit ? Color.red : Color(UIColor.systemGroupedBackground))
                }
            }
        }
    }
}

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

Can this be made to work with non-ForEach-based lists? Such as ones using the built-in selection-management feature? `List(values, selection: $selection) { val in`? — MikeyWard, Jun 06 '21 at 18:49
I would think it should work and is likely to be a better overall solution. This particular solution is only trying to directly answer the original question, not to suggest a best practice. Give it a shot and if you have trouble getting what you want, ask a new question and post a comment with a link to it. — Chuck H, Jun 10 '21 at 00:27

score 8 · Answer 2 · answered Oct 05 '20 at 01:29

Following on @Chuck H,

I'm using:

        List {
            ForEach(viewModel.sharingGroups, id: \.self) { group in
                Button(action: {
                    self.selectedGroup = group
                }, label: {
                    Text(group.name)
                })
                .listRowBackground(self.selectedGroup == group ? Color.gray : Color(UIColor.systemGroupedBackground))
            }
        }

If you use a Button instead if Text directly, this enables me to tap anywhere on the row, not just on the text.

better user experience with this one – Aaronium112 Apr 18 '22 at 14:11 — Aaronium112, Apr 18 '22 at 14:11

score 2 · Answer 3 · answered Jan 17 '21 at 02:32

If you are seeking an alternative for styling purposes on iOS and don't want to introduce state management, since Lists are backed by a UITableView you can use

UITableViewCell.appearance().selectedBackgroundView = UIView()

to remove the selection color entirely. OR:

UITableViewCell.appearance().selectedBackgroundView = {
            let view = UIView()
            view.backgroundColor = .blue
            return view
        }()

to set a specific highlight color

Be warned that this applies to the whole application, and only on platforms that support the UITableView, so MacOS or WatchOS would need another solution.

Thank you for this. This is exactly what I was looking for. Great solution. — jonthornham, Feb 26 '22 at 04:20

Lukasz D · Answer 4 · 2021-11-26T11:36:05.857

Here is improved elegant solution without buttons, whole row is tappable. Works on iOS13 too.

@ObservedObject var viewModel: TypesListViewModel
@State private var selectedType: Type?   

 List{
       ForEach(viewModel.types, id: \.id){ type in
            TypeRowView(type: type)
                 .contentShape(Rectangle()) //makes whole row tappable
                 .onTapGesture {
                      selectedType = type
                     }
                 .listRowBackground(selectedType == type ? Color(.systemFill) : Color(.systemBackground))
           }//ForEach
       }//List

score 1 · Answer 5 · answered Aug 20 '21 at 12:34

1

Apple has silly things breaking in SwiftUI. After banging my head against wall, finally i got some success. Just add a Zstack and Empty Button.

var body: some View {
    List {
        ForEach(data, id: \.self) { item in
            ZStack {
                Button("") {}
                NavigationLink(destination: ItemView(item: item)) {
                    ItemRow(item: item)
                }
            }
        }
    }
}

answered Aug 20 '21 at 12:34

Amrit

283
2
13

doesn't work in iOS 15 – Mycroft Canner Oct 07 '21 at 13:09
Just worked for me with iOS 15 without a NavigationLink – Collierton Jan 03 '22 at 17:39

Nico S. · Answer 6 · 2021-12-22T11:49:32.177

Not perfect but it works, please leave a comment if you have an improvement:

struct CustomNavigationLink<ContentView: View, DestinationView: View>: View {

    let content: () -> ContentView
    let destinationView: () -> DestinationView
    @State private var showDetail = false
    @State private var isTouchDown = false

    var body: some View {
        ZStack(alignment: .leading) {
            Color(.red)
                .opacity(isTouchDown ? 0.3 : 0)
            HStack {
                content()
                Spacer()
                NavigationLink(destination: destinationView(),
                               isActive: self.$showDetail) { EmptyView() }
                               .hidden()
                               .frame(width: 0)
                Image(systemName: "chevron.right")
                    .foregroundColor(.red)
            }
            .contentShape(Rectangle())
            .onTapGesture {
                showDetail = true
            }
            ._onButtonGesture { isTouchDown in
                withAnimation {
                    self.isTouchDown = isTouchDown
                }
            } perform: {}
        }
    }
}

SwiftUI: Change List row Highlight colour when tapped

6 Answers6