QML与C++交互详解（二）

最新推荐文章于 2023-05-12 16:16:19 发布
最新推荐文章于 2023-05-12 16:16:19 发布
阅读量607 收藏
点赞数
分类专栏： QML 学习 文章标签： c++ 交互 qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42252757/article/details/126966958
版权

QML与C++交互详解（二）

QML中连接C++ 的信号

  • 话不多说：
/**
 * @file BaseQmlWidget.h
 * @author shijiaobing (503876187@qq.com)
 * @brief   QQuickWidget loaded Qml File  to embed C++ QWidget
 * @version 0.1
 * @date 2022-09-21
 *
 * @copyright Copyright (c) 2022
 *
 */
#ifndef _BASE_QML_WIDGET_H_
#define _BASE_QML_WIDGET_H_
#include <QQuickWidget>
#include "Ui_Export_Dll.h"
#include <QQuickItem>

class UIDLLEXPORT BaseQmlWidget : public QWidget
{
    Q_OBJECT
public:
    /**
     * @brief Construct a new Base Qml Widget object
     *
     * @param url
     * @param parent
     */
    BaseQmlWidget(const QUrl &url, QWidget *parent = nullptr);
    /**
     * @brief Destroy the Base Qml Widget object
     *
     */
    virtual ~BaseQmlWidget();
    /**
     * @brief get QQuickWidget
     *
     * @return QQuickWidget*
     */
    QQuickWidget *quickWidget();

protected:
    /**
     * @brief Create a Qml Widget object
     *
     */
    virtual void createQmlWidget();

    /**
     * @brief init layout
     *
     */
    virtual void initLayout();
    /**
     * @brief Set the Context Property object
     *
     */
    virtual void setContextProperty() = 0;
    /**
     * @brief init baseQmlWidget
     *
     */
    virtual void initBaseQmlWidget();
    QQuickWidget *m_item = nullptr;
    QUrl m_url;
};
#endif


#include "BaseQmlWidget.h"
#include <QUrl>
#include <QWidget>
#include <QHBoxLayout>
#include "FileHelper.h"
BaseQmlWidget::BaseQmlWidget(const QUrl &url, QWidget *parent)
    :QWidget(parent),m_url(url)
{
    
}
BaseQmlWidget::~BaseQmlWidget() {

}
void BaseQmlWidget::initBaseQmlWidget()
{
    createQmlWidget();

    setContextProperty();

    initLayout();
}

QQuickWidget* BaseQmlWidget::quickWidget() {
    return m_item;
}


void BaseQmlWidget::createQmlWidget(){
   
    m_item = new QQuickWidget();
    m_item->quickWindow()->setPersistentOpenGLContext(true);
    m_item->quickWindow()->setClearBeforeRendering(true);
    m_item->setWindowFlag(Qt::FramelessWindowHint);
    m_item->setClearColor(QColor(Qt::transparent));
    m_item->setResizeMode(QQuickWidget::SizeRootObjectToView);
    m_item->setParent(parentWidget());
}


void BaseQmlWidget::initLayout() {
    m_item->setSource(m_url);
    QHBoxLayout* layout = new QHBoxLayout();
    layout->setSpacing(0);
    layout->setMargin(0);
    layout->addWidget(reinterpret_cast<QWidget*>(m_item));
    this->setLayout(layout);
}


/**
 * @file TitleBar.h
 * @author shijiaobing (503876187@qq.com)
 * @brief 标题栏
 * @version 0.1
 * @date 2022-09-21
 *
 * @copyright Copyright (c) 2022
 *
 */
#ifndef _TITLE_BAR_H_
#define _TITLE_BAR_H_
#include "BaseQmlWidget.h"

class TitleBarData;
class UIDLLEXPORT TitleBar : public BaseQmlWidget
{
    Q_OBJECT
    Q_PROPERTY(bool maxWindowFlag READ maxWindowFlag WRITE setMaxWindowFlag NOTIFY maxWindowFlagChanged)
public:
    /**
     * @brief Construct a new Title Bar object
     *
     * @param url
     * @param parent
     */
    explicit TitleBar(const QUrl &url, QWidget *parent = nullptr);
    ~TitleBar();
    /**
     * @brief 获取qml对象
     *
     * @return QList<QQuickItem *>
     */
    QList<QQuickItem *> items();
    /**
     * @brief qml调用方法
     *
     * @return bool
     */
    Q_INVOKABLE bool maxWindowFlag() const;
    /**
     * @brief Set the Max Window Flag object
     *
     * @param flag
     */
    void setMaxWindowFlag(bool flag);
signals:
    /**
     * @brief 最大化通知界面
     *
     * @param flag
     */
    void maxWindowFlagChanged(bool flag);

protected:
    /**
     * @brief Set the Context Property object
     *
     */
    virtual void setContextProperty() override;

private:
    void initConnect();
    bool m_maxWindowFlag = false;
    QList<QQuickItem *> m_items;
};

#endif


#include "TitleBar.h"
#include <QQmlContext>
#include <QQmlEngine>

TitleBar::TitleBar(const QUrl &url, QWidget *parent)
    : BaseQmlWidget(url, parent)
{
    initBaseQmlWidget();
    initConnect();
}

TitleBar::~TitleBar()
{

}

QList<QQuickItem*> TitleBar::items()
{
    return m_items;
}
void TitleBar::setContextProperty() {
    m_item->rootContext()->setContextProperty("titleBarData",this);

   
}
void TitleBar::initConnect()
{
    auto items = m_item->rootObject()->childItems();
    foreach(auto item, items) {
        if (item->objectName() == "row") {
            m_items.append(item);
        }
    }
}

void TitleBar::setMaxWindowFlag(bool flag) {
    if (m_maxWindowFlag != flag) {
        m_maxWindowFlag = flag;
        emit  maxWindowFlagChanged(m_maxWindowFlag);
    }
}


bool TitleBar::maxWindowFlag()const {

    return m_maxWindowFlag;
}


import QtQuick 2.14
import QtQml 2.14
import "./Controls"
Rectangle {
    id: root
    property bool isMaxWindow: false
    objectName: "TitleBar"
    signal closeBtnClick()
    signal maxBtnClick()
    signal minBtnClick()
    signal restoreBtnClick()
    signal menuBtnClick()
    signal registerBtnClick()
    signal buyBtnClick()

    radius:root.isMaxWindow?0:10
    color: "#2E2F30"

    Text {
        id: product_name_text
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.leftMargin: 12
        height:root.height
        verticalAlignment: Text.AlignVCenter
        font.pixelSize: 14
        color: "#FFFFFF"
        text: "123123213123"
    }

    Row {
        spacing: 12
        anchors.right: parent.right
        anchors.rightMargin: 12
        anchors.verticalCenter: parent.verticalCenter
        objectName: "row"
       // verticalAlignment:Row.AlignVCenter
        TitleButton {
            id: registerBtn

            objectName: "registerBtn"
            imageUrlNomal: "qrc:/image/registerBtn_nomal.png"
            imageUrlHover: "qrc:/image/registerBtn_hover.png"
            imageUrlPressed: "qrc:/image/registerBtn_pressed.png"
            onBtnClick: {
                registerBtnClick()
            }
        }

        TitleButton {
            id: buyBtn
            objectName: "buyBtn"
            imageUrlNomal: "qrc:/image/buyBtn_nomal.png"
            imageUrlHover: "qrc:/image/buyBtn_hover.png"
            imageUrlPressed: "qrc:/image/buyBtn_pressed.png"
            onBtnClick: {
                buyBtnClick()
            }
        }

        TitleButton {
            id: menuBtn
            objectName: "menuBtn"
            imageUrlNomal: "qrc:/image/menuBtn_nomal.png"
            imageUrlHover: "qrc:/image/menuBtn_hover.png"
            imageUrlPressed: "qrc:/image/menuBtn_pressed.png"
            onBtnClick: {
                menuBtnClick()
            }
        }

        TitleButton {
            id: minBtn
            objectName: "minBtn"
            imageUrlNomal: "qrc:/image/minBtn_nomal.png"
            imageUrlHover: "qrc:/image/minBtn_hover.png"
            imageUrlPressed: "qrc:/image/minBtn_pressed.png"
            onBtnClick: {
                minBtnClick()
            }
        }

        TitleButton {
            id: maxBtn
            objectName: "maxBtn"
            imageUrlNomal: root.isMaxWindow ? "qrc:/image/restoreBtn_nomal.png" : "qrc:/image/maxBtn_nomal.png"
            imageUrlHover: root.isMaxWindow ? "qrc:/image/restoreBtn_hover.png" : "qrc:/image/maxBtn_hover.png"
            imageUrlPressed: root.isMaxWindow ? "qrc:/image/restoreBtn_pressed.png" : "qrc:/image/maxBtn_pressed.png"
            onBtnClick: {
                console.log("maxBtn"+titleBarData.maxWindowFlag)
                if (root.isMaxWindow)
                    restoreBtnClick()
                else
                    maxBtnClick()
            }
        }

        TitleButton {
            id: closeBtn
            objectName: "closeBtn"
            imageUrlNomal: "qrc:/image/closeBtn_nomal.png"
            imageUrlHover: "qrc:/image/closeBtn_hover.png"
            imageUrlPressed: "qrc:/image/closeBtn_pressed.png"
            onBtnClick: {
                
                closeBtnClick()
            }
        }

    }

    Rectangle {
        id: background_left_bottom_rect

        width: 10
        height: 10
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        color: "#2E2F30"
    }

    Rectangle {
        id: background_right_bottom_rect

        width: 10
        height: 10
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        color: "#2E2F30"
    }
    Connections{
        target: titleBarData
        function onMaxWindowFlagChanged(value){
            console.log("onMaxWindowFlagChanged"+value)
            root.isMaxWindow=value
        }
    }
}


void MainWindow::initConnect() {

    connect(m_helper, &FramelessHelper::maximizedChanged, m_titileBar, &TitleBar::setMaxWindowFlag);

    connect(m_titileBar->quickWidget()->rootObject(), SIGNAL(buyBtnClick()), this, SLOT(onBuyBtnClicked()));

    connect(m_titileBar->quickWidget()->rootObject(), SIGNAL(menuBtnClick()), this, SLOT(onMenuBtnClicked()));
    
    connect(m_titileBar->quickWidget()->rootObject(), SIGNAL(registerBtnClick()), this, SLOT(onRegisterBtnClicked()));

    connect(m_titileBar->quickWidget()->rootObject(), SIGNAL(minBtnClick()), m_helper, SLOT(triggerMinimizeButtonAction()));

    connect(m_titileBar->quickWidget()->rootObject(), SIGNAL(maxBtnClick()), m_helper, SLOT(triggerMaximizeButtonAction()));

    connect(m_titileBar->quickWidget()->rootObject(), SIGNAL(closeBtnClick()), m_helper, SLOT(triggerCloseButtonAction()));

    connect(m_titileBar->quickWidget()->rootObject(), SIGNAL(restoreBtnClick()), m_helper, SLOT(triggerMaximizeButtonAction()));

}

可以看出C++ 获取qml嵌入的quickwidget中的rootObject()方法获取到QQuickItem对象为qml 中的root,
此时由于qml 是支持qt 的原对象系统的，qml 文件在经过moc 编译后会含有信号函数，此时可以直接连接qml 中得信号。而C++ 中的对象也是同样的，这样我们就可以实现qml 与C++ 的通信啦。

问君能有几多愁～
关注
专栏目录
【Qt QML】ComboBox组件
wangyi463295828的博客
08-11 137
ComboBox是一种常用的图形用户界面（GUI）控件，它结合了文本框（TextBox）和下拉列表（DropDownList）的功能。用户可以从下拉列表中选择一个选项，也可以直接在文本框中输入内容。
QML与QWidget交互
08-15
本程序实现：单击qml页面，更新按钮的文本；单击按钮，更新qml页面的颜色；展示qml嵌入QWidget方法与通信
QComboBox里的每个选项加入多个控件
陌上人如玉，公子世无双。
04-06 787
.
Q_INVOKABLE与invokeMethod用法详解
yangchuankai's blog
11-26 5490
Q_INVOKABLE与invokeMethod用法全解 请尊重原创作品和译文。转载请保持文章完整性，并以超链接形式注明原始作者地址http://blog.csdn.net/changsheng230，方便其他朋友提问和指正。   在Qt/Qt Quick宏浅议一文中，我们将介绍Qt中经常使用的几个宏： Q_OBJECT, SIGNAL与SLOT, Q_SIGNALS 与 Q_SLOTS
【Qt】自定义QComboBox实现下拉选项添加删除按钮，回车添加选项
weixin_46246664的博客
05-12 3592
记录下Qt的自定义QComboBox下拉选项添加删除按钮功能。
QML学习十二：QML与C++交互之QML端发送信号绑定C++端
05-23 3149
若该文为原创文章，转载请注明原文出处 通过自定义Object类，可以在QML直接访问。通过这种方式，读取数据和设置数据都可以在C++端实现，QML端只需获取数据展示就行。 那QML端和C++端的信号和槽是如何使用的呢？ 一、补充知识点 如何在QML端调用C++端的函数。正常情况下，在QML端调用C++函数，是无法调用的，但想要调用其他也很简单，只需要在C++端声明函数时添加Q_INVOKABLE,就可以被QML访问了。 比如在c++端定义一个func()函数，为了让QML可以调用，那就这样定义：
qml与c++交互
06-01
**QML与C++交互详解** 在现代软件开发中，特别是图形用户界面（GUI）的构建，QML和C++的结合使用成为一个强大的工具。QML（Qt Meta Language）是Qt框架的一部分，它提供了一种声明式的语言来设计美观、响应迅速的...
qml与c++混合编程例子
04-30
**QML与C++混合编程详解** 在现代软件开发中，Qt框架因其强大的跨平台能力、高效的性能以及丰富的用户界面库而备受青睐。Qt中的QML（Qt Meta Language）是用于构建用户界面的一种声明式语言，它允许开发者以简洁、...
QT QML信号与信号槽详解
06-20
总结来说，QT QML的信号与信号槽机制是一种强大而灵活的通信方式，它使得C++和QML对象间的交互变得简单易懂。理解和熟练掌握这一机制，对于开发高质量的Qt应用程序至关重要，无论是在桌面环境还是移动平台，它都能极...
基于C++Qml的截图软件.zip
最新发布
01-11
《基于C++与QML的截图软件开发详解》 在当今的计算机技术领域，软件开发已经成为了一项不可或缺的重要技能。本篇文章将深入探讨一个特定的项目——基于C++和QML的截图软件的开发，旨在帮助读者理解这两种技术的结合...
Qt5.8中QML教程并结合实际工程项目详解
01-27
这篇博客会介绍一下Qt中使用QML来设计GUI界面，以及QML与C++交互的方式。QML是Qt自定义的一种GUI描述文件，其文档结构有点类似NodeJS或者TypeScript，跟Android编程中的Activity的设计也很类似，在客户端GUI编程的...
QML与C++混合编程详解(QML与c++信号与槽的操作)
细雨纷飞~~~
05-05 2226
1、QML与C++为什么要混合编程 QML与C++为什么要混合编程，简单来说，就是使用QML高效便捷地构建UI，而C++则用来实现业务逻辑和复杂算法，下面介绍了两者间交互的方法与技巧。 2、QML访问C++概述 Qt集成了QML引擎和Qt元对象系统，使得QML很容易从C++中得到扩展，在一定的条件下，QML就可以访问QObject派生类的成员，例如信号、槽函数、枚举类型、属性、成员函数等。 ...
C++与QML信号交互（非Q_PROPERTY法）
IT1995的博客
10-18 5223
运行截图如下： 源码如下： widget.h #ifndef WIDGET_H #define WIDGET_H #include &lt;QWidget&gt; namespace Ui { class Widget; } class Widget : public QWidget { Q_OBJECT public: explicit Widget(QWid...
QT qml的入门使用
道亦无名
08-03 961
结构如下： main.cpp代码： #include <QGuiApplication> #include <QQmlApplicationEngine> int main(int argc, char *argv[]) { QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); QGuiApplication app(argc, argv); QQmlApplicationEngine
QML调用C++的三种方法
左霖风的博客
11-10 8820
1.注册法 由于QML引擎与Qt元对象系统的紧密集成，可以从QML代码访问由QObject派生的类适当公开的任何功能。这使得C ++类的属性和方法可以直接从QML访问，通常很少或无需修改。 QML引擎能够通过元对象系统内省QObject实例。这意味着，任何QML代码都可以访问QObject派生类实例的以下成员： 属性（使用Q_PROPERTY注册的属性） 方法（需注册为public slots或是标记为Q_INVOKABLE） 信号 （此外，如果已使用Q_ENUMS声明枚举，则可以使用枚举。） 通常，无
QT 学习笔记之QML与C++（上）
baidu_41388533的博客
03-25 453
QT 学习笔记之QML与C++（上） 目录 QT 学习笔记之QML与C++（上） C++ 对象注册到元对象系统 C++ 类注册到 Qml 系统 C++ 创建/获取Qml对象 Qml 调用 C++ 对象公共函数 Qml 访问 C++ 对象属性（对象成员变量） Qml 调用 C++ 对象槽函数 C++ 对象注册到元对象系统 使用 Q_INVOKABLE 进行申明，这个宏是将函数申明为元对象系统可调用的函数。QtQuick 也在元对象系统内，所以也就可以访问这个函数。 cl..
Qt QML 与 C++ 交互 信号与槽 属性 注册等初学者手册
你学习了吗？咋办，先想法子忽悠成“砖家”呗
08-02 2513
前言   QML 是一套 QT 开发前端显示的软件，其最大特色就是基于 Qt 的宏系统实现了与 C++ 及 Javascript 交互和连接，本篇主要讲解 QML 与 C++ 的交互（ QML 调用 C++），至于 C++ 调用 QML 部分相对比较简单查看官方文档即可   很多 C++ 与 QML 以及 Javascript 的变量，宏系统会自动进行切换 目录结构 官方文档 Official ...
QComboBox下拉框给选项增加删除按钮
热门推荐
龚建波
06-04 1万+
0.前言 给下拉框增加按钮是常见的功能，如 QQ 账号输入框的下拉： 网上有不少 Qt 实现的例子，实现方式也很多，在参照了别人的思路后我也实现了选项带按钮的下拉框。中间遇到不少坑，最后效果也不完美。 1.实现过程 我选的是 QListWidget +QListWidgetItem 的方式，因为感觉相对简单点，而且和样式表更好搭配。这种方式主要是把 QListWidget作为 QComboBox 的 View ，List 的 model 也设置为 QComboBox 的 model，这样展现出.
Qml控件：ComboBox
上官宏竹的专栏
05-26 6003
Qml控件：定制ComboBox
Qt Quick QML与C++交互详解
"这篇文档主要讨论的是如何在Qt Quick（QML）中与C++代码进行交互，这对于开发混合型的应用程序至关重要。Qt Quick提供了一种高效且直观的方式来设计用户界面，而C++则用于处理复杂的逻辑和底层功能。通过QML与C++的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值