ios - 填充列表以避免键盘重叠

问题描述

在将其标记为重复之前，请阅读以下内容

我正在尝试制作 iPhone 和 iPad 应用程序，但我遇到了键盘与文本输入重叠的常见问题。我尝试了这个站点上的所有解决方案，但我没有找到一个对我来说是如何工作的，所以我正在使用这个解决方案当键盘出现在 SwiftUI 中时向上移动 TextField

在 iPhone 上效果很好，但问题出现在 iPad 上，我的视图在一张纸上，所以在 iPad 上，这张纸就像一个窗户，所以我试图解决这个问题，如下所示

获取屏幕尺寸
使用我的视图的几何阅读器尺寸
获取键盘尺寸
计算大小的差异以调整填充键盘大小 - ((screensize - viewSize)/2)

这是代码

import SwiftUI

final class KeyboardResponder: ObservableObject {
    private var notificationCenter: NotificationCenter
    @Published private(set) var currentHeight: CGFloat = 0
    let screenHeight = UIScreen.main.bounds.size.height

    init(center: NotificationCenter = .default) {
        notificationCenter = center
        notificationCenter.addObserver(self, selector: #selector(keyBoardWillShow(notification:)), name: UIResponder.keyboardWillShowNotification, object: nil)
        notificationCenter.addObserver(self, selector: #selector(keyBoardWillHide(notification:)), name: UIResponder.keyboardWillHideNotification, object: nil)
    }

    deinit {
        notificationCenter.removeObserver(self)
    }

    @objc func keyBoardWillShow(notification: Notification) {
        if let keyboardSize = (notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue)?.cgRectValue {
            currentHeight = keyboardSize.height
        }
    }

    @objc func keyBoardWillHide(notification: Notification) {
        currentHeight = 0
    }
}

struct sheetView: View {
    @State private var text1 = ""
    @State private var text2 = ""
    @State private var text3 = ""

    @State private var text4 = ""
    @State private var text5 = ""
    @State private var text6 = ""

    @State private var text7 = ""
    @State private var text8 = ""
    @State private var text9 = ""

    @State private var text10 = ""
    @State private var text11 = ""
    @State private var text12 = ""

    @ObservedObject private var keyboard = KeyboardResponder()
    let screenHeight = UIScreen.main.bounds.size.height

    @Environment(\.horizontalSizeClass) var sizeClass

    var body: some View{

        GeometryReader { geo in
            NavigationView{

                Group{
                    if self.sizeClass == .compact {

                        List{
                            Section(header: Text("test header")){
                                TextField("Test 1", text: self.$text1)
                                TextField("Test 2", text: self.$text2)
                                TextField("Test 3", text: self.$text3)
                                TextField("Test 4", text: self.$text4)
                            }

                            Section(header: Text("test header 2")){
                                TextField("Test 5", text: self.$text5)
                                TextField("Test 6", text: self.$text6)
                                TextField("Test 7", text: self.$text7)
                                TextField("Test 8", text: self.$text8)
                            }

                            Section(header: Text("test header 3")){
                                TextField("Test 9", text: self.$text9)
                                TextField("Test 10", text: self.$text10)
                                TextField("Test 11", text: self.$text11)
                                TextField("Test 12", text: self.$text12)
                            }
                            Section(header: Text("test header")){
                                TextField("Test 1", text: self.$text1)
                                TextField("Test 2", text: self.$text2)
                                TextField("Test 3", text: self.$text3)
                                TextField("Test 4", text: self.$text4)
                            }

                            Section(header: Text("test header 2")){
                                TextField("Test 5", text: self.$text5)
                                TextField("Test 6", text: self.$text6)
                                TextField("Test 7", text: self.$text7)
                                TextField("Test 8", text: self.$text8)
                            }

                            Section(header: Text("test header 3")){
                                TextField("Test 9", text: self.$text9)
                                TextField("Test 10", text: self.$text10)
                                TextField("Test 11", text: self.$text11)
                                TextField("Test 12", text: self.$text12)
                            }

                        }
                        .listStyle(GroupedListStyle())
                        .environment(\.horizontalSizeClass, .regular)
                        .padding(.bottom, self.keyboard.currentHeight)
                        .edgesIgnoringSafeArea(.bottom)
                        .animation(.easeOut(duration: 0.16))
                    } else {
                        List{
                            Section(header: Text("test header")){
                                TextField("Test 1", text: self.$text1)
                                TextField("Test 2", text: self.$text2)
                                TextField("Test 3", text: self.$text3)
                                TextField("Test 4", text: self.$text4)
                            }

                            Section(header: Text("test header 2")){
                                TextField("Test 5", text: self.$text5)
                                TextField("Test 6", text: self.$text6)
                                TextField("Test 7", text: self.$text7)
                                TextField("Test 8", text: self.$text8)
                            }

                            Section(header: Text("test header 3")){
                                TextField("Test 9", text: self.$text9)
                                TextField("Test 10", text: self.$text10)
                                TextField("Test 11", text: self.$text11)
                                TextField("Test 12", text: self.$text12)
                            }
                            Section(header: Text("test header")){
                                TextField("Test 1", text: self.$text1)
                                TextField("Test 2", text: self.$text2)
                                TextField("Test 3", text: self.$text3)
                                TextField("Test 4", text: self.$text4)
                            }

                            Section(header: Text("test header 2")){
                                TextField("Test 5", text: self.$text5)
                                TextField("Test 6", text: self.$text6)
                                TextField("Test 7", text: self.$text7)
                                TextField("Test 8", text: self.$text8)
                            }

                            Section(header: Text("test header 3")){
                                TextField("Test 9", text: self.$text9)
                                TextField("Test 10", text: self.$text10)
                                TextField("Test 11", text: self.$text11)
                                TextField("Test 12", text: self.$text12)
                            }

                        }
                        .listStyle(GroupedListStyle())
                        .environment(\.horizontalSizeClass, .regular)
                        .padding(.bottom, (self.keyboard.currentHeight > 0) ? (self.keyboard.currentHeight - ((self.screenHeight - geo.size.height)/2)): self.keyboard.currentHeight )
                        .edgesIgnoringSafeArea(.bottom)
                        .animation(.easeOut(duration: 0.16))
                    }

                }

            .navigationBarTitle("Test")
            }
        }


    }

}

struct ContentView: View {
    @State private var showSheet = false
    var body: some View {
        VStack{
            Button(action : {
                self.showSheet = true
            }){
               Text("Show Sheet")
            }
            .sheet(isPresented: $showSheet) {
                sheetView()
                .environment(\.horizontalSizeClass, .compact)
            }

        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

现在在 iPhone 中运行良好，但我在landScape 中有一个小问题，我认为更多的是列表填充问题，但真正的问题是 iPad 上纵向的工作表由于某种原因当键盘出现时工作表向上推所以它把所有的数学都搞砸了。

即使在 iPad 视图中添加忽略安全区域，我也得到和安全的填充白线

因此，如果您知道我真正想了解的简单或优雅的解决方案，我只是想避免键盘重叠
知道我是否可以计算工作表的填充或大小以添加正确的填充也很有帮助，无论设备的方向如何
而且，如果您知道为什么填充在列表的横向视图而不是 iPhone 上不断中断，那将非常有帮助

标签： iosswiftswiftuiswiftui-listswiftui-environment

ios - 填充列表以避免键盘重叠

问题描述

解决方案

推荐阅读