WebEngineView 大小不受约束且自然的情况下，如何让 Window 和 WebEngineView 一样高

Posted 2023-02-16

【中文标题】WebEngineView 大小不受约束且自然的情况下，如何让 Window 和 WebEngineView 一样高

【英文标题】：How to make the Window to be as high as the WebEngineView when the latter's size is not constrained and natural

【发布时间】：2018-04-07 16:49:22

【问题描述】：

我在最新的 Windows 10 上使用 Qt 5.10.1，以下简单程序不显示任何窗口：

import QtQuick 2.10
import QtQuick.Window 2.10
import QtWebEngine 1.5

Window  id: w
    visible: true
    title: "Test"

    // with this line, the program crashes before showing anything:
    height: v.contentsSize.height

    WebEngineView  id: v
        anchors.left: w.left
        anchors.right: w.right
        anchors.top: w.top

        onContentsSizeChanged: 
            console.log(contentsSize) // no output if not both width and height properties of the web view are specified
            w.height = contentsSize.height
        

        // if any of the following 2 lines are omitted, the web view the ":-)" string in the web view does not show up and the window looks empty although anchors.left and anchors.right are set above and the height is set
        // width: 100
        // height: 100

        // The following line crashes the program before showing the window
        // height: v.contentsSize.height

        Component.onCompleted: 
            loadhtml(":-)");
        
    

我特别希望窗口在大小不受限制时与 Web 视图一样高。相关文档链接：http://doc.qt.io/qt-5/qml-qtwebengine-webengineview.html#contentsSize-prop.

【参考方案1】：

// with this line, the program crashes before showing anything:
height: v.contentsSize.height

那是因为 contentsSize 在这一点上是 undefined .. 你还没有加载任何内容，qml 引擎在 undefined 高度崩溃。所以只留下Window 没有height .. 相当于（height:0）

我特别希望窗口与 Web 视图一样高 大小不受限制。

那么不要anchor WebEngineView .. 这就是问题所在，因为你的锚定 - 不完整 - 将给 WebEngineView 一个初始高度之后的初始默认高度 Window，但你永远不会改变加载后稍后.. 所以即使Window 也无法调整到更小的高度！

要以最少的更改安全地执行此操作，请将 WebEngineView 的 WebEngineView 的 height/width 初始设置为任何值.. 然后在加载内容后，将 WebEngineView height / width 重置为 @987654338 @ .. 这样Window 可以调整到那个高度。

Window  id: w
    visible: true
    title: "Test"

    WebEngineView 
        id: v
        width:1
        height:1
        onContentsSizeChanged: 
            console.log(contentsSize) // no output if not both width and height properties of the web view are specified
            //
            // here you can set web view height so that Window heigth is same as webview
            width = contentsSize.width
            height = contentsSize.height
            // and Window height
            w.height = contentsSize.height

        
        Component.onCompleted: 
            loadHtml(":-)");
        
    

【讨论】：

为了让问题中的代码能够很好的发挥作用，我把Window初始的height属性绑定去掉了，然后把WebEngineView的所有anchors替换成anchors.fill: parent。您的技术的优点是用户可以调整 Window 的大小而不会自动调整 WebEngineView 的大小，但我不能让您的技术在我的整个项目代码中工作（问题中的代码只是一个简单的测试用例）。在我的项目中，WebEngineView 位于一个 Rectangle 内（我无法正确设置其大小），该 Rectangle 位于 ApplicationWindow 内的另一个 Rectangle 内。

@silviubogan，要调查的一个重要问题：contentsSize 没有很好的文档记录.. 我注意到contentsSize 的值不能低于WebEngineView 的初始大小..这就是为什么设置anchors 是一个问题.. 当你这样做时，webview 会从Window 获得初始大小（160,160），但是 它将能够增长但不会缩小 大小！我无法做出这样的概括！我只是观察了一下。关于您的代码，关键是WebEngineView 的parent 是谁？在您的示例代码中，Window 是父级，不同的父级只需注意上述观察。

我已经问了另一个问题，关于它不会在这里缩小的事实：***.com/q/49719310/258462。