Fatal编程技术网
  • qt/
  • 如果GUI旋转，WebEngineView中的Qt:HTML标记（下拉菜单）将显示在意外位置

如果GUI旋转，WebEngineView中的Qt:HTML标记（下拉菜单）将显示在意外位置

qt

如果GUI旋转，WebEngineView中的Qt:HTML标记（下拉菜单）将显示在意外位置,qt,rotation,html-select,webengine,Qt,Rotation,Html Select,Webengine,我刚刚在Qt中遇到了一个有趣的挑战，这是我几天来一直试图解决的问题。我花了几个小时在网上找到了一个类似的问题，但没有成功。一般来说，它是一个简单的GUI，带有基于QtWebEngine 1.4的WebEngineView，它显示一个带有一个下拉选择项的HTML文件，对于嵌入式设备，该项应旋转180°。但是如果旋转webengine，则下拉菜单的内容将显示在webengine之外 我在Qt中创建了一个SSCCE，为您提供了一个工作示例。您可以通过以下方式下载该项目： 我使用基于ChromiumV

我刚刚在Qt中遇到了一个有趣的挑战，这是我几天来一直试图解决的问题。我花了几个小时在网上找到了一个类似的问题，但没有成功。一般来说，它是一个简单的GUI，带有基于QtWebEngine 1.4的WebEngineView，它显示一个带有一个下拉选择项的HTML文件，对于嵌入式设备，该项应旋转180°。但是如果旋转webengine，则下拉菜单的内容将显示在webengine之外

我在Qt中创建了一个SSCCE，为您提供了一个工作示例。您可以通过以下方式下载该项目：

我使用基于ChromiumVersion45的QtVersion5.8WebEngine和基于ChromiumVersion56的Qt5.9WebEngine进行了以下所有测试

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <qtwebengineglobal.h>

#include <QtCore/QCoreApplication>
#include <qdebug.h>

using namespace std;

int main(int argc, char *argv[])
{
    // Enabling makes Qt scale the main (device independent)
    // coordinate system according to display scale factors
    // provided by the operating system.
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    // contains the main event loop, where all events from the
    // window system and other sources are processed and dispatched.
    QGuiApplication app(argc, argv);

    qDebug() << "platformName: " << app.platformName() << endl;
    // Current output: eglfs
    //
    // eglfs is a platform plugin for running Qt5 applications on top of EGL and
    // OpenGL ES 2.0 without an actual windowing system (like X11 or Wayland).
    // For more information, see EGLFS.
    // Other possibilities:
    // directfb or linuxfb

    // Environment variable QT_QPA_EGLFS_ROTATION doesn't work for QtQuick applications!
    // Qt Quick applications can apply transformations in their QML scene instead.
    // (But the transformation doesn't work for comboboxes/dropbdowns on a HTML website
    // invoked by the WebEngineView as demonstrated in file main.qml)

    // sets up an OpenGL Context that can be shared between threads.
    QtWebEngine::initialize();

    // provides a convenient way to load an application from a single QML file
    QQmlApplicationEngine engine;

    // load GUI
    engine.load(QUrl(QLatin1String("qrc:/main.qml")));
    if (engine.rootObjects().isEmpty())
        return -1;

    // enters the main event loop
    return app.exec();
}
index.html：

<!DOCTYPE html>
<html>
<body style="background-color:red;">

<center>
<div>
    <p>This is the content of index.html</p>
</div>
<div>
  <select>
    <option value=1>Option 1</option>
    <option value=2>Option 2</option>
    <option value=3>Option 3</option>
  </select>
<div>
</center>

</body>
</html>
main.qml的第1版： 在默认的横向方向中，一切正常，并与预期一致

main.qml：

import QtQuick 2.7
import QtQuick.Window 2.2
import QtWebEngine 1.4

Window {
id: rootWin
width: 1280
height: 800

  Item {
    WebEngineView {
            width: parent.width/4
            height: parent.height/4
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            url: "qrc:/index.html" // HTML page with a <select> Tag to create the dropdown list
        }
    }
}

import QtQuick 2.7
import QtQuick.Window 2.2
import QtWebEngine 1.4

Window {
id: rootWin
width: 1280
height: 800

  Item {
  rotation: 180
      WebEngineView {
            width: parent.width/4
            height: parent.height/4
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            url: "qrc:/index.html" // HTML page with a <select> Tag to create the dropdown list
        }
    }
}

import QtQuick 2.7
import QtQuick.Window 2.2
import QtWebEngine 1.4

Window {
id: rootWin
width: 1280
height: 800

  Rectangle {
  transform: Rotation { origin.x: rootWin.width/2; origin.y: rootWin.height/2; angle: 180 }
      WebEngineView {
            width: parent.width/4
            height: parent.height/4
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            url: "qrc:/index.html" // HTML page with a <select> Tag to create the dropdown list
        }
    }
}
main.qml的版本2：尝试代表项目旋转WebEngineView 如果旋转WebEngineView所在的项目，下拉内容将显示在意外位置，甚至在WebEngineView区域之外

main.qml：

import QtQuick 2.7
import QtQuick.Window 2.2
import QtWebEngine 1.4

Window {
id: rootWin
width: 1280
height: 800

  Item {
    WebEngineView {
            width: parent.width/4
            height: parent.height/4
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            url: "qrc:/index.html" // HTML page with a <select> Tag to create the dropdown list
        }
    }
}

import QtQuick 2.7
import QtQuick.Window 2.2
import QtWebEngine 1.4

Window {
id: rootWin
width: 1280
height: 800

  Item {
  rotation: 180
      WebEngineView {
            width: parent.width/4
            height: parent.height/4
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            url: "qrc:/index.html" // HTML page with a <select> Tag to create the dropdown list
        }
    }
}

import QtQuick 2.7
import QtQuick.Window 2.2
import QtWebEngine 1.4

Window {
id: rootWin
width: 1280
height: 800

  Rectangle {
  transform: Rotation { origin.x: rootWin.width/2; origin.y: rootWin.height/2; angle: 180 }
      WebEngineView {
            width: parent.width/4
            height: parent.height/4
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            url: "qrc:/index.html" // HTML page with a <select> Tag to create the dropdown list
        }
    }
}
main.qml的版本3：尝试代表矩形旋转WebEngineView 如果旋转WebEngineView所在的矩形，则下拉内容将显示在意外的位置，甚至在WebEngineView区域之外

main.qml：

import QtQuick 2.7
import QtQuick.Window 2.2
import QtWebEngine 1.4

Window {
id: rootWin
width: 1280
height: 800

  Item {
    WebEngineView {
            width: parent.width/4
            height: parent.height/4
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            url: "qrc:/index.html" // HTML page with a <select> Tag to create the dropdown list
        }
    }
}

import QtQuick 2.7
import QtQuick.Window 2.2
import QtWebEngine 1.4

Window {
id: rootWin
width: 1280
height: 800

  Item {
  rotation: 180
      WebEngineView {
            width: parent.width/4
            height: parent.height/4
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            url: "qrc:/index.html" // HTML page with a <select> Tag to create the dropdown list
        }
    }
}

import QtQuick 2.7
import QtQuick.Window 2.2
import QtWebEngine 1.4

Window {
id: rootWin
width: 1280
height: 800

  Rectangle {
  transform: Rotation { origin.x: rootWin.width/2; origin.y: rootWin.height/2; angle: 180 }
      WebEngineView {
            width: parent.width/4
            height: parent.height/4
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter

            url: "qrc:/index.html" // HTML page with a <select> Tag to create the dropdown list
        }
    }
}
有谁能告诉我，如果我旋转webengine的父对象，为什么我的下拉菜单的内容会出现在随机位置？

来自Stackoverflow指南：包含足够的代码，以允许其他人重现问题。有关这方面的帮助，请阅读如何创建一个最小、完整且可验证的示例。如果可以创建一个问题的实例，您可以链接到该实例，例如，on或然后这样做，但也可以在问题本身中包含代码。不是每个人都可以访问外部网站，而且链接可能会随着时间的推移而中断。谢谢你宝贵的输入，Jens。我只是在我的问题中添加了一些代码片段来澄清。也许你能重现这个问题并给我一个建议？因为看起来，这是一个我在Qt bug tracker上报告的bug：根据Stackoverflow指南：包含足够的代码，允许其他人重现这个问题。有关这方面的帮助，请阅读如何创建一个最小、完整且可验证的示例。如果可以创建一个问题的实例，您可以链接到该实例，例如，on或然后这样做，但也可以在问题本身中包含代码。不是每个人都可以访问外部网站，而且链接可能会随着时间的推移而中断。谢谢你宝贵的输入，Jens。我只是在我的问题中添加了一些代码片段来澄清。也许你能重现这个问题并给我一个建议？因为看起来，这是一个我在Qt bug跟踪器上报告的bug：