一文彻底解决iOS中键盘回落后留白问题！

2023-11-22 00:12:48

写在前面

当QA和我反映页面卡顿只在iOS上出现时，第一反应肯定不是代码的问题，我也很纳闷iOS性能普遍要比android高啊，为啥会出现这么严重的卡顿，有点慌啊。于是开始了一次惊心动魄的前端性能优化之旅,在Google大概的看了几篇文章，感觉到应该是我在页面加了大量的动画造成了页面重排，嗯。正巧在同事的推荐下看了一个开源库-yoga-layout（后来发现是Facebook出品的，赞），这个库实现了安卓上的Flexbox布局，而且可以在iOS上通过Webkit的Flexbox API进行渲染，这个Flexbox API在iOS 8.0就已经实现了，简直就是为我量身定制的啊，立马使用起来。

解决方案

iOS中键盘回落后留白问题是一个常见问题，通常是由于以下原因引起的：

键盘弹出时，页面布局发生变化，导致页面内容被推到屏幕上方。
键盘回落时，页面内容未能及时恢复到原来的位置，导致屏幕上出现留白。

为了解决这个问题，我们可以采取以下措施：

使用Flexbox布局来优化页面布局。Flexbox布局可以使页面元素在不同设备和屏幕尺寸上保持一致的布局，从而避免键盘弹出时页面布局发生变化。
使用框架来管理页面状态。框架可以帮助我们管理页面状态，在键盘弹出和回落时自动调整页面布局。
使用动画来平滑页面布局的变化。动画可以使页面布局的变化更加平滑，避免出现突然跳动的情况。

示例代码

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 创建一个Flexbox布局容器
        let flexboxContainer = FlexboxLayoutContainer()

        // 向Flexbox布局容器中添加元素
        flexboxContainer.add(element: UILabel())
        flexboxContainer.add(element: UITextField())
        flexboxContainer.add(element: UIButton())

        // 设置Flexbox布局容器的属性
        flexboxContainer.flexDirection = .column
        flexboxContainer.justifyContent = .center
        flexboxContainer.alignItems = .center

        // 将Flexbox布局容器添加到视图中
        view.addSubview(flexboxContainer)

        // 创建一个键盘监听器
        let keyboardNotificationCenter = NotificationCenter.default
        keyboardNotificationCenter.addObserver(self, selector: #selector(keyboardWillShow), name: UIResponder.keyboardWillShowNotification, object: nil)
        keyboardNotificationCenter.addObserver(self, selector: #selector(keyboardWillHide), name: UIResponder.keyboardWillHideNotification, object: nil)
    }

    // 键盘弹出时回调
    @objc func keyboardWillShow(notification: NSNotification) {
        // 获取键盘高度
        let keyboardHeight = notification.userInfo![UIResponder.keyboardFrameEndUserInfoKey] as! CGRect

        // 更新Flexbox布局容器的bottom属性
        flexboxContainer.bottom = keyboardHeight.height
    }

    // 键盘回落时回调
    @objc func keyboardWillHide(notification: NSNotification) {
        // 将Flexbox布局容器的bottom属性设置为0
        flexboxContainer.bottom = 0
    }
}