SwiftUI 3.0TextField的使用


//
//  ContentView.swift
//  TextFieldControl
//
//  Created by lujun on 2021/12/19.
//

import SwiftUI

struct ContentView: View {
    var body: some View {
//        basicUsage
//        modifiers
//        styleTextField
        customStyle
        
        
    }
    
    @State private var email: String = ""
    @State private var isEditing: Bool = false
    var basicUsage: some View {
        VStack( spacing: 30) {
            if #available(iOS 15.0, *) {
                TextField("请输入你的邮箱",text: $email) { isEditing in
                    self.isEditing = isEditing
                }.onSubmit ({
                    
                    debugPrint("你的邮箱\(email)")
                })
                    .autocapitalization(.none)
                    .padding()
                    
            } else {
                
            }
            
            
        }
    }
    
    var modifiers: some View {
        TextField("请输入您的邮箱input EE email", text: $email)
            .textContentType(.emailAddress)
            .keyboardType(.emailAddress)
            .disableAutocorrection(true)
            .textCase(.lowercase)
            .padding()
            .border(Color.gray)
        
    }
    
    @State private var givenName: String = ""
    @State private var familyName: String = ""
    
    var styleTextField: some View {
        VStack {
            VStack {
                TextField("Given Name",text: $givenName)
                TextField("family Name",text: $familyName)
            }
            .textFieldStyle(RoundedBorderTextFieldStyle())
            VStack{
                TextField("Given Name",text: $givenName)
                TextField("family Name",text: $familyName)
            }
            .textFieldStyle(PlainTextFieldStyle())
            VStack{
                TextField("Given Name",text: $givenName)
                TextField("family Name",text: $familyName)
            }
            .textFieldStyle(DefaultTextFieldStyle())
        }
        .padding()
    }
    
    @State var searchContent: String = ""
    var customStyle: some View {
        VStack(alignment: .leading, spacing: 20) {
            Text("Custom TextFeild Style")
                .font(.title2)
                .padding()
                .background(Color.red)
            TextField("Search...",text: $searchContent)
                .textFieldStyle(OvalTextFieldStyle())
                .textFieldStyle(UnderlineTextFieldStyle())
        }.padding()
    }
    
    struct OvalTextFieldStyle: TextFieldStyle {
        func _body(configuration: TextField) -> some View {
            HStack {
                Image(systemName: "magnifyingglass")
                    .foregroundColor(.purple)
                configuration
                    .padding(.vertical,10)
                
            }
            .padding(.horizontal,10)
            .background(Color.yellow)
            .cornerRadius(20)
            .shadow(color: .gray, radius: 2)
            
        }
    }
    
    struct UnderlineTextFieldStyle: TextFieldStyle {
        func _body(configuration: TextField) -> some View {
            configuration
                .overlay(
                 Rectangle()
                    .frame(height: 1)
                    .padding(.top,35)
                )
                .foregroundColor(.pink)
                .padding(10)
            
        }
    }
    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}