SwiftUI에서 @FocusState 속성 래퍼를 사용하는 방법

다음은 TextFields에 초점을 맞추고 사용자가 적절한 필드를 채울 때까지 양식을 닫지 않도록 하는 방법입니다.


이 글도 동영상입니다

WWDC 2021에서는 속성 래퍼 @FocusState를 도입했습니다. 포커스가 있는 텍스트 필드를 매우 쉽게 설정하는 데 사용할 수 있습니다. 작업 중인 앱에 새로운 커피 가방을 추가하기 위해 이 양식을 열겠습니다.

저장을 클릭하면 양식이 닫히고 키보드가 닫히지 않습니다. @FocusState는 이를 해결하는 데 도움이 될 수 있습니다. 추가해야 할 첫 번째 항목은 필수로 지정하려는 필드가 포함된 열거형입니다.

private enum Field {
    case name
    case style
    case roaster
}

enum은 Hashable 프로토콜을 준수해야 하므로 Hashable을 추가하여 준수를 강제하거나 케이스에 할당된 값이 없는 한 Swift가 "자동으로"수행하므로 괜찮을 것입니다.

이제 속성 래퍼 @FocusState private var focusField: Field를 사용하여 변수를 추가해야 합니다.
그런 다음 TextFields에서 포커스 수정자와 동일해야 하는 필드를 추가합니다.

TextField("Name", text: $beans.name)
    .textFieldStyle(.roundedBorder)
    .focused($focusedField, equals: .name)
TextField("Style", text: $beans.style)
    .textFieldStyle(.roundedBorder)
    .focused($focusedField, equals: .style)

TextField("Roaster", text: $beans.roaster)
    .textFieldStyle(.roundedBorder)
    .focused($focusedField, equals: .roaster)

다음으로, 이러한 필드가 채워졌는지 확인하고 다음 focusField를 설정하기 위해 몇 가지 로직을 입력해 보겠습니다.

Button {
    if beans.name.isEmpty {
        focusedField = .name
    } else if beans.style.isEmpty {
        focusedField = .style
    } else if beans.roaster.isEmpty {
        focusedField = .roaster
    } else {
        if isEdit {
            beans.updateBean(context: viewContext)
        } else {
            beans.addBeansToData(context: viewContext)
            resetBeans()
        }
      showForm = false
    }
}

또한 저장에 성공한 후에는 focusfield를 nil로 설정하고 키보드를 닫아야 합니다.

Button {
    if beans.name.isEmpty {
        focusedField = .name
    } else if beans.style.isEmpty {
        focusedField = .style
    } else if beans.roaster.isEmpty {
        focusedField = .roaster
    } else {
        if isEdit {
            beans.updateBean(context: viewContext)
        } else {
            beans.addBeansToData(context: viewContext)
            resetBeans()
        }
      showForm = false
      focusedField = nil
    }
}

이제 양식을 한 번 더 살펴보고 모두 함께 표시해 보겠습니다.

@FocusState 속성 래퍼를 사용하는 방법을 보여줬기를 바랍니다. 질문이 있으시면 아래에 의견을 남겨주십시오.


내 게시물을 받은편지함으로 직접 보내시겠습니까?
엄청난! 회원가입 here !