Un ejemplo de cómo podrías montarlo:
struct ContentView: View {
@State var code1: String = ""
@State var code2: String = ""
@State var code3: String = ""
@State var code4: String = ""
var body: some View {
VStack(alignment: .center, spacing: 10) {
Text("Please, enter the authentication code")
.padding(.bottom, 10)
HStack {
Spacer()
Text("1")
.frame(width: 30, height: 30)
Text("2")
.frame(width: 30, height: 30)
Text("3")
.frame(width: 30, height: 30)
Text("4")
.frame(width: 30, height: 30)
Spacer()
}
HStack {
Spacer()
TextField("", text: self.$code1)
.multilineTextAlignment(TextAlignment.center)
.frame(width: 30, height: 30)
.overlay(RoundedRectangle(cornerRadius: 5).stroke())
TextField("", text: self.$code2)
.multilineTextAlignment(TextAlignment.center)
.frame(width: 30, height: 30)
.overlay(RoundedRectangle(cornerRadius: 5).stroke())
TextField("", text: self.$code3)
.multilineTextAlignment(TextAlignment.center)
.frame(width: 30, height: 30)
.overlay(RoundedRectangle(cornerRadius: 5).stroke())
TextField("", text: self.$code4)
.multilineTextAlignment(TextAlignment.center)
.frame(width: 30, height: 30)
.overlay(RoundedRectangle(cornerRadius: 5).stroke())
Spacer()
}
HStack {
Text("Back")
.foregroundColor(.blue)
Spacer()
Text("Next")
.foregroundColor(.blue)
}.padding()
}
}
}
