在Qt Gui中嵌入QML

Sidyhe發表於2016-06-19
QTGUI

測試環境: Qt 5.5.1 msvc2010

新建VS工程, Qt Gui專案(專案名字這裡是QtFirst)

UI介面

設計ui介面, 如圖


因為是雙向測試, 所以先來個按鈕, 把pushButton的clicked訊號連線到QtFirst的槽

專案程式碼

QtFirst.h
class QtFirst : public QMainWindow
{
	Q_OBJECT
public:
	QtFirst(QWidget *parent = 0);
	~QtFirst();
private:
	Ui::QtFirstClass ui;
protected slots:
	void slot1();// 響應pushButton的clicked訊號
	void onTest1(QString str);// 響應QML的test1訊號
signals:
	void test2(QVariant str);// 觸發QML的onTest2槽
};

QtFirst.cpp
QtFirst::QtFirst(QWidget *parent) : QMainWindow(parent)
{
	ui.setupUi(this);
	
	QQuickView *QuickView = new QQuickView(QUrl("qrc:/qml/main.qml"));
	QWidget *ViewContainer = QWidget::createWindowContainer(QuickView, this);
	ViewContainer->setGeometry(0, 0, 300, 200);

	QQuickItem* rootObject = QuickView->rootObject();
	connect(rootObject, SIGNAL(test1(QString)), this, SLOT(onTest1(QString)));
	connect(this, SIGNAL(test2(QVariant)), rootObject, SLOT(onTest2(QVariant)));
}

QtFirst::~QtFirst()
{

}

void QtFirst::onTest1(QString str)
{
	qDebug() << str;
}

void QtFirst::slot1()
{
	test2("abcdef");
}

main.qml
import QtQuick 2.5

Rectangle {
    id: frame
    x: 0
    y: 0
    width: 300
    height: 200
    color: "steelblue"

    signal test1(string str);
    function onTest2(str) {
        textInput1.text = str;
    }

    MouseArea {
        x: 0
        y: 90
        width: 80
        height: 20
        cursorShape: Qt.IBeamCursor

        TextInput {
            id: textInput1
            anchors.fill: parent
            text: qsTr("Text Input")
            Keys.onReturnPressed: {
                frame.test1(this.text);
            }
        }
    }
}

程式碼解釋

1. QML

QML中的訊號用signal宣告, 槽用function宣告
特別的, 槽函式的宣告沒有變數型別, 因為QML類似JS, 只有值有型別, 變數沒有型別

2. C++

使用QQuickView動態建立QML檢視, 之所以不用QQuickWidget控制元件, 是因為中文輸入有問題(有知道如何解決的朋友可以說一下)
通過rootObject方法取得最頂層物件, 即id為frame的那個Rectangle, 測試時發現通過findchild拿不到(即使設定了objectName)
使用connect連線訊號/槽

3. 其他

QML的訊號, 變數有型別
QML的槽, 變數沒有型別, C++的訊號在宣告時引數統一用QVariant型別

完結

本人也是剛接觸這一塊, 如果哪裡不對, 請及時指出

相關文章