Swift中WKWebView聚焦输入框弹键盘时出现LayoutConstraints错误求助

Hey there, let's work through this layout constraint issue you're facing with your WKWebView when focusing on a text input. I've dealt with similar quirks before, so here are actionable steps to resolve it:

1. Double-Check Your Base Constraints #

First, make sure your webView and webViewCont are properly constrained in your loadView() method. A common mistake is missing or conflicting constraints that get exposed when the keyboard resizes the view. Here's how you should set them up:

override func loadView() {
    super.loadView()
    
    view.addSubview(webViewCont)
    webViewCont.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        webViewCont.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
        webViewCont.leadingAnchor.constraint(equalTo: view.leadingAnchor),
        webViewCont.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        webViewCont.bottomAnchor.constraint(equalTo: view.bottomAnchor)
    ])
    
    webViewCont.addSubview(webView)
    webView.translatesAutoresizingMaskIntoConstraints = false
    NSLayoutConstraint.activate([
        webView.topAnchor.constraint(equalTo: webViewCont.topAnchor),
        webView.leadingAnchor.constraint(equalTo: webViewCont.leadingAnchor),
        webView.trailingAnchor.constraint(equalTo: webViewCont.trailingAnchor),
        webView.bottomAnchor.constraint(equalTo: webViewCont.bottomAnchor)
    ])
}

This ensures both views are pinned to the safe area and don't have ambiguous layout that could clash when the keyboard appears.

2. Disable Automatic Scroll View Adjustments #

WKWebView inherits from UIScrollView, and iOS's automatic scroll view insets can sometimes cause constraint conflicts when the keyboard pops up. Add this line when initializing your webView:

web.scrollView.contentInsetAdjustmentBehavior = .never

This takes manual control over how the scroll view adjusts to the keyboard, preventing unexpected constraint changes.

3. Handle Keyboard Notifications to Adjust Layout #

Listen for keyboard show/hide events to adjust your webView's bottom constraint dynamically. Here's how to set this up:

First, add an observer property in your class:

private var keyboardHeightConstraint: NSLayoutConstraint?

Then, in viewDidLoad():

override func viewDidLoad() {
    super.viewDidLoad()
    
    // Add keyboard observers
    NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillShow(_:)), name: UIResponder.keyboardWillShowNotification, object: nil)
    NotificationCenter.default.addObserver(self, selector: #selector(keyboardWillHide(_:)), name: UIResponder.keyboardWillHideNotification, object: nil)
    
    // Replace the webView's bottom constraint with a mutable one
    keyboardHeightConstraint = webView.bottomAnchor.constraint(equalTo: webViewCont.bottomAnchor)
    keyboardHeightConstraint?.isActive = true
}

Add the selector methods:

@objc private func keyboardWillShow(_ notification: Notification) {
    guard let userInfo = notification.userInfo,
          let keyboardFrame = userInfo[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect else { return }
    
    let keyboardHeight = view.convert(keyboardFrame, from: nil).height
    keyboardHeightConstraint?.constant = -keyboardHeight
    UIView.animate(withDuration: 0.3) {
        self.view.layoutIfNeeded()
    }
}

@objc private func keyboardWillHide(_ notification: Notification) {
    keyboardHeightConstraint?.constant = 0
    UIView.animate(withDuration: 0.3) {
        self.view.layoutIfNeeded()
    }
}

This dynamically adjusts the webView's bottom constraint to account for the keyboard height, avoiding constraint conflicts caused by sudden layout shifts.

4. Dig Into the Constraint Conflict Logs #

If you're still seeing errors, take a close look at the console output. iOS will log exactly which constraints are conflicting (look for lines starting with Unable to simultaneously satisfy constraints). This will tell you if there's a rogue constraint from your code or from WKWebView's internal layout that you need to override.

For example, if WKWebView is trying to maintain a specific height that clashes with your constraints, you can lower the priority of one of the conflicting constraints to resolve the issue.

内容的提问来源于stack exchange，提问作者Hattori Hanzō