Question

在我的用例中，我必须在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。

Answer 1

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

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

1 个答案: