SwiftUI List how to identify what item is selected on macOS

Question

Here is what I have based on this answer. The code currently allows the user to select a cell but I cannot distinguish which cell is selected or execute any code in response to the selection. In summary, how can I execute code based on the selected cell's name and execute on click. The cell currently highlights in blue where clicked, but I want to identify it and act accordingly based on that selection. Note: I am not looking to select the cell in editing mode. Also, how can I programmatically select a cell without click?

struct OtherView: View {
    @State var list: [String]
    @State var selectKeeper = Set<String>()

    var body: some View {
        NavigationView {
            List(list, id: \.self, selection: $selectKeeper) { item in
                Text(item)
            }
        }
    }
}

Here is a gif demoing the selection

score 5 · Accepted Answer · answered Apr 28 '20 at 06:03

I found a workaround, but the text itself has to be clicked- clicking the cell does nothing:

struct OtherView: View {
    @State var list: [String]
    @State var selectKeeper = Set<String>()

    var body: some View {
        NavigationView {
            List(list, id: \.self, selection: $selectKeeper) { item in
                Text(item)
                  .onTapGesture {
                     print(item)
                  }
            }
        }
    }
}

score 0 · Answer 2 · answered Apr 27 '20 at 04:51

List selection works in Edit mode, so here is some demo of selection usage

struct OtherView: View {
    @State var list: [String] = ["Phil Swanson", "Karen Gibbons", "Grant Kilman", "Wanda Green"]
    @State var selectKeeper = Set<String>()

    var body: some View {
        NavigationView {
            List(list, id: \.self, selection: $selectKeeper) { item in
                if self.selectKeeper.contains(item) {
                    Text(item).bold()
                } else {
                    Text(item)
                }
            }.navigationBarItems(trailing: HStack {
                if self.selectKeeper.count != 0 {
                    Button("Send") {
                        print("Sending selected... \(self.selectKeeper)")
                    }
                }
                EditButton()
            })
        }
    }
}

The only problem is .navigationBarItems doesn't work on SwiftUI on macOS — Isaac, Apr 27 '20 at 17:59

P. A. Monsaille · Answer 3 · 2020-07-13T13:25:17.847

To spare you the labour pains:

import SwiftUI

struct ContentView: View {
    @State private var selection: String?
    let list: [String] = ["First", "Second", "Third"]
    
    var body: some View {
        NavigationView {
            HStack {
                List(selection: $selection) {
                    ForEach(list, id: \.self) { item in
                        VStack {
                            Text(item)
                        }
                    }
                }
                TextField("Option", text: Binding(self.$selection) ?? .constant(""))
            }
            .frame(minWidth: 100, maxWidth: .infinity, minHeight: 100, maxHeight: .infinity)
        }
    }
}

This solution deals with the problem @Isaac addressed.

screenshot

ingconti · Answer 4 · 2021-01-23T16:38:34.490

0

my 2 cents for custom selection and actions works in swift 5.1 / iOS14:

see:

https://gist.github.com/ingconti/49497419e5edd84a5f3be52397c76eb4

I left a lot of debug "print".. to better understand.

edited Jan 23 '21 at 16:38

answered Jan 23 '21 at 14:57

ingconti

10,876
3
61
48

The question explicitly asks for implementation on macOS not on iOS – LukeSideWalker Aug 07 '23 at 16:03
my fault, BUT: 1) a simple #if os(iOS).... will fix, 2) I FXED GIST. So pls take an look and upvote. – ingconti Aug 08 '23 at 20:20

score 0 · Answer 5 · answered Dec 10 '22 at 01:37

You can react to the selected item by using onChange on your selection variable.

You can set the selection manually by simply setting the variable. This will also trigger onChange.

Here's some example code that will run directly in Playgrounds:

import SwiftUI
import PlaygroundSupport

struct OtherView: View {
    @State var list: [String] = ["a", "b", "c"]
    @State var selection: String?

    var body: some View {
        NavigationView {
            VStack {
                List(list, id: \.self, selection: $selection) { item in
                    Text(item)
                }
                .onChange(of: selection) {s in
                    // React to changes here
                    print(s)
                }
                
                Button("Select b") {
                    // Example of setting selection programmatically
                    selection = "b"
                }
            }
        }
    }
}

let view = OtherView()
PlaygroundPage.current.setLiveView(view)

SwiftUI List how to identify what item is selected on macOS

5 Answers5

Linked