StackView 中的 WKWebView 未正确调整大小答案

【问题标题】：WKWebView inside a StackView not re-sizing correctlyStackView 中的 WKWebView 未正确调整大小
【发布时间】：2021-04-01 00:56:57
【问题描述】：

我有一个 TableView，在其中一个单元格中我有一个 StackView，里面有一个 WKWebView。我正在尝试动态调整 WKWebView 的大小，当视图的高度需要大于以前的高度时它可以正常工作，但是如果我需要降低高度，它不会调整。

此单元格内的内容通过 ViewModel 函数配置刷新：

class AboutTableViewCell: UITableViewCell {
    weak var delegate: AboutTableViewCellDelegate?


    let aboutStackView: UIStackView = {
        let sv = UIStackView()
        sv.axis = .vertical
        sv.distribution = .equalSpacing
        sv.translatesAutoresizingMaskIntoConstraints = false
        sv.spacing = 6
        return sv
    }()

    let descriptionLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.customRobotoBold18
        label.text = DESCRIPTION_LABEL_TEXT
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()

    let webview: WKWebView = {
        var webview = WKWebView()
        webview.isOpaque = true
        webview.translatesAutoresizingMaskIntoConstraints = false
        webview.scrollView.isScrollEnabled = false
        return webview
    }()

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        self.contentView.isUserInteractionEnabled = true
        newCommentTextView.delegate = self
        webview.navigationDelegate = self

        addSubviews()
        configure()
        setupAutoLayout()
    }

    private func addSubviews() {
        self.contentView.addSubview(aboutStackView)
        aboutStackView.addArrangedSubview(descriptionLabel)
        webViewHeightConstraint = webview.heightAnchor.constraint(equalToConstant: 1.0)
        webViewHeightConstraint?.isActive = true
        aboutStackView.addArrangedSubview(webview)
    }

    private func setupAutoLayout() {
        NSLayoutConstraint.activate([
            aboutStackView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10),
            aboutStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10),
            aboutStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10),
            aboutStackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -10)
        ])
    }

    private func configure() {
        self.contentView.clipsToBounds = true
        guard let session = RefreshToken.shared.session else {
            return
        }
        self.contentView.backgroundColor = .mainBackgroundColor
    }
}

这是触发 loadHTMLString 后用于执行高度更改的扩展：

extension AboutTableViewCell: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        webView.evaluateJavaScript("document.readyState", completionHandler: { result, error in

            if result == nil || error != nil {
                return
            }

            webView.evaluateJavaScript("document.body.offsetHeight", completionHandler: { result, error in
                if let height = result as? CGFloat {
                    self.webViewHeightConstraint?.constant = height
                }
            })
        })
    }
}

这是用于填充内容的视图模型：

class AboutViewModel {

   private var rawHTML: String?

   init(html: String) {
       rawHTML = html
   }

    func configure(with cell: AboutTableViewCell) {
        self.cell = cell

        if let raw = self.rawHTML {
            let headerString = "<head><meta name='viewport' content='width=device-width, initial-scale=0.7, maximum-scale=0.7, minimum-scale=0.7, user-scalable=no'/><link rel=\"preconnect\" href=\"https://fonts.gstatic.com\"><link href=\"https://fonts.googleapis.com/css2?family=Roboto&display=swap\" rel=\"stylesheet\"><style>a:link {color: #ffc000;text-decoration: none;}body{font-family: 'Roboto', sans-serif;}</style>"
        
            let finalHTML = raw.replacingOccurrences(of: "/data/", with: "https://" + NetworkService.HostName + "/data/").replacingOccurrences(of: "<pre>", with: "<small style='word-wrap:break-word;color:rgba(0,0,0,0.4);'>").replacingOccurrences(of: "</pre>", with: "</small>")
        
            cell.webview.loadHTMLString(headerString + finalHTML, baseURL: nil)
        }
    }
}

关于为什么我的内容在内容需要时没有缩小的任何想法？正如我提到的，当需要扩展高度时它确实有效。

【问题讨论】：

在更改约束常量值后尝试调用layoutIfNeeded() 方法。
不幸的是，这似乎不是问题。
@Isuru - 添加一些 print() 语句进行调试。例如，当您期望小于框架高度时，.evaluateJavaScript("document.body.offsetHeight" ... 的返回值是多少？

标签： ios swift uitableview wkwebview uistackview

【解决方案1】：

尝试在evaluateJavaScript 回调中移动您的子视图初始化：

class AboutTableViewCell: UITableViewCell {

    ...

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        self.contentView.isUserInteractionEnabled = true
        newCommentTextView.delegate = self
        webview.navigationDelegate = self

        configure()
        setupAutoLayout()
    }

    private func addSubviews(_ height: CGFloat = 1.0) {
        self.contentView.addSubview(aboutStackView)
        aboutStackView.addArrangedSubview(descriptionLabel)
        webview.heightAnchor.constraint(equalToConstant: height).isActive = true
        aboutStackView.addArrangedSubview(webview)
        aboutStackView.layoutIfNeeded()
    }

    ...
}

extension AboutTableViewCell: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        webView.evaluateJavaScript("document.readyState", completionHandler: { result, error in

            if result == nil || error != nil {
                addSubviews()
                return
            }

            webView.evaluateJavaScript("document.body.offsetHeight", completionHandler: { result, error in
                guard let height = result as? CGFloat else { 
                    addSubviews()
                    return 
                }
                    
                addSubviews(height)
            })
        })
    }
}

【讨论】：