为 App 添加主动收起键盘功能

了解如何在适当的时候,主动收起系统输入法,从而优化用户体验。

为 App 添加主动收起键盘功能

点击屏幕其他区域隐藏键盘

隐藏键盘的一种方式是使用 UIApplication 方法。

首先,添加一个全局的 hideKeyboard() 方法:

extension View {
    // 隐藏键盘的方法
    func hideKeyboard() {
        UIApplication.shared.sendAction(
            #selector(UIResponder.resignFirstResponder), to: nil, from: nil,
            for: nil)
    }
}

然后,在任意视图上,通过 .onTapGesture 实现点击屏幕其他区域,自动隐藏键盘:

VStack{
// 内容
}
.onTapGesture {
    print("触发 MONOChatView -> onTapGesture -> hideKeyboard")
    self.hideKeyboard()
}

在键盘上方添加收起按钮(iOS 15+)

也可以在 Toolbar上添加关闭键盘的按钮:

/// 修改键盘工具栏
.toolbar {
    /// 修改键盘工具栏
    ToolbarItemGroup(placement: .keyboard) {
        Spacer()
        Button(action: {
            self.hideKeyboard()
        }) {
            Image(systemName: "keyboard.chevron.compact.down")
                .font(.subheadline)
                .foregroundStyle(.secondary)
        }
        .buttonStyle(.plain)
    }
}

在滑动时自动隐藏键盘(iOS 16+)

另一种更简单的方式是,使用 iOS16 新引入的.scrollDismissesKeyboard修饰器:

@State private var text = ""


ScrollView {
    TextField("Prompt", text: $text)
    ForEach(0 ..< 50) { index in
        Text("\(index)")
            .padding()
    }
}
.scrollDismissesKeyboard(.immediately)

.interactively 选项可以实现:当向下拖动键盘时,会开始解除过程,可以向上拖动以取消解除。类似 iPhone 上的笔记应用。

sarunw.com

除此之外,此修饰符还可用于其他可滚动视图,例如ListText Editor