[iOS][SwiftUI] @FocusState 간단하게 알아보기

안녕하세요. iOSangBong입니다. 

오늘은 FocusState에 대해 알아보겠습니다.

 

일단 공식 문서를 보게되면

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

FocusState | Apple Developer Documentation

Scene의 초점 위치가 변경됨에 따라 SwiftUI가 업데이트 하는 값을 읽고 쓸 수 있는 property wrapper 타입입니다.

 

간단하게 말하면 TextField의 포커스(firstResponder)를 변경할 수 있는 기능을 제공해줍니다.

 

바로 사용을 해보겠습니다.

우선 첫번째로 열거형을 선언을 해줍니다.

그 다음 텍스트 필드 두개를 만들어줍니다.

그리고 @FocusState를 선언해주고 연결을 해줍니다.

이렇게 연결을 해주고 사용하면 됩니다.

간단히 버튼을 만들어서 확인을 해보면?

 

포커스가 제대로 이동하는걸 보실 수 있습니다.

 

포커싱을 종료하고 싶다면 간단하게 nil 처리만 해주면 됩니다.

nil 처리를 버튼에 넣어주고 실행하면

간단히 포커스가 종료되시는걸 볼 수 있습니다~!

이걸 사용해서 로그인 화면이라던지 아니면 무언가 데이터 입력을 많이 하게 될 경우

사용하시면 좋을 것 같습니다.

 

참고를 위해 풀코드를 올려놓겠습니다~!

import SwiftUI

enum FocusEnum {
    case name
    case password
}


struct FocusView: View {
    
    @State var nameText = ""
    @State var passwordText = ""
    
    @FocusState private var focusField: FocusEnum?
    
    var body: some View {
        VStack(spacing: 50) {
            Group {
                TextField("이름", text: $nameText)
                    .focused($focusField, equals: .name)
                
                TextField("패스워드", text: $passwordText)
                    .focused($focusField, equals: .password)
            }
            .padding(.vertical, 7)
            .padding(.horizontal, 10)
            .background(
                RoundedRectangle(cornerRadius: 4)
                    .strokeBorder(.black, lineWidth: 1)
            )
            
            HStack {
                Group {
                    Button {
                        self.focusField = .name
                    } label: {
                        Text("이름")
                            .foregroundColor(.white)
                    }
                    
                    Button {
                        self.focusField = .password
                    } label: {
                        Text("패스워드")
                            .foregroundColor(.white)
                    }
                }
                .frame(width: 150, height: 50)
                .background(Color.blue)
            }
            
            Button {
                self.focusField = nil
            } label: {
                Text("종료")
                    .foregroundColor(.white)
            }
            .frame(width: 150, height: 50)
            .background(Color.blue)
        }
        .padding()
    }
}

다들 즐코딩 하세요. 그럼 이만~