在我的用例中,我必须在TextField
中的可用项目下方放置一个List
,并使用该TextField
,我们可以将项目添加到List
最初,没有列表项(items
数组为空)
这是一个最小的,可重复的示例
import SwiftUI
struct ContentView: View {
@State var itemName = ""
@State var items = [String]()
var body: some View {
NavigationView {
List {
ForEach(self.items, id: \.self) {
Text($0)
}
VStack {
TextField("Item Name", text: $itemName)
.textFieldStyle(RoundedBorderTextFieldStyle())
Button(action: {
self.items.append(self.itemName)
self.itemName = ""
}) {
Text("Add Item")
}
}
}
.navigationBarTitle(Text("Title"))
}
}
}
我们可以通过在TextField
中键入内容,然后单击“ 添加项目” Button
将新项目添加到列表中,我们使用{{1 }}出现在TextField
中的TextField上方。因此List
在TextField
中会下降(就像Apple的Reminders应用程序一样)。
如果应用中有很多项目(超过7个项目),则当键盘出现时,键盘会覆盖List
,而我们看不到TextField
。
检查此屏幕截图:
我想知道的是如何在键盘出现时(例如在Apple的提醒应用程序中)自动滚动列表(向上移动视图)以查看TextField
。
答案 0 :(得分:4)
我在最近的项目中遇到了类似的问题,对我来说,最简单的解决方法是将UITextField包装在SwiftUI中,并从自定义包装器到达父级滚动视图,并告诉其在键盘出现时进行滚动。我在您的项目上尝试了我的方法,并且似乎可行。
如果从GitHub文件夹https://github.com/LostMoa/SwiftUI-Code-Examples/tree/master/ScrollTextFieldIntoVisibleRange中获取包装程序和其他文件的代码,然后用我的自定义视图(TextFieldWithKeyboardObserver
)替换SwiftUI TextField,则它应该滚动。
import SwiftUI
struct ContentView: View {
@State var itemName = ""
@State var items = [String]()
var body: some View {
NavigationView {
List {
ForEach(self.items, id: \.self) {
Text($0)
}
VStack {
TextFieldWithKeyboardObserver(text: $itemName, placeholder: "Item Name")
Button(action: {
self.items.append(self.itemName)
self.itemName = ""
}) {
Text("Add Item")
}
}
}
.navigationBarTitle(Text("Title"))
}
}
}
我最近写了一篇文章解释这种解决方案:https://lostmoa.com/blog/ScrollTextFieldIntoVisibleRange/