SwiftUI FocusState 알아보기

FocusState는 iOS 15에서 새롭게 생긴 아지 나름 따끈따근한 프로퍼티 래퍼이다.

A property wrapper type that can read and write a value that SwiftUI updates as the placement of focus within the scene changes.

scene 내에 포커스 배치가 변경될 때 SwiftUI가 업데이트하는 값을 읽고 쓸 수 있는 프로퍼티 

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

Apple Developer Documentation

 

어떻게 사용할 수 있을까?

공식문서를 보면 TextField에서 포커스를 제거하거나 키보드를 해제할 때 사용한다는 것을 알 수 있다. 

 

공식문서 예제

코드를 보면 username과 password를 입력하는 Field에 focusedField가 사용되고 있다.

이를 통해

Button이 눌렸을 때, username.isEmpty인 상태이면 focusedField는 .username을 바라보고 있고 

username이 채워졌다면 focusedField가 .password를 바라보게 된다. 

포커스가 수정된 뷰로 들어가면 이 속성의 줄 바꿈 값이 지정된 값과 일치하도록 업데이트된다. 

struct focusStatePractice: View {
    
        enum Field: Hashable {
            case username
            case password
        }
    @State private var username = ""
    @State private var password = ""
    @FocusState private var focusedField: Field?
    @FocusState private var amountIsFocused: Bool
    
    var body: some View {
        VStack {
            TextField("이름", text: $username)
                .focused($focusedField, equals: .username)
            SecureField("비밀번호", text: $password)
                .focused($focusedField, equals: .password)
            
            Button("로그인") {
                if username.isEmpty {
                    focusedField = .username
                } else if password.isEmpty {
                    focusedField = .password
                } else {
                    handelLogin(username, password)
                    focusedField = nil
                }
            }
            .onAppear(perform: {
                focusedField = .username
                
            })
        }
    }
}

버튼을 눌렀을 때 필드 중 하나가 비어있으면 필드의 포커스가 해당 필드로 이동한다. 

그렇지 않으면 로그인 프로세스가 진행된다. 

포커스가 없는 경우를 허용하기 위해서는 옵셔널 값으로 지정해야 한다. 또한 필드에서 모든 포커스를 제거하고 싶다면

focusedField = nil를 지정해주면 된다. 

 

예제2

다음과 같이 TextField가 숫자 키패드를 입력받을때 키보드를 다시 내릴 방법이 없다. 

이럴 경우 @FocusState를 사용해서 해결할 수 있다. 

 

struct focusStatePractice2: View {
    @State private var checkAmount = 0.0
    @FocusState private var amountIsFocused: Bool
    var body: some View {
        NavigationView {
            Form {
                Section {
                    TextField("Amount", value: $checkAmount, format: .currency(code: Locale.current.currencyCode ?? "USD"))
                        .keyboardType(.decimalPad)
                        .focused($amountIsFocused)
                    
                }
            }
            .toolbar(content: {
                ToolbarItemGroup(placement: .keyboard) {
                    Button("Done") {
                        amountIsFocused = false
                    }
                }
            })
        }
    }
}

TextField에 focused를 걸어주고 

Button("Done")을 클릭했을 때 @FocusState를 false로 풀어주면 키보드가 내려가게 된다.