15

在我的用例中，我必须将 a 放在 aTextField中可用项目的下方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，我们添加的每个项目都会TextField出现在 中的 TextField 上方List。因此（就像 Apple 的提醒应用程序一样）TextField。List

如果应用程序有很多项目（超过 7 个项目），TextField当键盘出现时，键盘会覆盖，我们看不到TextField.
检查此屏幕截图：

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

4

1 回答 1

5

我在最近的项目中遇到了类似的问题，解决它的最简单方法是将 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/

于 2020-02-13T09:30:04.303 回答