SwiftUI Hide Text Input behind in Zstack? - swiftui

Question

So I am trying to build a custom look to a Text Input in SwiftUI.
I have attempting to do this with a few different tricks, and the one I came up with was using labels and i was going to hide a TextInput behind the labels and let it basically act like a textinput without actually being a text input.
I dont even know if this is possible. If not I need to go back to the drawing board.
This is what I want it to look like blank
Black numbers, with the custom spacing and font etc.
Once numbers start to be entered they turn white.
however as you can see, the textInput is visible. Is it possible to hide it?
import SwiftUI
struct CustomInput: View {
#State var id: String = " "
#State var label1: Character = Character(" ")
#State var label2: Character = Character(" ")
#State var label3: Character = Character(" ")
#State var label4: Character = Character(" ")
#State var label5: Character = Character(" ")
#State var label6: Character = Character(" ")
#State var label7: Character = Character(" ")
#State var label8: Character = Character(" ")
#State var label9: Character = Character(" ")
var body: some View {
ZStack {
Color.green
HStack(spacing: 15){
ForEach(0 ..< 9) { index in
Text(String(id[safe: index] ?? "0"))
.font(.custom("regular", size: 32))
.frame(height: 48)
.foregroundColor(id.count <= index ? .black : .white)
}
}
.frame(width: 311, height: 48)
TextField("", text: $id)
.frame(width: 311, height: 48)
}
.frame(width: 311, height: 48)
}
}
extension StringProtocol {
subscript(safe offset: Int) -> Character? {
guard 0 ..< count ~= offset else {
return nil
}
return self[index(startIndex, offsetBy: offset)]
}
}

Answer 1

Here is a workable solution for you to continue off of. Honestly your best bet is to probably use a UIViewRepresentable but I'll leave that up to you.
NOTE: You'll need to handle a few things here. It'll need a few possible errors to be handled.
Bug if you attempt to use a character, non-digit.
Disable Context Menu actions (Copy, Paste, etc..) I hid it by setting accent to .clear
Add your styling.
struct FirstView: View {
#State var numbers = [0, 0, 0, 0, 0, 0, 0, 0, 0]
#State var editedNumbers = ""
var body: some View {
ZStack {
HStack {
ForEach(0..<numbers.count) { index in
Text(String(numbers[index]))
.padding(.horizontal, 2)
.foregroundColor(numbers[index] != 0 ? .white : .black)
}
}
.frame(width: UIScreen.main.bounds.width * 0.8)
.padding(.vertical)
.background(Color.green)
TextField("", text: $editedNumbers)
.frame(width: UIScreen.main.bounds.width * 0.8)
.padding(.vertical)
.foregroundColor(.clear)
.accentColor(.clear)
.onChange(of: editedNumbers, perform: { value in
numbers = [0, 0, 0, 0, 0, 0, 0, 0, 0]
for (index, char) in editedNumbers.enumerated() {
if index >= 0 && index <= 8 {
numbers[index] = char.wholeNumberValue ?? 0
}
}
})
}
}
}