UPGRADE YOUR SKILLS: Learn advanced Swift and SwiftUI on Hacking with Swift+! >>

How do I change the colour of the a list selection bar - MacOS

Forums > SwiftUI

Hi

Fairly new to SwiftUI, so perhaps this is a silly question, but I am trying to create a list that when the user selects an item the bar colour displayed is anything other than the defaul "Blue"

eg:

struct Test: View {
    @State private var selection: String?

       let names = [
           "Cyril",
           "Lana",
           "Mallory",
           "Sterling"
       ]

       var body: some View {
           NavigationStack {
               List(names, id: \.self, selection: $selection) { name in
                   Text(name)
               }
               .navigationTitle("List Selection")
           }
       }
}

Will produce a list with a blue selection bar. How do I change this to say Yellow?

1      

The list is using the system accent color. You can provide an accent color in the Asset Catalogue, but this can be over ridden by the user in System Preferences / System Settings.

I don't not know of a modifier to alter a List's selection color, hopefulyl someone more experienced with SwiftUI can help you out here, otherwise you may find yourself re-inventing the wheel (ScrollView, ForEach) to have a different row selection color.

1      

I had the same problem with one of my apps. I didn;t find a 'clean' way to do it, but managed to get it working as follows:


struct Test: View {
    @State private var selection: String?

       let names = [
           "Cyril",
           "Lana",
           "Mallory",
           "Sterling"
       ]

       var body: some View {
           NavigationStack {
               List(names, id: \.self) { name in
                   Text(name)
                       .frame(maxWidth: .infinity, alignment: .leading)
                       .contentShape(Rectangle())
                       .listRowBackground(selection == name
                           ? Color.green.opacity(0.3)
                           : Color.clear)
                       .onTapGesture {
                           selection = name
                       }
               }
               .navigationTitle("List Selection")
           }
       }
}

Firstly, you have to handle setting the selected item yourself. So the selection is now set in the onTapGesture. This stops the list handling the tap. However, it introduces another problem in that the tap only works if you tap on the text.

To fix that, I added a frame, setting the maxWidth to the full width of the list (.infinity). and setting the alignment to leading. If you don't set the alignment, it will center the content. To make the entire row tappable, I then added the contentShape.

Once this is in place, I used the listRowBackground to set the colour I wanted for the selected row or to set the background to clear for those rows not selected.

It's a bit of extra work, but it gets the desired effect and has the side benefit of being able to fire off any otyher processes you need to when an item is selected.

Steve

   

TAKE YOUR SKILLS TO THE NEXT LEVEL If you like Hacking with Swift, you'll love Hacking with Swift+ – it's my premium service where you can learn advanced Swift and SwiftUI, functional programming, algorithms, and more. Plus it comes with stacks of benefits, including monthly live streams, downloadable projects, a 20% discount on all books, and free gifts!

Find out more

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.