//
// 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()
}
}