<#一键隐藏键盘，SwiftUI魔法棒搞定！#>

2022-11-20 11:23:50

SwiftUI键盘隐藏指南：提升用户体验的3个实用方法

在移动应用程序中，键盘是用户与应用程序交互的关键元素。但是，它有时也会成为用户体验的障碍，遮挡输入内容、导致误触和应用程序崩溃。为了解决这些问题，隐藏键盘变得至关重要。

1. 系统焦点控制

SwiftUI中的系统焦点控制允许我们通过FocusState环境变量控制当前焦点的视图。当焦点转移时，键盘将自动隐藏。示例代码：

struct ContentView: View {
    @FocusState private var isFocused: Bool

    var body: some View {
        TextField("Enter your name", text: /*@START_MENU_TOKEN@*/"Placeholder"/*@END_MENU_TOKEN@*/)
            .focused($isFocused)

        Button("Hide Keyboard") {
            isFocused = false
        }
    }
}

2. 自定义tap手势

另一种有效的方法是添加自定义tap手势。当用户点击屏幕特定区域时，键盘将自动隐藏。示例代码：

struct ContentView: View {
    @State private var isKeyboardVisible = false

    var body: some View {
        GeometryReader { geometry in
            ZStack {
                TextField("Enter your name", text: /*@START_MENU_TOKEN@*/"Placeholder"/*@END_MENU_TOKEN@*/)
                    .frame(height: geometry.size.height / 2)

                if isKeyboardVisible {
                    Color.black.opacity(0.5)
                        .onTapGesture {
                            UIApplication.shared.endEditing()
                            isKeyboardVisible = false
                        }
                }
            }
        }
        .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillShowNotification)) { _ in
            withAnimation {
                isKeyboardVisible = true
            }
        }
        .onReceive(NotificationCenter.default.publisher(for: UIResponder.keyboardWillHideNotification)) { _ in
            withAnimation {
                isKeyboardVisible = false
            }
        }
    }
}

3. 键盘工具栏

键盘工具栏提供了一个方便的方式来隐藏键盘。当用户点击工具栏上的“完成”按钮时，键盘将自动隐藏。示例代码：

struct ContentView: View {
    @FocusState private var isFocused: Bool

    var body: some View {
        TextField("Enter your name", text: /*@START_MENU_TOKEN@*/"Placeholder"/*@END_MENU_TOKEN@*/)
            .focused($isFocused)
            .keyboardType(.namePhonePad)
            .disableAutocorrection(true)
            .toolbar {
                ToolbarItem(placement: .keyboard) {
                    Button("Done") {
                        isFocused = false
                    }
                }
            }
    }
}