当键盘出现在SwiftUI中时,向上滚动以查看TextField

时间:2019-09-17 13:14:32

标签: swiftui swiftui-list

在我的用例中,我必须在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上方。因此ListTextField中会下降(就像Apple的Reminders应用程序一样)。

如果应用中有很多项目(超过7个项目),则当键盘出现时,键盘会覆盖List,而我们看不到TextField
检查此屏幕截图:

我想知道的是如何在键盘出现时(例如在Apple的提醒应用程序中)自动滚动列表(向上移动视图)以查看TextField

1 个答案:

答案 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/