QML Webview 使用 x-offset 呈现 SELECT 元素

Posted 2023-02-16

【中文标题】QML Webview 使用 x-offset 呈现 SELECT 元素

【英文标题】：QML Webview renders SELECT elements with x-offset

【发布时间】：2011-08-18 10:24:48

【问题描述】：

我目前正在实现一个 WebView，它包含一个网页，页面上有一个选择表单元素。每当我单击选择框时，包含可能值的对话框就会出现在页面外。

对话框不在 WebView 或父级中居中。在模拟器上，它显示在网页下拉框的正下方，但太宽而无法在屏幕上显示（遮挡滚动条），而在设备上，它显示在屏幕的左下角。

有人有这方面的经验吗？我只是使用 QML WebView 项目，它不在 Flickable 中（我最初认为这是问题）

背景与调查

两种渲染this page的方法：

一个使用 Qt QWebview 并在模拟器上运行的简单项目给出了这个：

注意：选择菜单是窗口的全宽。

通过一个使用以下 QML 的简单项目：

import QtQuick 1.0
import QtWebKit 1.0

Rectangle 
    anchors.fill: parent

    WebView 
            anchors.fill: parent
            url: "http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option"
    

会产生以下结果：

我在这里做错了什么？我需要对我的 QML 做些什么才能使其正确呈现菜单？

【参考方案1】：

好的。这感觉不对。

我不敢相信我的板上有一个故事是“作为 Qt 用户，我可以从长列表中选择值”。

所以我对此的解决方案是使用evaluatejavascript 将一大段 Javascript 注入到 Webview 中，它会爬取 DOM 以查找 SELECT 元素。

单击选择时，使用选项列表调用 QML，然后呈现选择框的 QML 版本。

回程更简单，但同样没有吸引力。

我尝试为选择元素添加点击或点击侦听器，但 DOM API 不完整（将尝试查找规范链接），我尝试的任何操作都不会触发处理程序。最后，我把它藏了起来，并在它的位置添加了一个按钮。

必须有更好的方法。

【讨论】：

您找到解决问题的方法了吗？这是错误：bugs.webkit.org/show_bug.cgi?id=113045

这是一个不同的错误。该错误是关于在您进行选择后所选项目未更改的问题。这是渲染菜单本身的问题。这不太可能仍然是一个问题，尽管这是在基于诺基亚 Qt 的手机上，他们不再生产了。