当键盘处于视图中时 SwiftUI 文本字段填充
我有一个滚动视图,其中只有文本字段。我希望能够点击任何文本字段并让键盘将其稍微向上推。
struct DetailView: View {
@EnvironmentObject var vm: ViewModel
var body: some View {
ScrollView {
VStack {
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
Group {
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
}
}
}
}
}
当文本字段中没有填充/样式时,这非常有效。如果我使用带有样式(边框、填充)的自定义文本字段,键盘将悬停在文本字段的一部分上。这是我的自定义文本字段:
struct NotesField: View {
@Binding var value: String
init(_ value: Binding<String>) {
self._value = value
}
var body: some View {
TextField("Enter stuff", text: $value)
.padding()
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color.gray, lineWidth: 1)
)
}
}
众所周知,ios14 会自动为您处理此问题,因此我想要一个解决方案,无需使用视图修饰符来监听键盘何时打开或不打开。
I have a Scrollview with just textfields in it. I want to be able to tap on any textfield and have the keyboard push it up slightly.
struct DetailView: View {
@EnvironmentObject var vm: ViewModel
var body: some View {
ScrollView {
VStack {
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
Group {
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
TextField("Enter stuff", text: $vm.username)
.padding(.bottom, 20)
}
}
}
}
}
This works perfectly when there's no padding/styling in the textfield. If I use a custom textfield with styling (borders, padding), the keyboard hovers over part of the textfield. This is my custom textfield:
struct NotesField: View {
@Binding var value: String
init(_ value: Binding<String>) {
self._value = value
}
var body: some View {
TextField("Enter stuff", text: $value)
.padding()
.overlay(
RoundedRectangle(cornerRadius: 10)
.stroke(Color.gray, lineWidth: 1)
)
}
}
It's well known that ios14 handles this for you automatically so I want a solution where I don't have to use a view modifier to listen to when the keyboard is opened or not.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
如果您使用带有滚动视图的 iOS 14+ 或可以选择使用滚动视图。
https://developer.apple.com/documentation/swiftui/scrollviewproxy https://developer.apple.com/documentation/swiftui/scrollviewreader
下面可能会帮助
上面的 imp 部分
希望这对某人有帮助:)
If you are using iOS 14+ with scrollview or have the option to use scrollview.
https://developer.apple.com/documentation/swiftui/scrollviewproxy https://developer.apple.com/documentation/swiftui/scrollviewreader
Below might help
imp part from above is
Hope this helps someone :)