Як приховати клавіатуру під час використання SwiftUI?

Question 1

Як приховати keyboardвикористання SwiftUIдля нижченаведених випадків?

Випадок 1

У мене є, TextFieldі мені потрібно приховати, keyboardколи користувач натискає returnкнопку.

Випадок 2

У мене є, TextFieldі мені потрібно приховати, keyboardколи користувач натискає назовні.

Як я можу це зробити за допомогою SwiftUI?

Примітка:

Я не задавав питання щодо UITextField. Я хочу зробити це за допомогою SwifUI.TextField.

Question 2

Ви можете змусити першого відповідача подати у відставку, надіславши дію до спільної програми:

extension UIApplication {
    func endEditing() {
        sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}

Тепер ви можете використовувати цей метод, щоб закрити клавіатуру, коли завгодно:

struct ContentView : View {
    @State private var name: String = ""

    var body: some View {
        VStack {
            Text("Hello \(name)")
            TextField("Name...", text: self.$name) {
                // Called when the user tap the return button
                // see `onCommit` on TextField initializer.
                UIApplication.shared.endEditing()
            }
        }
    }
}

Якщо ви хочете закрити клавіатуру натисканням, ви можете створити повноекранний білий вигляд за допомогою дії натискання, яка спричинить endEditing(_:):

struct Background<Content: View>: View {
    private var content: Content

    init(@ViewBuilder content: @escaping () -> Content) {
        self.content = content()
    }

    var body: some View {
        Color.white
        .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
        .overlay(content)
    }
}

struct ContentView : View {
    @State private var name: String = ""

    var body: some View {
        Background {
            VStack {
                Text("Hello \(self.name)")
                TextField("Name...", text: self.$name) {
                    self.endEditing()
                }
            }
        }.onTapGesture {
            self.endEditing()
        }
    }

    private func endEditing() {
        UIApplication.shared.endEditing()
    }
}

Question 3

Після багатьох спроб я знайшов рішення, яке (на даний момент) не блокує жодного елемента керування - додавши в нього розпізнавач жестів UIWindow.

Якщо ви хочете закрити клавіатуру лише на Торкніться зовні (без обробки перетягувань) - тоді досить скористатися просто UITapGestureRecognizerта просто скопіювати крок 3:

Створіть власний клас розпізнавача жестів, який працює з будь-якими дотиками:

class AnyGestureRecognizer: UIGestureRecognizer {
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent) {
        if let touchedView = touches.first?.view, touchedView is UIControl {
            state = .cancelled

        } else if let touchedView = touches.first?.view as? UITextView, touchedView.isEditable {
            state = .cancelled

        } else {
            state = .began
        }
    }

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
       state = .ended
    }

    override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent) {
        state = .cancelled
    }
}

У SceneDelegate.swiftв func scene, додайте наступний код:

let tapGesture = AnyGestureRecognizer(target: window, action:#selector(UIView.endEditing))
tapGesture.requiresExclusiveTouchType = false
tapGesture.cancelsTouchesInView = false
tapGesture.delegate = self //I don't use window as delegate to minimize possible side effects
window?.addGestureRecognizer(tapGesture)

Реалізуйте, UIGestureRecognizerDelegateщоб дозволити одночасні дотики.

extension SceneDelegate: UIGestureRecognizerDelegate {
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return true
    }
}

Тепер будь-яка клавіатура на будь-якому поданні буде закрита на дотик або перетягнута назовні.

PS Якщо ви хочете закрити лише певні поля TextField - додайте та видаліть розпізнавач жестів у вікно, коли буде викликаний зворотний виклик TextField onEditingChanged

Question 4

Відповідь @ RyanTCB хороша; ось кілька уточнень, які спрощують використання та уникають потенційного збою:

struct DismissingKeyboard: ViewModifier {
    func body(content: Content) -> some View {
        content
            .onTapGesture {
                let keyWindow = UIApplication.shared.connectedScenes
                        .filter({$0.activationState == .foregroundActive})
                        .map({$0 as? UIWindowScene})
                        .compactMap({$0})
                        .first?.windows
                        .filter({$0.isKeyWindow}).first
                keyWindow?.endEditing(true)                    
        }
    }
}

"Виправлення помилки" - це просто те, що keyWindow!.endEditing(true)належним чином повинно бути keyWindow?.endEditing(true)(так, ви можете заперечити, що це не може статися).

Більш цікавим є те, як ви можете ним користуватися. Наприклад, припустимо, у вас є форма з кількома полями для редагування. Просто оберніть його так:

Form {
    .
    .
    .
}
.modifier(DismissingKeyboard())

Тепер, натиснувши будь-який елемент управління, який сам по собі не має клавіатури, буде виконано відповідне відхилення.

(Перевірено бета-версією 7)

Question 5

Я відчув це під час використання TextField всередині NavigationView. Це моє рішення для цього. Клавіатура відхилятиметься, коли ви почнете прокручувати.

NavigationView {
    Form {
        Section {
            TextField("Receipt amount", text: $receiptAmount)
            .keyboardType(.decimalPad)
           }
        }
     }
     .gesture(DragGesture().onChanged{_ in UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)})

Question 6

Я знайшов інший спосіб відхилити клавіатуру, яка не вимагає доступу до keyWindowвластивості; по суті, компілятор видає попередження за допомогою

UIApplication.shared.keyWindow?.endEditing(true)

'keyWindow' застаріло в iOS 13.0: Не слід використовувати для програм, що підтримують кілька сцен, оскільки повертає ключове вікно для всіх підключених сцен

Натомість я використав цей код:

UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to:nil, from:nil, for:nil)

Question 7

SwiftUI у файлі 'SceneDelegate.swift' просто додайте: .onTapGesture {window.endEditing (true)}

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        // Use this method to optionally configure and attach the UIWindow `window` to the provided UIWindowScene `scene`.
        // If using a storyboard, the `window` property will automatically be initialized and attached to the scene.
        // This delegate does not imply the connecting scene or session are new (see `application:configurationForConnectingSceneSession` instead).

        // Create the SwiftUI view that provides the window contents.
        let contentView = ContentView()

        // Use a UIHostingController as window root view controller.
        if let windowScene = scene as? UIWindowScene {
            let window = UIWindow(windowScene: windowScene)
            window.rootViewController = UIHostingController(
                rootView: contentView.onTapGesture { window.endEditing(true)}
            )
            self.window = window
            window.makeKeyAndVisible()
        }
    }

цього достатньо для кожного перегляду за допомогою клавіатури у вашому додатку ...

Question 8

SwiftUI 2

Ось оновлене рішення для SwiftUI 2 / iOS 14 (спочатку запропоноване тут Михайлом).

Він не використовує AppDelegateні тих, SceneDelegateщо відсутні, якщо ви використовуєте життєвий цикл SwiftUI:

@main
struct TestApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
                .onAppear(perform: UIApplication.shared.addTapGestureRecognizer)
        }
    }
}

extension UIApplication {
    func addTapGestureRecognizer() {
        guard let window = windows.first else { return }
        let tapGesture = UITapGestureRecognizer(target: window, action: #selector(UIView.endEditing))
        tapGesture.requiresExclusiveTouchType = false
        tapGesture.cancelsTouchesInView = false
        tapGesture.delegate = self
        window.addGestureRecognizer(tapGesture)
    }
}

extension UIApplication: UIGestureRecognizerDelegate {
    public func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return true // set to `false` if you don't want to detect tap during other gestures
    }
}

Ось приклад того, як розпізнати одночасні жести, крім жестів довгого натискання:

extension UIApplication: UIGestureRecognizerDelegate {
    public func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return !otherGestureRecognizer.isKind(of: UILongPressGestureRecognizer.self)
    }
}

Question 9

Моє рішення, як приховати програмну клавіатуру, коли користувачі натискають зовні. Вам потрібно використовувати за contentShapeдопомогою, onLongPressGestureщоб виявити весь контейнер перегляду. onTapGestureпотрібно, щоб уникнути блокування фокусу на TextField. Ви можете використовувати onTapGestureзамість цього, onLongPressGestureале елементи Навігаційної панелі не працюватимуть.

extension View {
    func endEditing() {
        UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}

struct KeyboardAvoiderDemo: View {
    @State var text = ""
    var body: some View {
        VStack {
            TextField("Demo", text: self.$text)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .contentShape(Rectangle())
        .onTapGesture {}
        .onLongPressGesture(
            pressing: { isPressed in if isPressed { self.endEditing() } },
            perform: {})
    }
}

Question 10

додайте цей модифікатор до подання, яке ви хочете виявити, натискання користувача

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

        }

Question 11

Я вважаю за краще використовувати .onLongPressGesture(minimumDuration: 0)клавіатуру, яка не спричиняє блимання клавіатури при TextViewактивації іншої (побічний ефект .onTapGesture). Код клавіатури "приховати" може бути функцією багаторазового використання.

.onTapGesture(count: 2){} // UI is unresponsive without this line. Why?
.onLongPressGesture(minimumDuration: 0, maximumDistance: 0, pressing: nil, perform: hide_keyboard)

func hide_keyboard()
{
    UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
}

Question 12

Тому що keyWindowє застарілим.

extension View {
    func endEditing(_ force: Bool) {
        UIApplication.shared.windows.forEach { $0.endEditing(force)}
    }
}

Question 13

Здається, endEditingрішення є єдиним, як @rraphael вказав.
Найчистіший приклад, який я бачив дотепер, такий:

extension View {
    func endEditing(_ force: Bool) {
        UIApplication.shared.keyWindow?.endEditing(force)
    }
}

а потім використовувати його в onCommit:

Question 14

Розширюючи відповідь @Feldur (який базувався на @ RyanTCB), ось ще більш виразне та потужне рішення, що дозволяє відхиляти клавіатуру на інші жести, ніж onTapGestureви можете вказати, який саме ви хочете у виклику функції.

Використання

// MARK: - View
extension RestoreAccountInputMnemonicScreen: View {
    var body: some View {
        List(viewModel.inputWords) { inputMnemonicWord in
            InputMnemonicCell(mnemonicInput: inputMnemonicWord)
        }
        .dismissKeyboard(on: [.tap, .drag])
    }
}

Або використання All.gestures(лише цукор для Gestures.allCases🍬)

.dismissKeyboard(on: All.gestures)

Код

enum All {
    static let gestures = all(of: Gestures.self)

    private static func all<CI>(of _: CI.Type) -> CI.AllCases where CI: CaseIterable {
        return CI.allCases
    }
}

enum Gestures: Hashable, CaseIterable {
    case tap, longPress, drag, magnification, rotation
}

protocol ValueGesture: Gesture where Value: Equatable {
    func onChanged(_ action: @escaping (Value) -> Void) -> _ChangedGesture<Self>
}
extension LongPressGesture: ValueGesture {}
extension DragGesture: ValueGesture {}
extension MagnificationGesture: ValueGesture {}
extension RotationGesture: ValueGesture {}

extension Gestures {
    @discardableResult
    func apply<V>(to view: V, perform voidAction: @escaping () -> Void) -> AnyView where V: View {

        func highPrio<G>(
             gesture: G
        ) -> AnyView where G: ValueGesture {
            view.highPriorityGesture(
                gesture.onChanged { value in
                    _ = value
                    voidAction()
                }
            ).eraseToAny()
        }

        switch self {
        case .tap:
            // not `highPriorityGesture` since tapping is a common gesture, e.g. wanna allow users
            // to easily tap on a TextField in another cell in the case of a list of TextFields / Form
            return view.gesture(TapGesture().onEnded(voidAction)).eraseToAny()
        case .longPress: return highPrio(gesture: LongPressGesture())
        case .drag: return highPrio(gesture: DragGesture())
        case .magnification: return highPrio(gesture: MagnificationGesture())
        case .rotation: return highPrio(gesture: RotationGesture())
        }

    }
}

struct DismissingKeyboard: ViewModifier {

    var gestures: [Gestures] = Gestures.allCases

    dynamic func body(content: Content) -> some View {
        let action = {
            let forcing = true
            let keyWindow = UIApplication.shared.connectedScenes
                .filter({$0.activationState == .foregroundActive})
                .map({$0 as? UIWindowScene})
                .compactMap({$0})
                .first?.windows
                .filter({$0.isKeyWindow}).first
            keyWindow?.endEditing(forcing)
        }

        return gestures.reduce(content.eraseToAny()) { $1.apply(to: $0, perform: action) }
    }
}

extension View {
    dynamic func dismissKeyboard(on gestures: [Gestures] = Gestures.allCases) -> some View {
        return ModifiedContent(content: self, modifier: DismissingKeyboard(gestures: gestures))
    }
}

Слово обережності

Зверніть увагу, що якщо ви використовуєте всі жести, вони можуть конфліктувати, і я не придумав жодного акуратного рішення, щоб це вирішити.

Question 15

Цей метод дозволяє приховати клавіатуру на розпірних проставках!

Спочатку додайте цю функцію (Кредит надано : Каспер Зандберген, з SwiftUI не може натиснути в Spacer HStack )

extension Spacer {
    public func onTapGesture(count: Int = 1, perform action: @escaping () -> Void) -> some View {
        ZStack {
            Color.black.opacity(0.001).onTapGesture(count: count, perform: action)
            self
        }
    }
}

Далі додайте наступні 2 функції (Кредит, наданий: rraphael, з цього питання)

extension UIApplication {
    func endEditing() {
        sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
    }
}

Функція нижче буде додана до вашого класу Перегляду, просто зверніться до верхньої відповіді тут від rraphael для отримання більш докладної інформації.

private func endEditing() {
   UIApplication.shared.endEditing()
}

Нарешті, тепер ви можете просто зателефонувати ...

Spacer().onTapGesture {
    self.endEditing()
}

Це змусить будь-яку область розпірки закрити клавіатуру зараз. Більше не потрібно переглядати великий білий фон!

Ви можете гіпотетично застосувати цю техніку extensionдо будь-яких елементів керування, які вам потрібні для підтримки TapGestures, які в даний час цього не роблять, і викликати onTapGestureфункцію в поєднанні із self.endEditing()закриттям клавіатури в будь-якій ситуації, яку ви хочете.

Question 16

Будь ласка, перевірте https://github.com/michaelhenry/KeyboardAvoider

Просто додайте KeyboardAvoider {}поверх свого основного виду і все.

KeyboardAvoider {
    VStack { 
        TextField()
        TextField()
        TextField()
        TextField()
    }

}

Question 17

На основі відповіді @ Sajjon, ось рішення, яке дозволяє вам відмовитися від натискання клавіатури, тривалого натискання, перетягування, жестів збільшення та обертання відповідно до вашого вибору.

Це рішення працює в XCode 11.4

Використання для отримання поведінки, заданої @IMHiteshSurani

struct MyView: View {
    @State var myText = ""

    var body: some View {
        VStack {
            DismissingKeyboardSpacer()

            HStack {
                TextField("My Text", text: $myText)

                Button("Return", action: {})
                    .dismissKeyboard(on: [.longPress])
            }

            DismissingKeyboardSpacer()
        }
    }
}

struct DismissingKeyboardSpacer: View {
    var body: some View {
        ZStack {
            Color.black.opacity(0.0001)

            Spacer()
        }
        .dismissKeyboard(on: Gestures.allCases)
    }
}

Код

enum All {
    static let gestures = all(of: Gestures.self)

    private static func all<CI>(of _: CI.Type) -> CI.AllCases where CI: CaseIterable {
        return CI.allCases
    }
}

enum Gestures: Hashable, CaseIterable {
    case tap, longPress, drag, magnification, rotation
}

protocol ValueGesture: Gesture where Value: Equatable {
    func onChanged(_ action: @escaping (Value) -> Void) -> _ChangedGesture<Self>
}

extension LongPressGesture: ValueGesture {}
extension DragGesture: ValueGesture {}
extension MagnificationGesture: ValueGesture {}
extension RotationGesture: ValueGesture {}

extension Gestures {
    @discardableResult
    func apply<V>(to view: V, perform voidAction: @escaping () -> Void) -> AnyView where V: View {

        func highPrio<G>(gesture: G) -> AnyView where G: ValueGesture {
            AnyView(view.highPriorityGesture(
                gesture.onChanged { _ in
                    voidAction()
                }
            ))
        }

        switch self {
        case .tap:
            return AnyView(view.gesture(TapGesture().onEnded(voidAction)))
        case .longPress:
            return highPrio(gesture: LongPressGesture())
        case .drag:
            return highPrio(gesture: DragGesture())
        case .magnification:
            return highPrio(gesture: MagnificationGesture())
        case .rotation:
            return highPrio(gesture: RotationGesture())
        }
    }
}

struct DismissingKeyboard: ViewModifier {
    var gestures: [Gestures] = Gestures.allCases

    dynamic func body(content: Content) -> some View {
        let action = {
            let forcing = true
            let keyWindow = UIApplication.shared.connectedScenes
                .filter({$0.activationState == .foregroundActive})
                .map({$0 as? UIWindowScene})
                .compactMap({$0})
                .first?.windows
                .filter({$0.isKeyWindow}).first
            keyWindow?.endEditing(forcing)
        }

        return gestures.reduce(AnyView(content)) { $1.apply(to: $0, perform: action) }
    }
}

extension View {
    dynamic func dismissKeyboard(on gestures: [Gestures] = Gestures.allCases) -> some View {
        return ModifiedContent(content: self, modifier: DismissingKeyboard(gestures: gestures))
    }
}

Question 18

Ви можете повністю уникнути взаємодії з UIKit і впровадити його в чистому SwiftUI . Просто додайте .id(<your id>)модифікатор до свого TextFieldі змінюйте його значення, коли ви хочете відхилити клавіатуру (при проведенні пальцем, перегляді натискання, дії кнопки тощо).

Зразок реалізації:

struct MyView: View {
    @State private var text: String = ""
    @State private var textFieldId: String = UUID().uuidString

    var body: some View {
        VStack {
            TextField("Type here", text: $text)
                .id(textFieldId)

            Spacer()

            Button("Dismiss", action: { textFieldId = UUID().uuidString })
        }
    }
}

Зауважте, що я протестував його лише в останній бета-версії Xcode 12, але він повинен працювати зі старими версіями (навіть Xcode 11) без будь-яких проблем.

Question 19

клавіатури `Return`Key

На додаток до всіх відповідей щодо натискання поза текстовим полем, можливо, ви захочете відхилити клавіатуру, коли користувач натискає клавішу повернення на клавіатурі:

визначте цю глобальну функцію:

func resignFirstResponder() {
    UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
}

І додайте використання в onCommitаргументі it:

TextField("title", text: $text, onCommit:  {
    resignFirstResponder()
})

Переваги

Ви можете зателефонувати йому з будь-якого місця
Це не залежить від UIKit або SwiftUI (може використовуватися в програмах Mac)
Це працює навіть в iOS 13

Демо

демо

Question 20

Поки що вищезазначені варіанти для мене не працювали, тому що у мене є форма та внутрішні кнопки, посилання, інструмент вибору ...

Я створюю нижчий код, який працює, за допомогою наведених вище прикладів.

import Combine
import SwiftUI

private class KeyboardListener: ObservableObject {
    @Published var keyabordIsShowing: Bool = false
    var cancellable = Set<AnyCancellable>()

    init() {
        NotificationCenter.default
            .publisher(for: UIResponder.keyboardWillShowNotification)
            .sink { [weak self ] _ in
                self?.keyabordIsShowing = true
            }
            .store(in: &cancellable)

       NotificationCenter.default
            .publisher(for: UIResponder.keyboardWillHideNotification)
            .sink { [weak self ] _ in
                self?.keyabordIsShowing = false
            }
            .store(in: &cancellable)
    }
}

private struct DismissingKeyboard: ViewModifier {
    @ObservedObject var keyboardListener = KeyboardListener()

    fileprivate func body(content: Content) -> some View {
        ZStack {
            content
            Rectangle()
                .background(Color.clear)
                .opacity(keyboardListener.keyabordIsShowing ? 0.01 : 0)
                .frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height)
                .onTapGesture {
                    let keyWindow = UIApplication.shared.connectedScenes
                        .filter({ $0.activationState == .foregroundActive })
                        .map({ $0 as? UIWindowScene })
                        .compactMap({ $0 })
                        .first?.windows
                        .filter({ $0.isKeyWindow }).first
                    keyWindow?.endEditing(true)
                }
        }
    }
}

extension View {
    func dismissingKeyboard() -> some View {
        ModifiedContent(content: self, modifier: DismissingKeyboard())
    }
}

Використання:

 var body: some View {
        NavigationView {
            Form {
                picker
                button
                textfield
                text
            }
            .dismissingKeyboard()

Question 21

SwiftUI, випущений в червні / 2020 р. З Xcode 12 та iOS 14, додає модифікатор hideKeyboardOnTap (). Це має вирішити вашу справу №2. Рішення для вашої справи №1 надається безкоштовно з Xcode 12 та iOS 14: клавіатура за замовчуванням для TextField автоматично ховається, коли натискається кнопка повернення.