键盘在视图中时的 SwiftUI 文本字段填充

Question

我有一个只有文本框的滚动视图。我希望能够点击任何文本字段并让键盘将其稍微向上推。

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)
                }
            }
        }
    }
}

当文本字段中没有 padding/styling 时，此方法非常有效。如果我使用带有样式（边框、填充）的自定义文本字段，键盘将悬停在文本字段的一部分上。这是我的自定义文本字段：

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 会自动为您处理此问题，因此我想要一个解决方案，在该解决方案中我不必使用视图修饰符来监听键盘何时打开。

Answer 1

如果您使用 iOS 14+ 和滚动视图，或者可以选择使用滚动视图。

https://developer.apple.com/documentation/swiftui/scrollviewproxy https://developer.apple.com/documentation/swiftui/scrollviewreader

以下内容可能有帮助

    ScrollViewReader { (proxy: ScrollViewProxy) in
        ScrollView {
            view1().frame(height: 200)
            view2().frame(height: 200)

            view3() <-----this has textfields 
                .onTapGesture {
                    proxy.scrollTo(1, anchor: .center)
                }
                .id(1)

            view4() <-----this has text editor
                .onTapGesture {
                    proxy.scrollTo(2, anchor: .center)
                }
                .id(2)

            view5().frame(height: 200)
            view6().frame(height: 200)
            submtButton().frame(height: 200)
        }
    }

上面的imp部分是

     anyView().onTapGesture {
          proxy.scrollTo(_ID, anchor: .center)
     }.id(_ID)

希望这对某人有所帮助:)

键盘在视图中时的 SwiftUI 文本字段填充

SwiftUI Textfield Padding when Keyboard is in view

scrollview

textfield

ios

swiftui

ios14