Is there a way to call a function when a SwiftUI Picker selection changes?

Question

I would like to call a function when selectedOption's value changes. Is there a way to do this in SwiftUI similar to when editing a TextField?

Specifically, I would like to save the selected option when the user changes the selectedOption.

Here is my picker:

struct BuilderPicker: View {
    let name: String
    let options: Array<String>
    @State var selectedOption = 0
    var body: some View {
        HStack {
            Text(name)
                .font(.body)
                .padding(.leading, 10)
            Picker(selection: $selectedOption, label: Text(name)) {
                ForEach(0 ..< options.count) {
                    Text(self.options[$0]).tag($0)
                }
            }.pickerStyle(SegmentedPickerStyle())
                .padding(.trailing, 25)
        }.onTapGesture {
            self.selectedOption = self.selectedOption == 0 ? 1 : 0
        }
            .padding(.init(top: 10, leading: 10, bottom: 10, trailing: 0))
            .border(Color.secondary, width: 3)
            .padding(.init(top: 0, leading: 15, bottom: 0, trailing: 15))
            .font(.body)
    }

}

I’m still new to SwiftUI and would love some help. Thanks!

E.Coms · Accepted Answer · 2019-11-03T02:25:35.600

24

If the @State value will be used in a View, you don't need extra variable name

  struct BuilderPicker: View {
// let name: String = ""
 let options: Array<String> = ["1", "2","3","4","5"]
 @State var selectedOption = 0
 var body: some View {
    HStack {
        Text(options[selectedOption])
            .font(.body)
            .padding(.leading, 10)
        Picker(selection: $selectedOption, label:    Text(options[selectedOption])) {
            ForEach(0 ..< options.count) {
                Text(self.options[$0]).tag($0)
            }
        }.pickerStyle(SegmentedPickerStyle())
            .padding(.trailing, 25)}
//        }.onTapGesture {
//            self.selectedOption = self.selectedOption == 0 ? 1 : 0
//        }
        .padding(.init(top: 10, leading: 10, bottom: 10, trailing: 0))
        .border(Color.secondary, width: 3)
        .padding(.init(top: 0, leading: 15, bottom: 0, trailing: 15))
        .font(.body)
    }


 }

If you need separated operation on the @State, the simplest way is adding one line : onReceive() to the view.

  HStack {
        Text("")
            .font(.body)
            .padding(.leading, 10)
        Picker(selection: $selectedOption, label: Text("")) {
            ForEach(0 ..< options.count) {
                Text(self.options[$0]).tag($0)
            }
        }.pickerStyle(SegmentedPickerStyle())
            .padding(.trailing, 25)}
  //        }.onTapGesture {
 //            self.selectedOption = self.selectedOption == 0 ? 1 : 0
 //        }
        .padding(.init(top: 10, leading: 10, bottom: 10, trailing: 0))
        .border(Color.secondary, width: 3)
        .padding(.init(top: 0, leading: 15, bottom: 0, trailing: 15))
        .font(.body)
        .onReceive([self.selectedOption].publisher.first()) { (value) in
            print(value)
    }

edited Nov 03 '19 at 02:25

answered Nov 03 '19 at 02:18

E.Coms

11,065
2
23
35

the reason didSet isn't working for you is because you commented out the onTapGesture. I'm trying your idea now. – Eli Front Nov 03 '19 at 02:28
Don't use extra gesture if everything on @State var is built in. – E.Coms Nov 03 '19 at 02:32
This works, but it feels like there should be a better way to do this. Thanks! – Eli Front Nov 03 '19 at 02:32
10

This works, but "[self.selectedOption].publisher.first()" w00t ?:) – sabiland Jan 09 '20 at 06:34
2

Is `[self.selectedOption].publisher.first()` Public API? It doesn't feel like Public API, but gosh darnit it works. – Iron John Bonney Mar 06 '20 at 00:54
4

You can use ‘Just(self.selectedOption)’ – E.Coms Mar 06 '20 at 01:16
What is purpose of brackets in '[self.selectedOption]'? – Small Talk May 01 '20 at 06:28
The purpose of the brackets is to put selectedOption into an Array. Once in an array, then you can call publisher on it as it conforms to Sequence protocol. – headache May 05 '20 at 21:32
Wow, thanks so much @E.Coms -- using .onReceive(Just(...)) {value in } is fantastically useful! I'm finally able to run code in a child view when a variable passed from its parent changes. – Greg Sadetsky May 26 '20 at 02:35
5

It's possible to enter an infinite loop with this if you update an ObservedObject in the callback. You'll know really quick as it will lock the ui and your memory will spike. – hidden-username Jul 12 '20 at 19:30
Can confirm that this is a dangerous approach if you update an ObservedObject in the callback. – ixany Aug 04 '20 at 20:50
Best answer. onReceive() is the key. – chitgoks Nov 16 '22 at 06:46

score 3 · Answer 2 · answered Aug 04 '20 at 20:59

3

The previous solution will end up in an infinite loop if you update an ObservedObject in the callback since .onReceive is also called when the View got rendered.

→ A better approach is to use a .onChange method on the Binding itself:

Picker(selection: $selectedOption.onChange(doSomething), label: Text("Hello world")) {
        // ...
    }

To do so you need to write an extension for Binding like described here.

answered Aug 04 '20 at 20:59

ixany

5,433
9
41
65

5

You're definitely correct about the loop. However, rather than use an extension on Binding, you can just use the .onChange(of: perform:) modifier on the Picker itself, where of: is your @State variable and perform: is the action you want to perform. – Bill Abt Mar 10 '21 at 01:35

Is there a way to call a function when a SwiftUI Picker selection changes?

2 Answers2

Linked