iOS 14 SwiftUI 键盘自动升降视图

Question

我在视图中使用 TextField，当它成为第一响应者时，它会离开视图，如下面的 GIF 所示。

有什么办法可以摆脱这种行为？

这是我的代码

NavigationView(content: {
    ZStack{
        MyTabView(selectedIndex: self.$index)
            .view(item: self.item1) {
                NewView(title: "Hello1").navigationBarTitle("")
                    .navigationBarHidden(true)
            }
            .view(item: self.item2) {
                NewView(title: "Hello2").navigationBarTitle("")
                    .navigationBarHidden(true)
            }
            .view(item: self.item3) {
                NewView(title: "Hello3").navigationBarTitle("")
                    .navigationBarHidden(true)
            }
    }.navigationBarHidden(true)
    .navigationBarTitle("")
}).ignoresSafeArea(.keyboard, edges: .bottom)

// 新视图

struct NewView:View {
    @State var text:String = ""
    var title:String
    var body: some View {
        VStack {
            Spacer()
            Text("Hello")
            TextField(title, text: self.$text)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            
        }.padding()
        .onAppear {
            debugPrint("OnApper \(self.title)")
        }
    }
}

Answer 1

您应该在 ZStack 上应用修饰符，而不是 NavigationView

NavigationView(content: {
    ZStack{
        ,,,
    }.navigationBarHidden(true)
    .navigationBarTitle("")
    .ignoresSafeArea(.keyboard, edges: .bottom) // <- This line moved up
})

完整的工作示例：

struct ContentView: View {
    @State var text = ""
    var body: some View {
        VStack{
            Spacer()
            Text("Hello, World")
            TextField("Tap to test keyboard ignoring", text: $text)
                .textFieldStyle(RoundedBorderTextFieldStyle())
        }
        .padding()
        .ignoresSafeArea(.keyboard, edges: .bottom)
    }
}

Answer 2

这就是我想出来的：

GeometryReader { _ in
    ZStack {
        //PUT CONTENT HERE
    }.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
}

它似乎对我有用。在这种情况下，您不需要检查 iOS 14 可用性。

Answer 3

要使 .ignoresSafeArea 正常工作，您需要填充所有可用区域（例如，使用 Spacer）。

以下将不起作用（没有间隔符，只有一个 TextField）：

struct ContentView: View {
    @State var text: String = ""
    var body: some View {
        VStack {
            TextField("asd", text: self.$text)
                .textFieldStyle(RoundedBorderTextFieldStyle())
        }
        .ignoresSafeArea(.keyboard, edges: .bottom)
    }
}

但是，当您添加垫片（填充所有可用的 space）时，将起作用：

struct ContentView: View {
    @State var text: String = ""
    var body: some View {
        VStack {
            Spacer()
            TextField("asd", text: self.$text)
                .textFieldStyle(RoundedBorderTextFieldStyle())
            Spacer()
        }
        .ignoresSafeArea(.keyboard, edges: .bottom)
    }
}

如果您不想使用 Spacer，您也可以使用 GeometryReader:

struct ContentView: View {
    @State var text: String = ""
    var body: some View {
        GeometryReader { _ in
            ...
        }
        .ignoresSafeArea(.keyboard, edges: .bottom)
    }
}

Answer 4

结合此处发布的答案并考虑 this question，最终对我有用的是（Xcode 12.4，iOS 14.4）：

GeometryReader { _ in
    VStack {
        Spacer()
        TextField("Type something...", text: $value)
        Spacer()
    }.ignoresSafeArea(.keyboard, edges: .bottom)
}

两个间隔符都是为了使文本字段垂直居中。

仅使用 GeometryReader 或 ignoresSafeArea 修饰符并不能解决问题，但如上所示将它们全部放在一起后最终阻止了视图在键盘出现时向上移动。

iOS 14 SwiftUI 键盘自动升降视图

iOS 14 SwiftUI Keyboard lifts view automatically

keyboard

textfield

swift

swiftui

ios14

完整的工作示例：