QML的使用

QML的使用 一、qml基本语法

生成qml工程，主入口为：main.cpp

//main.cpp
#include 
#include 

int main(int argc char *argv[])
{
	QCoreApplication app(argc,argv);
	QQmlApplicationEngin engin;
	const QUrl url(QStringLiteral("qrc:/main.qml"));
	//const QUrl url(QStringLiteral("file///D:/project/learqml/main.qml"));
	QObject::connect(&engin, &QQmlApplicationEngin::objectCreated, &app, [url](QObject *obj, const QUrl &objUrl){
		if(!obj && url == objUrl)
			QCoreApplication::exit(-1);
	},Qt::QueuedConnection);

	return app.exec();
}

//main.qml
//每行可用;也可不用;   “on+信号”槽函数
//===类型值判断  ==只判断值
import QtQuick 2.12
import QtQuick.Controls 2.5

ApplicationWindow{
	id:window
	visible:true
	width:640
	height:480
	title:qsTr("Tabs")
	property int name: 1  //变量
	fuction aaa() {
		//consol.log("123");
		consol.log(name);
	}

	Button{
		id:button1
		x:200
		y:200
		text:qsTr("Test")
		icon.source: "qrc:/icon/up.png"
		//icon.source: "file:D:/pic/icon/up.png"
		onClicked:{
			console.log("1234");			
		}
		onDoubleClicked: aaa()
	}
}

二、qml中使用c++

有两种方式：

1、导出类　：将c++的类注册到元qml元对象系统中，在QML中创建该类的对象2、导出环境：在c++构造一个带有qml上下文属性的对象，在QML中直接使用该对象

1、 导出类
导出类必须是继承自QObject的，然后注册QML类型、引入所注册类型，作为一个数据类型使用

//c++文件中
#include 
qmlRegisterType("com.mycompany.qmlcomponents", 1, 0, "Slider");//第4个参数（qml中对应的类名）首字母必须大写，

//qml文件中
import com.mycompany.qmlcomponents 1.0
Slider {undefined	
}

2、导出环境

#include 
#include "qtquick2applicationviewer.h"
#include 
#include "colorMaker.h" 
int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv); 
    QtQuick2ApplicationViewer viewer;  
    //堆上分配了一个 ColorMaker 对象，然后注册为 QML 上下文的属性，起了个名字就叫 colorMaker   
    viewer.rootContext()->setContextProperty("colorMaker", new ColorMaker);    
    viewer.setMainQmlFile(QStringLiteral("qml/colorMaker/main.qml"));
    viewer.showExpanded();
 
    return app.exec();
}

在 main.qml 中不需要 import 语句，导出的属性可以直接使用，与属性关联的对象，它的信号、槽、可调用方法（使用 Q_INVOKABLE 宏修饰的方法）、属性都可以使用，只是不能通过类名来引用枚举值了。

三、c++中使用qml

QML 与 C++ 混合编程详解

//查找子对象的指针
QPushButton *button = parentWidget->findChild("button1");

新建一个 callQml ，添加 changeColor.h 、 changeColor.cpp 两个文件。

//main.qml 内容如下：
import QtQuick 2.0
import QtQuick.Controls 1.1 
Rectangle {
    objectName: "rootRect";
    width: 360;
    height: 360;
    Text {
        objectName: "textLabel";
        text: "Hello World";
        anchors.centerIn: parent;
        font.pixelSize: 26;
    } 
    Button {
        anchors.right: parent.right;
        anchors.rightMargin: 4;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 4;
        text: "quit";
        objectName: "quitButton";
    }
}

//main.cpp
#include 
#include "qtquick2applicationviewer.h"
#include 
#include "changeColor.h"
#include 
#include 
#include 
#include 
 
int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);
 
    QtQuick2ApplicationViewer viewer;
    viewer.setMainQmlFile(QStringLiteral("qml/callQml/main.qml"));
    viewer.showExpanded();
 
    QQuickItem * rootItem = viewer.rootObject(); //取得根对象
    new ChangeQmlColor(rootItem);
    QObject * quitButton = rootItem->findChild("quitButton");
    if(quitButton)
    {
        QObject::connect(quitButton, SIGNAL(clicked()), &app, SLOT(quit()));
    }
 
    QObject *textLabel = rootItem->findChild("textLabel");
    if(textLabel)
    {
        //1. failed call
        bool bRet = QmetaObject::invokeMethod(textLabel, "setText", Q_ARG(QString, "world hello"));
        qDebug() << "call setText return - " << bRet;
        textLabel->setProperty("color", QColor::fromRgb(255,0,0));
        bRet = QmetaObject::invokeMethod(textLabel, "doLayout");
        qDebug() << "call doLayout return - " << bRet;
    }
 
    return app.exec();
}

四、GUI程序中嵌入qml

在Qt Gui程序中嵌入qml界面
在Qt Gui中嵌入QML（old）
QML嵌入到QWidget中方法（两种）

1.qml 文件import QtQuick 2.0
  	QQuickView *view = new QQuickView;
   	view->setSource(QUrl::fromLocalFile("myqmlfile.qml"));
   	view->show();
2.qml 文件import QtQuick 1.0
	QDeclarativeView *view = new QDeclarativeView;
 	view->setSource(QUrl::fromLocalFile("myqmlfile.qml"));
 	view->show();

可以用qquickwidget载入qml文件，集成到现有的widget项目中，我下面这两个app就是qml写的camera，其他都是widget。交互还是很方便的。

	QQmlEngine *engine = ui->quickWidget->engine();
    QQmlContext *context = engine->rootContext();
    context->setContextProperty("appPath", QUIHelper::appPath());
    context->setContextProperty("appName", QUIHelper::appName());
    QObject *obj = (QObject *)ui->quickWidget->rootObject();
    QmetaObject::invokeMethod(obj, "setOrientation", Q_ARG(QVariant, -90));
    connect(obj, SIGNAL(receiveImage()), this, SLOT(receiveImage()));
    connect(this, SIGNAL(snap()), obj, SLOT(snap()));
    connect(this, SIGNAL(select()), obj, SLOT(select()));