TextField всегда сверху клавиатуры с SwiftUI

у меня есть это

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 простое решение, чтобы текстовое поле всегда было вверху клавиатуры?


person Kevin ABRIOUX    schedule 14.08.2019    source источник


Ответы (3)


Вот фрагмент, который отслеживает 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)
  }
}

Вот изображение используемого пакета: демонстрация

person Nick Fox    schedule 18.08.2019
comment
это рушится Fatal error: Accessing State<CGFloat> outside View.body: file - person Kevin ABRIOUX; 05.09.2019

Я пробовал разные подходы, и ни один из них не помог мне. Этот ниже единственный, который работал на разных устройствах.

Добавьте это расширение в файл:

    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)
  }
}
person VSMelo    schedule 13.01.2020
comment
Хороший подход. Спасибо - person FRIDDAY; 24.01.2020

Просто собираюсь предложить простое, легкое и немного хакерское решение, которое я нашел для работы с клавиатурой:

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"))
        }
    }
}
person thisIsTheFoxe    schedule 05.10.2019
comment
Это решение работает не на всех устройствах, так как на разных устройствах клавиатура может иметь разные размеры. - person VSMelo; 11.01.2020