Getting SwiftUI bindings right in a custom view - binding

Question

I'm playing around with creating custom views for SwiftUI and am missing something about how bindings work. I have the following code:
import SwiftUI
struct ContentView: View {
#State var number: Int = 0
var body: some View {
VStack {
NumberPicker(format: "%02d", max: 20, value: $number)
Text("You picked \(number)")
}
}
}
struct NumberPicker: View {
var format: String = "%d"
var max: Int
#Binding var value: Int
var valueProxy: Binding<String> {
Binding<String>(
get: { String(format: self.format, self.$value.wrappedValue) },
set: { self.value = Int(String($0))! }
)
}
var body: some View {
Picker("", selection: valueProxy) {
ForEach(0..<max) { item in
Text(String(format: self.format, item))
}
}
.frame(width: 40, height: 175)
.clipped()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView(number: 5)
}
}
When I run this (either in the preview or simulator) the view doesn't automatically select 05 at startup as I would expect. Also, manipulating the picker does not update the Text view below it. From what I've read, I feel like this ought to work but maybe I'm missing something obvious? Or am I going about this the wrong way? This is using Xcode 11.3.1

Answer 1

The problem is your Picker's selection value. You should use the #Binding var value: Int instead of valueProxy because value of your NumberPicker view is connected with number of your ContentView. So when you change value you will also change number.
If you want the Picker to start with the number 5, you need to start number with 5 instead of 0.
The code would be like this:
struct ContentView: View {
#State var number: Int = 5
var body: some View {
VStack {
NumberPicker(format: "%02d", max: 20, value: $number)
Text("You picked \(number)")
}
}
}
struct NumberPicker: View {
var format: String = "%d"
var max: Int
#Binding var value: Int
var body: some View {
Picker("", selection: $value) {
ForEach(0..<max) { item in
Text(String(format: self.format, item))
}
}
.frame(width: 40, height: 175)
.clipped()
}
}