[SwiftUI fundamental Tutorial] TextField, SecureField

위 글은 유튜브 정대리님의 SwiftUI fundamental Tutorial 강좌를 보고 작성한 정리글로

자세한 내용은 유튜브를 통해 확인하시길 권장합니다. 

 

 

 

 

 

 

일반적인 TextField 

import SwiftUI

struct ContentView: View {
    
    //text가 받는 변수 선언
    @State private var inputValue : String = ""
    
    var body: some View {
        //text가 Binding으로 감싸져있는 형태라 $ 필수
        TextField("글자를 입력하세요", text: $inputValue)
        
    }
}

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

TextField 기본 형태

TextField("글자를 입력하기 전에 보여주는 곳", text: Binding<String>)

 

text가 받는 변수를 선언해줌 (ContentView에서만 사용할거라 private 형태로 사용함)

@State private var inputValue : String = ""

 

text:가 Binding 형태라 TextField에 변수에 $ 필수

 

 

 

 

간단한 아이디 / 비밀번호 폼 만들기

import SwiftUI

struct ContentView: View {
    
    //text가 받는 변수 선언
    @State private var id : String = ""
    @State private var password : String = ""
    
    var body: some View {
        VStack(spacing: 10){
            
            HStack{
                
                TextField("아이디 입력", text: $id)
                    .autocapitalization(.none)
                    .disableAutocorrection(true)
                    //입력 글자 설정
                    //.allCharacters: 모든 글자를 대문자로
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                
                Button(action:{
                    self.id = ""
                }){
                    if(self.id.count > 0){
                    Image(systemName: "multiply.circle.fill")
                        .font(.system(size: 20))
                        .foregroundColor(.secondary)
                    }
                }
                
            }
            
            HStack{
                
                SecureField("비밀번호 입력", text: $password)
                    .autocapitalization(.none)
                    .disableAutocorrection(true)
                    .textFieldStyle(RoundedBorderTextFieldStyle())
                
                Button(action:{
                    self.password = ""
                }){
                    if(self.password.count > 0){
                    Image(systemName: "multiply.circle.fill")
                        .font(.system(size: 20))
                        .foregroundColor(.secondary)
                    }
                }
            }
            
            
            
            Text("비번 확인하기: \(password)")
            
        }.padding(.horizontal, 50)
        
        
        
    }
}

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

.textFieldStyle(): 텍스트 필드 스타일 설정

 

.autocapitalization(): 자동으로 글자를 대문자로 전환 시켜줌

.disableAutocorrection(): 자동으로 글자가 틀렸는지 안틀렸는지 옵션을 꺼주는 것 

 

if (self.id.count > 0)과 if (self.password.count > 0)을 사용해서 글자가 들어오면 곱표 아이콘이 생기도록 구현

 

최종 화면