How can I create a text field like the one shown in the figure? with background of that color and white line?

import SwiftUI

@available(iOS 16.0, *)
struct SecondView: View {
    @State var nome = ""
    @State var cognome = ""

    
    var body: some View {
        GeometryReader { geo in
            ZStack {
                Color(red: 57 / 255, green: 63 / 255, blue: 147 / 255)
                Text("Ora tocca ai tuoi dati")
                    .font(Font.custom("Rubik", size: 22)).foregroundColor(Color.white).font(Font.body.bold()).padding(.bottom, 300).font(Font.headline.weight(.light))

                Text("Per iniziare ad usare MyEntZo completa i campi qui sotto").multilineTextAlignment(.center)
                    .font(Font.custom("Rubik", size: 18)).foregroundColor(Color.white).font(Font.body.bold()).padding(.bottom, 80).font(Font.headline.weight(.light))

                TextField("Nome", text: $nome, axis: .vertical)
                    .textFieldStyle(.roundedBorder)
                    .background(.ultraThinMaterial)
                    .padding().padding(.bottom, 20).padding(.top, 110).scaledToFill()
                    .underline()

                TextField("Cognome", text: $nome, axis: .vertical)
                    .textFieldStyle(.roundedBorder)
                    .background(.ultraThinMaterial)
                    .padding().padding(.bottom, 20).padding(.top, 190).scaledToFill()
                    .underline()
                
            
                    Button(action: {
                        print("sign up bin tapped")
                    }){
                        Text("Continua")
                            .frame(minWidth: 0, maxWidth: .infinity)
                            .font(.system(size: 18))
                            .padding()
                            .foregroundColor(.white)
                            .overlay(
                                RoundedRectangle(cornerRadius: 25)
                                    .stroke(Color.green, lineWidth: 2)
                            )
                    }
                    .background(Color.green)
                    .cornerRadius(25).frame(width: geo.size.width - 50, height: 100)
                    .padding(.top, 300)
                }
            }
            .ignoresSafeArea()
        
    }
}

struct SecondView_Previews: PreviewProvider {
    static var previews: some View {
        SecondView()
    }
}

CodePudding user response：

You can create a custom text field that wraps a regular TextField, passing in the @State as a @Binding, e.g.

struct CustomTextField: View {
    
    let placeholder: String
    @Binding var text: String
    
    var body: some View {
        VStack {
            TextField(placeholder, text: $text)
                .padding(.bottom, 4)
                .foregroundColor(.white)
            Color.white
                .frame(height: 2)
        }
        .padding([.top, .bottom, .trailing])
        .background(.blue)
    }
}

which you can use like:

struct ContentView: View {
    
    @State private var nome: String = ""
    
    var body: some View {
        VStack {
            // etc
            CustomTextField(placeholder: "Nome", text: $nome)
            // etc
        }
    }
}

CodePudding user response：

struct SecondView: View {
    @State var nome = ""
    @State var cognome = ""

    
    var body: some View {
        GeometryReader { geo in
            ZStack {
                Color(red: 57 / 255, green: 63 / 255, blue: 147 / 255)
                VStack {
                    Spacer()
                    Text("Ora tocca ai tuoi dati")
                        .font(Font.custom("Rubik", size: 22))
                        .foregroundColor(.white)
                        .bold()
                        .padding()
                        .font(Font.headline.weight(.light))
                    Text("Per iniziare ad usare MyEntZo completa i campi qui sotto").multilineTextAlignment(.center)
                        .font(Font.custom("Rubik", size: 18)).foregroundColor(Color.white).font(Font.body.bold()).padding(.bottom, 80).font(Font.headline.weight(.light))
                
                    TextField("Nome", text: $nome, prompt: Text("Nome").foregroundColor(.white.opacity(0.7)))
                        .foregroundColor(.white)
                        .padding(.horizontal)
                    Rectangle()
                        .foregroundColor(.white)
                        .background(.white)
                        .frame(maxWidth: .infinity, maxHeight: 2)
                        .padding(.horizontal)
                    TextField("Cognome", text: $cognome, prompt: Text("Cognome").foregroundColor(.white.opacity(0.7)))
                        .foregroundColor(.white)
                        .padding([.horizontal, .top])
                    Rectangle()
                        .foregroundColor(.white)
                        .background(.white)
                        .frame(maxWidth: .infinity, maxHeight: 2)
                        .padding(.horizontal)
                    
                    Button(action: {
                        print("sign up bin tapped")
                    }){
                        Text("Continua")
                            .frame(minWidth: 0, maxWidth: .infinity)
                            .font(.system(size: 18))
                            .padding()
                            .foregroundColor(.white)
                            .overlay(
                                RoundedRectangle(cornerRadius: 25)
                                    .stroke(Color.green, lineWidth: 2)
                            )
                    }
                    .background(Color.green)
                    .cornerRadius(25).frame(width: geo.size.width - 50, height: 100)
                    .padding(.top)
                    
                    Spacer()
                }
            }
                
        }
        .ignoresSafeArea()
        
    }
}