0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

QML加载模块 WebView 与C++代码通信控制WebView模块的隐藏与显示

DS小龙哥-嵌入式技术 来源:DS小龙哥-嵌入式技术 作者:DS小龙哥-嵌入式技 2023-05-23 09:12 次阅读

QML 中的 WebView 模块是用于在应用程序中嵌入 Web 内容的模块。它提供了一个 WebView 组件,可以通过载入 URL 或 HTML 内容来显示 Web 页面。

以下是一个简单的示例:


import QtQuick 2.0
import QtWebView 1.0

Item {
    WebView {
        url: "http://www.example.com"
        anchors.fill: parent
    }
}

这个示例使用了 WebView 组件来显示 example.com 的网页内容。在组件中设置了 url 属性来指定要显示的页面。anchors.fill: parent 则将 WebView 组件填充到父级元素的大小中。

除了加载 URL 外,WebView 还支持加载 HTML 内容、JavaScript 和 CSS,并提供了一些其他的选项和属性来控制页面的呈现和交互。

要在 C++ 代码中控制 QML 中的 WebView 模块的显示和隐藏,可以使用信号和槽(signals and slots)机制来实现。

首先,在 QML 中为 WebView 添加一个 visible 属性,并将其绑定到一个 C++ 的槽函数,如下所示:

import QtWebView 1.1
​
WebView {
   id: myWebView
   visible: webViewVisible // 绑定 visible 属性到 C++ 槽函数
}

然后,在 C++ 代码中,创建一个带有 Q_PROPERTY 的类,用于控制 WebView 的可见性。例如:

class WebViewManager : public QObject
{
   Q_OBJECT
   Q_PROPERTY(bool visible READ isVisible WRITE setVisible NOTIFY visibilityChanged)
​
public:
   explicit WebViewManager(QObject *parent = nullptr)
     : QObject(parent)
     , m_webView(new QQuickWidget)
   {
     // 设置 QQuickWidget 的属性...
   }
​
   bool isVisible() const { return m_visible; }
​
public slots:
   void setVisible(bool visible)
   {
     if (m_visible != visible) {
       m_visible = visible;
       emit visibilityChanged(m_visible);
     }
   }
​
signals:
   void visibilityChanged(bool visible);
​
private:
   QQuickWidget *m_webView;
   bool m_visible = true;
};

在上述代码中,WebViewManager 类包含一个 visible 属性,以及相应的读写方法和通知信号。在 setVisible() 槽函数中,我们检查传入的 visible 参数是否与当前的可见性状态不同,如果是,则更新状态并发出 visibilityChanged 信号。

最后,在应用程序的其他部分,可以创建一个 WebViewManager 的实例,并将其绑定到 QML 中的 WebView 模块:

// 创建 WebViewManager 实例...
WebViewManager webViewManager;
​
// 将 WebViewManager 实例绑定到 QML 中的 WebView 模块
QQmlEngine engine;
QQmlComponent component(&engine, "myqml.qml");
QQuickItem *item = qobject_cast(component.create());
QObject::connect(&webViewManager, &WebViewManager::visibilityChanged, item, [item](bool visible) {
   item->setProperty("webViewVisible", visible);
});
​
// 显示 QML 界面...

在上述代码中,首先创建了一个 WebViewManager 的实例,并将其连接到 QML 中的 WebView 模块。然后,使用 QQmlComponent 类加载 QML 文件,并获取 QQuickItem 对象,该对象代表在 QML 文件中创建的 WebView。最后,通过 connect() 函数将 visibilityChanged 信号与 QML 中的 webViewVisible 属性绑定起来,从而控制 WebView 的可见性。

审核编辑:汤梓红

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 嵌入式
    +关注

    关注

    5059

    文章

    18972

    浏览量

    301922
  • 通信
    +关注

    关注

    18

    文章

    5947

    浏览量

    135775
  • C++
    C++
    +关注

    关注

    21

    文章

    2098

    浏览量

    73453
  • Qt
    Qt
    +关注

    关注

    1

    文章

    301

    浏览量

    37781
  • webview
    +关注

    关注

    0

    文章

    7

    浏览量

    3121
收藏 人收藏

    评论

    相关推荐

    Android webView播放flash的问题

    Java代码  public class BrowserTest extends Activity {  private WebView mWebView;  @Override
    发表于 01-09 22:34

    001 - 使用鸿蒙WebView创建简单浏览器 step 1

    /documentation/doc-guides/ui-java-component-webview-0000001092715158创建一个Page Ability,把基本布局弄好下面是代码&
    发表于 04-17 10:26

    使用WebView组件实现应用与Web页面间的通信

    ,接下来我们将分别进行介绍。WebView加载网络Web页面在entry/src/main/config.json中申请网络权限ohos.permission.INTERNET,示例代码如下
    发表于 08-26 10:39

    webview组件能获得cookie数值,但app进程一结束cookie的数值就失效是为什么?

    直接登陆而不用输入账号密码。代码如下:url1 = "xxxxxxxx";webView = (WebView) findComponentById
    发表于 03-25 10:36

    如何在鸿蒙的webview上面放其它组件?

    需求:需要在鸿蒙的webview显示一个网页,在webview上面再添加一个文本,但是无论怎么webview都会覆盖掉其它组件,这个是鸿蒙把web
    发表于 03-28 10:00

    harmonyos webview布局中创建,增加load加载布局不显示是为什么

    问题:webview布局中创建,增加load加载布局 实际运行不显示加载布局布局中webview的ohos:height=“200vp” 指
    发表于 04-02 15:16

    请问鸿蒙WebView如何设置字体大小?

    WebView如何设置字体大小,难道只能设置自适应??
    发表于 04-06 14:53

    鸿蒙的webview如何设置请求头?

    这是Android的webview加载网页设置请求头的方式:Map webviewHead =new HashMap();webviewHead.put("Referer"
    发表于 05-11 11:29

    鸿蒙的webview加载不了网页是为什么?

    鸿蒙的webview怎么使用呢 权限给了 就是加载不了网页
    发表于 06-09 09:54

    鸿蒙webview加载Vue h5失败是什么原因导致的?

    : ignored但该H5 url在Android webview能正常加载,且鸿蒙webview能正常加载https:百度、华为论坛等其他url,唯独
    发表于 06-09 10:05

    harmonyos webview布局增加load不显示是为什么?

    问题:webview布局中创建,增加load加载布局实际运行不显示加载布局布局中webview的ohos:height=“200vp”指定一
    发表于 06-13 10:19

    iOS系统webview与JS的交互

    昨天写了Swift和JS的交互,既然写了就把OC的也写了出来: 第一部分:webview与Js的交互 第二部分:设定cookie 第三部分:修改header头 1 交互 #import
    发表于 09-25 15:41 0次下载

    深入理解WebView

    摘要 作为Android开发者,我们都知道在手机中内置了一款高性能 webkit 内核浏览器,在 SDK 中封装为一个叫做 WebView 组件。今天就为大家讲讲Android中WebView的详细
    发表于 10-11 10:16 0次下载

    鸿蒙webview的使用和JS交互

    日常我们在开发项目时,为了项目快速的开发和迭代,难免会用到H5页面。使用鸿蒙进行项目开发时,也一样免不了要加载H5页面,在移动开发中打开H5页面需要使用WebView组件。同时,为了和H5页面进行数据交换,有时候还需要借助JSBridge来实现客户端与H5之间的通讯。
    的头像 发表于 02-28 10:56 2478次阅读
    鸿蒙<b class='flag-5'>webview</b>的使用和JS交互

    用于OHOS的WebView和Javascript之间可扩展的双向通信框架

    项目介绍 功能: 轻量可扩展 OHOS WebView 和 Javascript 双向交互框架。 安装教程 方式一 1.将debugkit模块内容拷贝到自己项目对应模块目录下 2.在需要使用的
    发表于 04-08 09:29 0次下载