可以通过以下步骤实现:
ScrollView
来创建一个可滚动的视图容器。ScrollView {
// 添加需要滚动的内容
}
TextField("请输入内容", text: $text)
onAppear
和onDisappear
修饰符来监听键盘的出现和消失事件。.onAppear {
NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: .main) { notification in
// 键盘出现时的处理逻辑
}
}
.onDisappear {
NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillShowNotification, object: nil)
}
let keyboardHeight = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGFloat ?? 0
ScrollViewReader { scrollViewProxy in
scrollViewProxy.scrollTo(scrollViewProxy.selectedId, anchor: .bottom)
}
完整的代码示例如下:
import SwiftUI
struct ContentView: View {
@State private var text: String = ""
var body: some View {
ScrollView {
VStack {
ForEach(1...20, id: \.self) { index in
Text("Item \(index)")
.padding()
}
TextField("请输入内容", text: $text)
.padding()
.textFieldStyle(RoundedBorderTextFieldStyle())
}
}
.onAppear {
NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: .main) { notification in
let keyboardHeight = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGFloat ?? 0
ScrollViewReader { scrollViewProxy in
scrollViewProxy.scrollTo(scrollViewProxy.selectedId, anchor: .bottom)
}
}
}
.onDisappear {
NotificationCenter.default.removeObserver(self, name: UIResponder.keyboardWillShowNotification, object: nil)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
这样,当键盘出现时,滚动视图会自动滚动到最底部,确保输入框可见。这在聊天应用、评论输入等场景中非常常见。
领取专属 10元无门槛券
手把手带您无忧上云