어서와 @FocusState는 처음이지?

FocusState 공식문서

• 번역 : Swift 값을 읽고 쓸 수 있는 프로퍼티 래퍼 유형 ! 장면 내 포커스 위치가 변경되면 UI가 업데이트됩니다.
• 자체 해석 : 마우스로 따로 해당 텍스트 필드를 클릭하지 않아도 자동으로 다음 순서의 텍스트 필드로 포커스 ( 텍스트 필드를 가리킴 ) 한다. 

 

TextField
@State 상태 프로퍼티를 사용하여 입력되는 값을 설정해준다. 

struct LoginView: View {
    @State var emailText: String = ""
    @State var passwordText: String = ""
    
    var body: some View {
            VStack {
            TextField("이메일을 입력하세요", text: $emailText)
                .padding()
                .background(.thinMaterial)
                .cornerRadius(10)
                .textInputAutocapitalization(.never)
              
            SecureField("비밀번호를 입력하세요", text: $passwordText)
                .padding()
                .background(.thinMaterial)
                .cornerRadius(10)
                .padding(.bottom, 30)
               
    		}
    	}
    }

 

• @FocusState를 사용해서 보자 

// focus를 위한 열거형 ( 포커스를 변경하기 위한 열겨형 ) 
enum Field {
    case email
    case password
}

struct LoginView: View {
    @State var emailText: String = ""
    @State var passwordText: String = ""
    //FocusState 설정
    @FocusState private var focusedField: Field?
    
    var body: some View {
            VStack {
            TextField("이메일을 입력하세요", text: $emailText)
                .padding()
                .background(.thinMaterial)
                .cornerRadius(10)
                .textInputAutocapitalization(.never)
                // textField가 포커스를 얻으면 프로퍼티에 값을 변경 값이 변경되면 focus 획득
                .focused($focusField, equals: .email)
            SecureField("비밀번호를 입력하세요", text: $passwordText)
                .padding()
                .background(.thinMaterial)
                .cornerRadius(10)
                .padding(.bottom, 30)
                // textField가 포커스를 얻으면 프로퍼티에 값을 변경 값이 변경되면 focus 획득
                .focused($focusField, equals: .password)
    		}
    	}
    }

 

• 버튼을 만들어서 focusField를 변경해보자
  • email이 입력 안되어있으면 email로 포커싱 
  • password가 입력 안되어있으면 password로 포커싱

// focus를 위한 열거형 ( 포커스를 변경하기 위한 열겨형 ) 
enum Field {
    case email
    case password
}

struct LoginView: View {
    @State var emailText: String = ""
    @State var passwordText: String = ""
    @FocusState private var focusedField: Field?
    
    var body: some View {
            VStack {
            TextField("이메일을 입력하세요", text: $emailText)
                .padding()
                .background(.thinMaterial)
                .cornerRadius(10)
                .textInputAutocapitalization(.never)
                .focused($focusField, equals: .email)
            SecureField("비밀번호를 입력하세요", text: $passwordText)
                .padding()
                .background(.thinMaterial)
                .cornerRadius(10)
                .padding(.bottom, 30)
                .focused($focusField, equals: .password)
                
             // focusField 변경을 위해 버튼 추가 
             Button {
             	// email이 비어있으면 포커스를 email에 두어라
                if emailText.isEmpty {
                    focusField = .email
                // password이 비어있으면 포커스를 password에 두어라
                } else if passwordText.isEmpty {
                    focusField = .password
                // 둘다 비어있지 않으면 프린트를 찍어라 --> 성공   
                } else {
                    print("로그인 되었습니다.")
                }
            } label: {
                    Text("로그인")
                        .padding()
                        .foregroundColor(.white)
                        .background(.blue)
                        .cornerRadius(10)
                        .padding(.bottom, 40)
            }
                
                
    		}
    	}
    }

 

결과 

focusState 활용

 

 

 

참조 : https://developer.apple.com/documentation/swiftui/focusstate/