Custom Text Input Change Label when blank - swiftui

Question

I am making a custom label for a text input.
The idea is when the text input is changed, the label changes with it.
I can get it to work, as long as i load the view with the id value with some value in it, such as 1234
But if i have it blank...
Also, it only stores those values, it wont change when you type in the text input.
the EFFECT works, just not the numbers.
VStack {
Custom_Input(id: "")
}
it throws the following error.
Thread 1: Fatal error: String index is out of bounds
This works fine
VStack {
Custom_Input(id: "1234")
}
im not sure how to approach this.
This is the entire view here.
import SwiftUI
struct Custom_Input: 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(" ")
var body: some View {
ZStack {
Color.green
VStack {
HStack(spacing: 13){
if(id.count < 1) {
Label("0", systemImage: "")
.frame(height: 48)
.padding(.leading, -7)
.foregroundColor(.black)
} else {
Label(String(label1), systemImage: "")
.foregroundColor(.white)
.frame(height: 48)
.padding(.leading, -7)
.foregroundColor(.white)
}
if(id.count < 2) {
Label("0", systemImage: "")
.frame(height: 48)
.padding(.leading, -7)
.foregroundColor(.black)
} else {
Label(String(label2), systemImage: "")
.foregroundColor(.white)
.frame(height: 48)
.padding(.leading, -7)
.foregroundColor(.white)
}
if(id.count < 3) {
Label("0", systemImage: "")
.frame(height: 48)
.padding(.leading, -7)
.foregroundColor(.black)
} else {
Label(String(label3), systemImage: "")
.foregroundColor(.white)
.frame(height: 48)
.padding(.leading, -7)
.foregroundColor(.white)
}
if(id.count < 4) {
Label("0", systemImage: "")
.frame(height: 48)
.padding(.leading, -7)
.foregroundColor(.black)
} else {
Label(String(label4), systemImage: "")
.foregroundColor(.white)
.frame(height: 48)
.padding(.leading, -7)
.foregroundColor(.white)
}
}
.onAppear {
label1 = id[0]
label2 = id[1]
label3 = id[2]
label4 = id[3]
}
.frame(width: 311, height: 48)
TextField("", text: $id)
.background(.red)
.frame(width: 311, height: 48)
}
}
.frame(width: 311, height: 48)
}
}
extension StringProtocol {
subscript(offset: Int) -> Character {
self[index(startIndex, offsetBy: offset)]
}
}
struct Custom_Input_Previews: PreviewProvider {
static var previews: some View {
Custom_Input(id: "1234")
}
}

Answer 1

A lot of this code is duplicated, and can be simplified.
Firstly, why didn't your solution work, and why did it cause a runtime error? Well, when you initialized it with a string with less than 4 characters, you are accessing the String in an out-of-bounds index. The onAppear(perform:) is run as soon as the view is visible, so this is where the index is accessed causing the error.
To fix this, you can just get the character when you need it / know it exists. In my solution below, I created an extension to safely get the index, otherwise it returns nil:
extension StringProtocol {
subscript(safe offset: Int) -> Character? {
guard 0 ..< count ~= offset else {
return nil
}
return self[index(startIndex, offsetBy: offset)]
}
}
The main view code has been simplified with a ForEach so code doesn't have to be repeated. The layout is also almost identical, but greatly simplified. Code:
struct CustomInput: View {
#Binding var id: String
var body: some View {
VStack(spacing: 20) {
HStack(spacing: 13) {
ForEach(0 ..< 4) { index in
Text(String(id[safe: index] ?? "0"))
.foregroundColor(id.count <= index ? .black : .white)
}
}
TextField("", text: $id)
.background(.red)
}
.padding(.vertical)
.background(Color.green)
.padding(30)
}
}
Usage:
struct ContentView: View {
#State private var id = ""
var body: some View {
CustomInput(id: $id)
}
}
Result: