使用SwiftUI，TextField始终位于键盘顶部

Question

我有这个

struct ContentView: View {
    var body: some View {
        ZStack(alignment: Alignment.bottom) {
            List {
                Text("Default text").foregroundColor(Color.red)
            }
            TextField("Placeholder", text: .constant(""))
                .frame(minHeight: 30)
                .cornerRadius(8.0)
                .padding(10)
                .background(Color.blue)
        }
    }
}

实际上，当我专注于TextField时，键盘会隐藏该文本字段。

SwiftUI中是否有一个简单的解决方案，可以使文本字段始终位于键盘的顶部？

Answer 1

我尝试了不同的方法，但没有一个对我有用。以下是唯一适用于不同设备的设备。

将此扩展名添加到文件中：

    import SwiftUI
    import Combine

    extension View {

      func keyboardSensible(_ offsetValue: Binding<CGFloat>) -> some View {

        return self
            .padding(.bottom, offsetValue.wrappedValue)
            .animation(.spring())
            .onAppear {
            NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillShowNotification, object: nil, queue: .main) { notification in

                let keyWindow = UIApplication.shared.connectedScenes
                    .filter({$0.activationState == .foregroundActive})
                    .map({$0 as? UIWindowScene})
                    .compactMap({$0})
                    .first?.windows
                    .filter({$0.isKeyWindow}).first

                let bottom = keyWindow?.safeAreaInsets.bottom ?? 0

                let value = notification.userInfo![UIResponder.keyboardFrameEndUserInfoKey] as! CGRect
                let height = value.height

                offsetValue.wrappedValue = height - bottom
            }

            NotificationCenter.default.addObserver(forName: UIResponder.keyboardWillHideNotification, object: nil, queue: .main) { _ in
                offsetValue.wrappedValue = 0
            }
        }
      }
}

在您看来，您需要一个变量来绑定offsetValue：

struct IncomeView: View {

  @State private var offsetValue: CGFloat = 0.0

  var body: some View { 

    VStack {
     //...       
    }
    .keyboardSensible($offsetValue)
  }
}

Answer 2

这是一个摘要，用于观察NotificationCenter与键盘有关的通知，并根据计算出的键盘高度更改间隔视图的高度。

import Combine
struct ExampleView: View {

  @State var keyboardHeight: CGFloat = 0
  var cancellables: Set<AnyCancellable> = []

  init() {
      NotificationCenter.default.publisher(for: UIResponder.keyboardWillChangeFrameNotification)
        .merge(with: NotificationCenter.default.publisher(for: UIResponder.keyboardWillHideNotification))
        .compactMap({ notification in
          guard let keyboardFrameValue: NSValue = notification.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? NSValue else { return nil }
          let keyboardFrame = keyboardFrameValue.cgRectValue
          // If the rectangle is at the bottom of the screen, set the height to 0.
          if keyboardFrame.origin.y == UIScreen.main.bounds.height {
            return 0
          } else {
            // Adjust for safe area
            return keyboardFrame.height - (UIApplication.shared.windows.first?.safeAreaInsets.bottom ?? 0)
          }
        })
        .assign(to: \.keyboardHeight, on: self)
        .store(in: &cancellables)
  }

  var body: some View {
    VStack {

      // Your content here

      Spacer()
        .frame(height: keyboardHeight)
    }
  }
}

我写了一个Swift软件包来为您处理这个问题。它会显示一个KeyboardObservingView，用于包装您的内容。

可在此处使用：https://github.com/nickffox/KeyboardObserving

您将像这样使用它：

var body: some View {
  KeyboardObservingView {
    List {...}
    TextField("Placeholder", text: .constant(""))
      .frame(minHeight: 30)
      .cornerRadius(8.0)
      .padding(10)
      .background(Color.blue)
  }
}

这是正在使用的包装的图像： demo

Answer 3

我将放弃一个我发现用于处理键盘的简单，简单且有点hacky的解决方案：

struct ContentView : View {

 @State private var name = ""
 @State private var keyboardUp = false
 private var keyboardHeight: CGFloat { 150 }

    var body: some View {
        NavigationView {
            Spacer()
            Form {
                TextField($name, placeholder: Text("Name"), onEditingChanged: { { self.keyboardUp = $0 })
            }.offset(y: keyboardUp ? -keyboardHeight : 0)
            .animation(.basic())
            .navigationBarTitle(Text("Title"))
        }
    }
}