在SwiftUI中,TextEditor
是一个视图,允许用户输入和编辑文本。当键盘弹出时,可能会遮挡住 TextEditor
视图,影响用户体验。为了确保 TextEditor
在键盘弹出时仍然可见,可以使用一些技巧将其上移。
GeometryReader
和 PreferenceKey
:通过监听键盘高度变化来调整 TextEditor
的位置。ScrollView
和 VStack
:通过滚动视图来确保 TextEditor
始终可见。适用于需要用户输入文本的应用,如聊天应用、笔记应用、表单填写等。
TextEditor
被遮挡。键盘弹出时,视图布局没有相应调整,导致 TextEditor
被遮挡。
使用 GeometryReader
和 PreferenceKey
来监听键盘高度变化,并调整 TextEditor
的位置。
import SwiftUI
struct ContentView: View {
@State private var keyboardHeight: CGFloat = 0
var body: some View {
GeometryReader { geometry in
VStack {
List {
TextEditor(text: $text)
.frame(height: 100)
.background(Color.gray.opacity(0.2))
.cornerRadius(10)
.padding(.all, 10)
.offset(y: -keyboardHeight)
}
}
.background(GeometryReader {
Color.clear.preference(key: KeyboardHeightPreferenceKey.self, value: -$0.frame(in: .named("screen")).size.height)
})
.onPreferenceChange(KeyboardHeightPreferenceKey.self) { value in
keyboardHeight = value
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.edgesIgnoringSafeArea(.all)
}
}
}
struct KeyboardHeightPreferenceKey: PreferenceKey {
static var defaultValue: CGFloat = 0
static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
value += nextValue()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
SwiftUI TextEditor GeometryReader PreferenceKey
通过上述方法,可以确保当键盘弹出时,TextEditor
视图能够自动上移,避免被键盘遮挡。
领取专属 10元无门槛券
手把手带您无忧上云