集成QML和C ++

QML應用程序通常需要在C ++中處理更高級的性能密集型任務。如果C ++實現是從QObject派生的，最常見和最快的方法是將C ++類公開給QML運行時。假設您已安裝Qt 5.7或更高版本，以下分步說明將指導您完成在QML應用程序中使用C ++類BackEnd的過程：

1. 使用Qt Creator中的“ Qt Quick Application”模板創建一個新項目。注意：在“ 新建項目嚮導”的“ 定義項目詳細信息”部分中，取消選中“ 使用ui.qml文件”選項。
2. BackEnd向項目添加一個新的C ++類，並將其頭文件內容替換為：

<code> 
 
 
 


class
 
BackEnd
  : 
public
 
QObject
{
    
Q_OBJECT
    
Q_PROPERTY
(
QString userName READ userName WRITE setUserName NOTIFY userNameChanged
)

public
:
    
explicit
 
BackEnd
(
QObject *parent = nullptr
)
;
    
QString 
userName
(
) 
;
    
void
 
setUserName
(
const
 QString &userName
)
;
signals:
    
void
 
userNameChanged
(
)
;
private
:
    QString m_userName;
};

/<code>

該Q_PROPERTY宏聲明瞭可以從QML訪問的屬性。

3. 將其C ++文件內容替換為：

<code> 

BackEnd::BackEnd(QObject *parent) : QObject(parent)
{

}
QString BackEnd::userName()
{
    
return
 m_userName;
}
void
 BackEnd::setUserName(
const
 QString &userName)
{
    
if
 (userName == m_userName)
        
return
;

    m_userName = userName;
    
emit 
userNameChanged
()
;
}
/<code>

每當值改變時，該setUserName功能就發出userNameChanged信號m_userName。可以使用onUserNameChanged處理程序從QML處理信號。

4. 包含"backend.h"在main.cpp中， 在一個輸入URL下注冊為一個QML類，如下所示：

<code> 
 
 

int
 
main
(
int
 argc, 
char
 *argv[])

{
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    
QGuiApplication 
app
(argc, argv)
;

qmlRegisterType(
"io.qt.examples.backend"
, 
1
, 
0
, 
"BackEnd"
);

    QQmlApplicationEngine engine;
    
const
 QUrl 
url
(QStringLiteral(
"qrc:/main.qml"
))
;
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
        &app, [url](QObject *obj, 
const
 QUrl &objUrl) {
            
if
 (!obj && url == objUrl)
                QCoreApplication::
exit
( 
-1
);
        }, Qt::QueuedConnection);
    engine.load(url);

    
return
 app.exec();
}
/<code>

BackEnd類註冊為一種類型，可以通過導入URL“ io.qt.examples.backend 1.0” 從QML訪問。

5.將main.qml內容替換為以下代碼：

<code>
import
 
QtQuick
 2
.12
import
 
QtQuick
.Window
 2
.12
import
 
QtQuick
.Controls
 2
.12

import
 
io
.qt
.examples
.backend
 1
.0

Window
 {
    
visible 
: true
    width: 
640
    height: 
480
    title: 
qsTr
(
"Hello World"
)

    BackEnd {
        id: backend
    }
    
TextField
 {
        
text
: backend.userName
        placeholderText: 
qsTr
(
"User name"
)
        anchors.centerIn: parent

        onTextChanged: backend.userName = text
    }
}/<code>

該BackEnd實例使您可以訪問該userName屬性，該屬性在TextField的text屬性更改時進行更新。

現在可以運行該應用程序。