Problems building reusable component in SwiftUI - binding

Question

I'm trying to use SwiftUI to build a reusable component I previously implemented with #IBDesignable, but it proving to be more difficult than I would have imagined. The problems are a) initializing the text variable and b) clipping the count value. See the code below.
I've tried modifying the value of the text variable both in an initializer and within the body closure, based on changes in the count value, but neither seems to be allowed.
The limiting of the count value and the initialization of the text variable need to happen both from within the view and also when the client of the view modifies the count value. I don't have a clue how to go about making this happen when the count is modified by the client view
#Binding var count: Int
#State var text : String = ""
var maxVal = 5
var minVal = -5
var body: some View {
VStack {
TextField($text,
onEditingChanged: validateString
)
.frame(maxWidth: .infinity, maxHeight: .infinity)
HStack {
Button(
action: { self.add(1) },
label: { Text("Plus")}
)
Button(
action: { self.add(-1) },
label: { Text("Minus")}
)
}
}
}
func setVal(_ num: Int) {
count = min(max(num, minVal), maxVal)
if text != String(count) { text = String(count) }
}
func validateString(_ flag: Bool) {
if !flag {
guard let num = Int(text) else { return }
setVal(num)
}
}
func add(_ increment: Int) {
setVal(count + increment)
}
}
If I understood all the internal details of binding and of how SwiftUI rebuilds views, I'm sure I could figure this out. But this is one of the downsides of creating and automatic "it just works" frameworks. I'm very excited about SwiftUI and am hoping to surmount this hurdle in understanding.

Answer 1

You left some parts of the code out, specially how you are trying to initialize your view. But this should get you started.
Also note that onEditingChanged won't be called until you leave the textField (or hide the keyboard), so clipping won't happen until then.
Also I noticed you are using an older TextField initializer that has been deprecated already. I updated to its new version.
import SwiftUI
struct ContentView : View {
#State private var count = 3
var body: some View {
MyView(count: $count)
}
}
struct MyView: View {
#Binding var count: Int
#State private var text : String
var maxVal = 5
var minVal = -5
init(count: Binding<Int>) {
self._count = count
self._text = State(initialValue: "\(count.value)")
}
var body: some View {
VStack {
TextField("", text: $text, onEditingChanged: validateString)
.textFieldStyle(.roundedBorder)
.frame(maxWidth: .infinity, maxHeight: .infinity)
HStack {
Button(
action: { self.add(1) },
label: { Text("Plus")}
)
Button(
action: { self.add(-1) },
label: { Text("Minus")}
)
}
}
}
func setVal(_ num: Int) {
count = min(max(num, minVal), maxVal)
if text != String(count) { text = String(count) }
}
func validateString(_ flag: Bool) {
if !flag {
guard let num = Int(text) else { return }
setVal(num)
}
}
func add(_ increment: Int) {
setVal(count + increment)
}
}

Answer 2

So, basically you forgot to add a init() for your reusable component. By default, structs are created with their own initializer for the properties that are declared in those structs. But If you want to build a reusable component you need to add a init(). It helped me as I was creating a custom library of reusable SwiftUI components and then using it in my project. So, My public struct in my library had to include a init().