填充列表,避免键盘重叠

时间:2020-05-25 16:42:02

标签: ios swift swiftui swiftui-list swiftui-environment

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

我正在尝试制作iPhone和iPad应用程序,但键盘覆盖了文本输入,这是我遇到的常见问题。我尝试了该网站上的所有解决方案,但找不到适合我的解决方案,因此我正在使用此解决方案Move TextField up when the keyboard has appeared in SwiftUI

在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视图中添加了忽略安全区域,我也越来越安全地填充白线

enter image description here

enter image description here

  1. 所以我只是想避免键盘重叠,如果您知道 我真的想阅读

  2. 的简单或优雅的解决方案
  3. 了解我是否可以计算表格的填充或尺寸以添加正确的填充也无济于事 设备

  4. ,如果您对填充物为何会继续破坏列表的风景而不是iPhone有所了解,那真的很有帮助

1 个答案:

答案 0 :(得分:2)

您是否尝试过使用库https://github.com/hackiftekhar/IQKeyboardManager。您可以轻松地将其添加到https://github.com/hackiftekhar/IQKeyboardManager/issues/1606此处发布的swiftUI项目中。

到目前为止,它已经对我有用,但是我尚未在ipad上对其进行测试。