swiftui 키보드 올라올 때 텍스트필드를 가리는데 어떻게 해결하나요

swiftui 키보드 올라올 때 텍스트필드를 가리는데 어떻게 해결하나요

작성일 2023.03.21댓글 1건
    게시물 수정 , 삭제는 로그인 필요

Textfield 속성 중에 axis를 .vertical 로 바꿨더니 텍스트필드 부분이 자동으로 키보드 위로 올라오던 게 안올라오네요


#swiftui 키보드 내리기 #swiftui 키보드 화면 올리기 #swiftui 키보드 감지 #swiftui 키보드 스크롤

profile_image 익명 작성일 -

1.SwiftUI에서 키보드가 올라올 때 TextField를 가리는 문제를 해결하는 방법은 여러가지가 있습니다.

ScrollView를 사용하여 키보드 올라올 때 텍스트필드를 위로 스크롤해주는 방법

TextField를 ScrollView 내부에 배치하면, 키보드가 올라올 때 ScrollView가 자동으로 스크롤되어 TextField가 가려지지 않도록 해줍니다.

struct ContentView: View {

@State private var text: String = ""

var body: some View {

ScrollView {

VStack {

TextField("Enter text", text: $text)

.textFieldStyle(RoundedBorderTextFieldStyle())

.padding()

}

}

}

}

2.onAppear와 onDisappear를 사용하여 키보드 올라올 때 뷰 전체를 위로 스크롤해주는 방법

TextField를 VStack 내부에 배치하고, VStack에 .onAppear와 .onDisappear modifier를 사용하여 뷰가 appear/disappear될 때 키보드 이벤트를 구독하고, 키보드가 올라올 때 VStack 전체를 위로 스크롤해주는 방법입니다.

struct ContentView: View {

@State private var text: String = ""

@State private var keyboardHeight: CGFloat = 0

var body: some View {

VStack {

TextField("Enter text", text: $text)

.textFieldStyle(RoundedBorderTextFieldStyle())

.padding()

}

.padding(.bottom, keyboardHeight)

.onAppear {

NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: .main) { notification in

let keyboardFrame = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect ?? .zero

keyboardHeight = keyboardFrame.height

}

NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillHideNotification, object: nil, queue: .main) { _ in

keyboardHeight = 0

}

}

.onDisappear {

NotificationCenter.default.removeObserver(self)

}

}

}