Picker with Unexpected Results

Question

Created Jan ’22

Replies 2

Boosts 0

Participants 2

I'm playing with Picker and have come up with some unexpected results. As shown below, I have three pickers in a form.

struct PickColorView: View {
	@State var numberIndex: Int = 4
	@State var textSizeIndex: Int = 0
	
	var body: some View {
		NavigationView {
			Form {
				Picker(selection: $numberIndex, label: Text("Numbers")) {
					ForEach((0...20), id: \.self) {
						Text("\($0)")
					}
				}.onChange(of: numberIndex) { newIndex in
					print("Index: \(newIndex)")
				}
				
				Picker(selection: $textSizeIndex, label: Text("textSizeTitle")) {
					ForEach([14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60], id: \.self) { textSize in
						Text("\(textSize)")
					}
				}.onChange(of: textSizeIndex) { newIndex in
					print("Index: \(newIndex)")
				}
			}
			.navigationBarTitle("Settings")
			.navigationBarHidden(false)
		}
		.navigationViewStyle(StackNavigationViewStyle())
	}
}

Well, if I run it, the top picker shows its initial selection (4) while the other doesn't. I wonder why? The following is a screenshot. (Please ignore the top picker appearing in the screenshot).

If I go ahead and select one with the bottom picker, I end up with an actual value instead of the index. So if I select 18 (Please see the screenshot below.), I expect to get 2 with the onChange thing. But I get 18, instead. So how can I receive the index?

Muchos thankos.

Answered by Tomato in 702964022

I've solved both of the issues with the following.

struct PickColorView: View {
	@State var numberIndex: Int = 4
	@State var textSizeIndex: Int = 0
	let numbers: [Int] = [14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60]
	
	var body: some View {
		NavigationView {
			Form {
				Picker(selection: $numberIndex, label: Text("Numbers")) {
					ForEach((0...20), id: \.self) {
						Text("\($0)")
					}
				}.onChange(of: numberIndex) { newIndex in
					print("Index: \(newIndex)")
				}
				
				Picker("Numbers", selection: $textSizeIndex) {
					ForEach(0..<numbers.endIndex) { index in
						let number = numbers[index]
						Text("\(number)")
					}
				}.onChange(of: textSizeIndex) { newIndex in
					print("Index: \(newIndex)")
				}
			}
			.navigationBarTitle("Settings")
			.navigationBarHidden(false)
		}
		.navigationViewStyle(StackNavigationViewStyle())
	}
}

Boost

Answer 1

robnotyou OP

Jan ’22

Consider this:

struct PickColorView: View {
    @State private var number1: Int = 4
    @State private var number2: Int = 0
    
    let range: ClosedRange<Int> = 0...20
    let array: Array<Int> = [14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60]
    
    var body: some View {
        NavigationView {
            Form {
                Picker(selection: $number1, label: Text("Number1")) {
                    ForEach(range, id: \.self) { number in
                        Text("\(number)")
                    }
                }
                .onChange(of: number1) { newNumber1 in
                    print("newNumber1: \(newNumber1)")
                }
                
                Picker(selection: $number2, label: Text("Number2")) {
                    ForEach(array, id: \.self) { number in
                        Text("\(number)")
                    }
                }
                .onChange(of: number2) { newNumber2 in
                    print("newNumber2: \(newNumber2)")
                }
            }
            .navigationBarTitle("Settings")
            .navigationBarHidden(false)
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}

1

Answer 2

Tomato OP

Jan ’22

Accepted Answer

I've solved both of the issues with the following.

struct PickColorView: View {
	@State var numberIndex: Int = 4
	@State var textSizeIndex: Int = 0
	let numbers: [Int] = [14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60]
	
	var body: some View {
		NavigationView {
			Form {
				Picker(selection: $numberIndex, label: Text("Numbers")) {
					ForEach((0...20), id: \.self) {
						Text("\($0)")
					}
				}.onChange(of: numberIndex) { newIndex in
					print("Index: \(newIndex)")
				}
				
				Picker("Numbers", selection: $textSizeIndex) {
					ForEach(0..<numbers.endIndex) { index in
						let number = numbers[index]
						Text("\(number)")
					}
				}.onChange(of: textSizeIndex) { newIndex in
					print("Index: \(newIndex)")
				}
			}
			.navigationBarTitle("Settings")
			.navigationBarHidden(false)
		}
		.navigationViewStyle(StackNavigationViewStyle())
	}
}

0