散装码农,QML总结笔记

loader.item = Qt.createQmlObject('import QtQuick 2.15; Rectangle { width: 200; height: 200; color: "lightblue"; Button { text: "Close"; anchors.centerIn: parent; onClicked: loader.item = null } }', loader, "dynamicSnippet");

}

Loader {

id: loader

anchors.centerIn: parent

}

在这个例子中，当点击Open Popup按钮时，通过Qt.createQmlObject函数动态创建一个矩形（作为弹出内容的示例）并加载到Loader元素中。popup.qml文件中的按钮点击事件可以通过将loader.item设置为null来关闭这个 “弹出” 内容。这种方式没有真正的返回值获取，但可以通过共享变量等方式在两个 QML 之间传递数据。

2.使用Dialog组件实现模态弹出并获取返回值（更接近传统弹出窗口）

创建main.qml和popup.qml。在popup.qml中定义一个对话框，并且通过属性来传递返回值相关的信息。

popup.qml代码如下：

qml

import QtQuick 2.15

import QtQuick.Controls 2.15

Dialog {

id: dialog

width: 200

height: 200

title: "Popup Dialog"

StandardButton.Close.onClicked: {

dialog.accepted = false

dialog.close()

}

StandardButton.Ok.onClicked: {

dialog.accepted = true

dialog.close()

}

在main.qml中调用这个对话框并获取返回值：

qml

import QtQuick 2.15

import QtQuick.Window 2.15

import QtQuick.Controls 2.15

Window {

width: 640

height: 480

visible: true

title: "Main Window"

Button {

text: "Open Popup"

anchors.centerIn: parent

onClicked: {

var dialog = Qt.createQmlObject('import "popup.qml" as Popup; Popup.Dialog { }', null, "dynamicDialog");

dialog.open();

dialog.accepted.connect(function (value) {

console.log("Dialog was " + (value? "accepted" : "rejected"));

});

}

在这个例子中，当点击Open Popup按钮时，通过Qt.createQmlObject动态创建popup.qml中的Dialog组件。然后打开对话框，通过dialog.accepted.connect连接到一个函数，当对话框关闭（通过点击Ok或Close按钮）时，会根据dialog.accepted的值在控制台打印出对话框是被接受还是被拒绝，这里dialog.accepted的值就相当于返回值。

在QML中如何传递参数给弹出的页面？

1.使用属性绑定传递参数

原理：在 QML 中，可以通过属性绑定的方式将一个 QML 元素的属性值传递给另一个元素。当源属性发生变化时，目标属性也会相应地更新。

示例：

假设有一个主页面main.qml和一个弹出页面popup.qml。在main.qml中定义一个变量，并将其传递给popup.qml。

main.qml代码如下：

qml

import QtQuick 2.15

import QtQuick.Window 2.15

Window {

width: 640

height: 480

visible: true

title: "Main Window"

// 定义一个要传递的参数

property int parameterToPass: 42

Button {

text: "Open Popup"

anchors.centerIn: parent

onClicked: {

var popup = Qt.createQmlObject('import "popup.qml"; Popup { receivedParameter: parameterToPass }', null, "dynamicPopup");

popup.open();

}

popup.qml代码如下：

qml

import QtQuick 2.15

import QtQuick.Controls 2.15

Dialog {

id: dialog

width: 200

height: 200

title: "Popup Dialog"

// 接收传递过来的参数

property int receivedParameter

Text {

text: "Received parameter: " + receivedParameter

anchors.centerIn: parent

}

StandardButton.Close.onClicked: {

dialog.close()

}

在这个例子中，当点击main.qml中的Open Popup按钮时，通过Qt.createQmlObject创建popup.qml中的Dialog（这里将popup.qml中的Dialog组件命名为Popup），并将main.qml中的parameterToPass属性值绑定到popup.qml中的receivedParameter属性。这样，在popup.qml中的Text元素就可以显示接收到的参数值。

2.通过信号和槽传递参数（更灵活的方式）

原理：信号和槽机制是 Qt（包括 QML）中用于对象间通信的重要方式。一个对象（信号发送者）可以发出信号，其他对象（槽接收者）可以连接到这个信号并执行相应的操作。信号可以携带参数，从而实现参数传递。

示例：

同样有main.qml和popup.qml。在main.qml中定义一个信号并发送包含参数的信号，在popup.qml中连接这个信号来接收参数。

main.qml代码如下：

qml

import QtQuick 2.15

import QtQuick.Window 2.15

Window {

width: 640

height: 480

visible: true

title: "Main Window"

// 定义一个信号用于传递参数

signal sendParameter(int parameterValue)

Button {

text: "Open Popup"

anchors.centerIn: parent

onClicked: {

var popup = Qt.createQmlObject('import "popup.qml"; Popup { }', null, "dynamicPopup");

popup.open();

sendParameter(42);

}

popup.qml代码如下：

qml

import QtQuick 2.15

import QtQuick.Controls 2.15

Dialog {

id: dialog

width: 200

height: 200

title: "Popup Dialog"

function receiveParameter(param) {

console.log("Received parameter: " + param);

}

Component.onCompleted: {

var mainWindow = parent;

mainWindow.sendParameter.connect(receiveParameter);

}

StandardButton.Close.onClicked: {

dialog.close()

}

在这个例子中，main.qml中的sendParameter信号在点击按钮时发送，携带参数值42。在popup.qml中，通过Component.onCompleted生命周期钩子函数连接main.qml中的sendParameter信号到receiveParameter函数，从而在弹出页面中接收并处理传递过来的参数。

QtQuick自定义主题以及控件样式指引

系统自带的几种主题风格

Default Style

Fusion Style

Imagine Style

Material Style

Universal Style

其中Imagine Style是使用图片定制风格，图片需要按照指定的命名来放置，具体操作请看文档：

http://doc.qt.io/qt-5/qtquickcontrols2-imagine.html

在c++中使用QQuickStyle

QQuickStyle::setStyle("Material");

具体内容请在帮助索引中搜索 QQuickStyle

QQmlApplicationEngine与QQuickView QQuickWidget区别

QQmlApplicationEngine

QGuiApplication::setApplicationName("Gallery");

QGuiApplication::setOrganizationName("QtProject");

QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

QGuiApplication app(argc, argv);

QQmlApplicationEngine engine;

engine.rootContext()->setContextProperty("availableStyles", QQuickStyle::availableStyles());

engine.load(QUrl("qrc:/gallery.qml"));

return app.exec();

gallery.qml

import QtQuick 2.12

import QtQuick.Layouts 1.12

import QtQuick.Controls 2.12

import QtQuick.Controls.Material 2.12

import QtQuick.Controls.Universal 2.12

import Qt.labs.settings 1.0

ApplicationWindow {

id: window

width: 360

height: 520

visible: true

QQuickView

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

{

QGuiApplication app(argc, argv);

QQuickView viewer;

viewer.setResizeMode(QQuickView::SizeRootObjectToView);

viewer.setSource(QUrl("qrc:///main.qml"));

viewer.show();

return app.exec();

}

main.qml

import QtQuick 2.4

import QtQuick.Controls 1.3

import QtQuick.Window 2.2

import QtQuick.Dialogs 1.2

Rectangle{

width: 320;

height: 240;

}

QQuickWidget

QQuickWidget的使用（在qml中和QQuickView差不多，在qtwidget中就不一样了）

QQuickWidget *widget= new QQuickWidget;

widget->setSource(QUrl::fromLocalFile("myqmlfile.qml"));

widget->show();

QQmlApplicationEngine搭配window

QQuickView搭配Item

QQuickView显示QML文档，对窗口的控制权(比如设置窗口标题，Icon 窗口大小等在C++代码控制，而使用QQmlApplicationEngine加载Window为根的QML文档,QML文档则拥有窗口的完整控制权,ApplicationWindow派生自Window

anchors定位等设置

anchors group

anchors.top : AnchorLine

anchors.bottom : AnchorLine

anchors.left : AnchorLine

anchors.right : AnchorLine

anchors.horizontalCenter : AnchorLine

anchors.verticalCenter : AnchorLine

anchors.baseline : AnchorLine

anchors.fill : Item

anchors.centerIn : Item

anchors.margins : real

anchors.topMargin : real

anchors.bottomMargin : real

anchors.leftMargin : real

anchors.rightMargin : real

anchors.horizontalCenterOffset : real

anchors.verticalCenterOffset : real

anchors.baselineOffset : real

anchors.alignWhenCentered : bool

如:

Item {

Image {

id: pic

// ...

}

Text {

id: label

anchors.horizontalCenter: pic.horizontalCenter

anchors.top: pic.bottom

anchors.topMargin: 5

// ...

}

Qt_QML布局元素学习

Column（列）元素将它的子对象通过顶部对齐的列方式进行排列。spacing属性用来设置每个元素之间的间隔大小。

Row（行）元素将它的子对象从左到右，或者从右到左依次排列，排列方式取决于layoutDirection属性。spacing属性用来设置每个元素之间的间隔大小。

Grid（栅格）元素通过设置rows（行数）和columns（列数）将子对象排列在一个栅格中。可以只限制行数或者列数。如果没有设置它们中的任意一个，栅格元素会自动计算子项目总数来获得配置，例如，设置rows（行数）为3，添加了6个子项目到元素中，那么会自动计算columns（列数）为2。属性flow（流）与layoutDirection（布局方向）用来控制子元素的加入顺序。spacing属性用来控制所有元素之间的间隔。

Flow（流）。通过flow（流）属性和layoutDirection（布局方向）属性来控制流的方向。它能够从头到底的横向布局，也可以从左到右或者从右到左进行布局。作为加入流中的子对象，它们在需要时可以被包装成新的行或者列。为了让一个流可以工作，必须指定一个宽度或者高度，可以通过属性直接设定，或者通过anchor（锚定）布局设置。

Item所有可视元素的基类

大部分通用属性

x y width height 锚点（anchors）按键处理

z :显示层数

opacity:透明度

clip裁减 true 子不可以超过父元素

state visible states children transitions 等很多属性

So you can write:

Item {

Text {}

Rectangle {}

Timer {}

}

instead of:

Item {

children: [

Text {},

Rectangle {}

]

resources: [

Timer {}

]

}

响应按键

Keys.enabled:true;

Keys.onEscapePressed:Qt.quit();

Keys.onBackPressed:Qt.quit();

Keys.onPressed:{

switch(event.key)

{

case Qt.Key_0:

...

case Qt.Key_9:

event.accepted=true;

keyvalue.text=event.key-Qt.Key_0;

break;

}

显示底部Tab

import QtQuick 2.12

import QtQuick.Layouts 1.12

import QtQuick.Controls 2.12

import QtQuick.Controls.Material 2.12

import QtQuick.Controls.Universal 2.12

import Qt.labs.settings 1.0

ApplicationWindow {

visible: true

width: 360

height: 520

title: qsTr("Hello World")

footer: TabBar {

id: bar

height: 48

width: parent.width

currentIndex: 2

TabButton {

text: qsTr("Home");

icon: icon.source="qrc:/man.png";

display: AbstractButton.TextUnderIcon;

onClicked: {

console.log("Home");

}

TabButton {

text: qsTr("Discover");

icon: icon.source="qrc:/man.png";

display: AbstractButton.TextUnderIcon;

}

TabButton {

text: qsTr("Activity");

icon: icon.source="qrc:/man.png";

display: AbstractButton.TextUnderIcon;

}

TabButton {

text: qsTr("个人中心");

icon: icon.source="qrc:/man.png";

display: AbstractButton.TextUnderIcon;

}

QML导入js文件

大致步骤如下：

（1）新建QML应用程序，项目名称为QMLloadjs。

（2）右击项目视图”资源“-》”qml.qrc"下的“/”节点，选择“添加新文件...”项，选择“Qt”下的“JSFile”模板。

（3）创建js文件

js文件代码示例如下

function getRandomNumber() {

return Math.random()*360;

}

（4）右击项目视图”资源“-》”qml.qrc"下的“/”节点，选择“添加新文件...”项，新建RotateRect.qml文件，示例代码如下

import QtQuick 2.0

import "demojs.js" as Logic //导入js文件

Rectangle{

id:rect

width: 60

height: 60

gradient: Gradient{

GradientStop{position: 0.0;color:"yellow"}

GradientStop{position: 0.33;color: "blue"}

GradientStop{position: 1.0;color:"aqua"}

}

function getRandomNumber(){

return Math.random()*360;

}

Behavior on rotation {

RotationAnimation{

direction: RotationAnimation.Clockwise

}

MouseArea{

anchors.fill: parent

onClicked: rect.rotation=Logic.getRandomNumber();//调用js函数

}

（5）MainForm.ui.qml示例代码如下

import QtQuick 2.6

Rectangle {

property alias mouseArea: mouseArea

property alias textEdit: textEdit

width: 360

height: 360

MouseArea {

id: mouseArea

anchors.fill: parent

}

TextEdit {

id: textEdit

visible: false

}

RotateRect{

x:50

y:50

}

Connections创建一个对象信号接收

然而，以下几种情况则无法通过"on<Signal>"来实现：

1.针对某个信号需要多个处理时，也就是有多个槽关联到同一个信号上。

2.在信号的发送者的范围外（这里可以理解为发送者的类定义之外）创建连接。

3.连接的目标不在QML中。

这时就该Connections登场咯

先举个例子，上面的代码用Connections就可以像下面这样写：

MouseArea {

Connections {

onClicked: foo(...)

}

而一般来说，我们都会这么写：

MouseArea {

id: area

}

...

Connections {

target: area

onClicked: foo(...)

}

组件加载完毕事件

Component.onCompleted:{

console.log("load over");

}

Component自定义组件

在文件中定义组件

import QtQuick 2.0

import QtQuick.Window 2.0

import QtQuick.Controls 1.4

Rectangle {

id: compontRect

color: Qt.rgba(0.8, 0.4, 0.4, 1.0)

implicitWidth: 200

implicitHeight: 50

property var currentObject: ''

signal deleteThis(var obj)

// 设置文字的内容

function setCurrentText(textName) {

interText.text = textName

}

Text {

id: interText

anchors.left: parent.left

anchors.leftMargin: 10

anchors.verticalCenter: parent.verticalCenter

text: qsTr("text")

}

Button {

anchors.margins: 5

anchors.top: parent.top

anchors.bottom: parent.bottom

anchors.right: parent.right

text: '删除'

onClicked: {

compontRect.deleteThis(compontRect)

}

Component.onCompleted: {

compontRect.currentObject = parent

}

使用Loader加载/删除组件

import QtQuick 2.0

import QtQuick.Window 2.0

import QtQuick.Controls 1.4

Window {

width: 800

height: 600

visible: true

Rectangle {

id: mainRect

anchors.fill: parent

Loader {

id: loader1

sourceComponent: itemCompont

anchors.top: parent.top

anchors.topMargin: 10

width: mainRect.width

height: 50

function onDisDeleteThis() {

loader1.sourceComponent = undefined

}

onLoaded: {

item.color = 'red'

loader1.item.deleteThis.connect(loader1.onDisDeleteThis) //红色部分即时对象

}

Loader {

id: loader2

source: 'qrc:/QML/TestCompont.qml'

anchors.top: loader1.bottom

anchors.topMargin: 10

width: mainRect.width

height: 50

function onDisDeleteThis() {

loader2.source = ''

}

onLoaded: {

loader2.item.deleteThis.connect(loader2.onDisDeleteThis) ////红色部分即时对象

}

Component {

id: itemCompont

Rectangle {

id: compontRect

color: 'blue'

implicitWidth: 200

implicitHeight: 50

signal deleteThis()

Text {

id: interText

anchors.left: parent.left

anchors.leftMargin: 10

anchors.verticalCenter: parent.verticalCenter

text: qsTr("text")

}

Button {

anchors.margins: 5

anchors.top: parent.top

anchors.bottom: parent.bottom

anchors.right: parent.right

text: '删除'

onClicked: {

compontRect.deleteThis()

}

使用JavaScript中的语句加载/删除组件

QML支持使用JavaScript动态创建/销毁对象,有两种方式动态创建对象：

使用Qt.createComponent()动态创建一个组件对象，然后使用Component的createObject()方法创建对象。

使用Qt.createQmlObject()从一个QML字符串直接创建一个对象。

如果QML文件中嵌入Component，可以直接使用这个组件的createObject()方法创建组件;使用Component的destroy()方法删除已经创建的组件。destroy()方法可以指定一个延时，不过不指定，他会在适当的时候删除。

下面是一个简单的示例：

import QtQuick 2.0

import QtQuick.Window 2.0

import QtQuick.Controls 1.4

Window {

width: 800

height: 600

visible: true

Rectangle {

id: mainRect

anchors.fill: parent

property var mainRectComponent: null

Column {

id: mainColumn

spacing: 5

width: parent.width

property var count: 0

function deleteItems(object) {

object.destroy()

}

function createItem() {

var color = 'red'

if (mainColumn.count % 3 === 1)

color = 'yellow'

else if (mainColumn.count % 3 === 2)

color = 'blue'

mainColumn.count++

// 创建一个组件

var obj = itemCompont.createObject(mainColumn, {"color": color, "width": mainRect.width})

//obj.setCurentObject(obj)

obj.setCurrentText('Component' + mainColumn.count.toString())

obj.deleteThis.connect(mainColumn.deleteItems)

// 创建文件中的组件

var obj2 = mainRect.mainRectComponent.createObject(mainColumn,

{'color': Qt.rgba(0.4, 0.8, 0.6, 1.0)

,'width': mainRect.width})

obj2.setCurrentText('Component' + mainColumn.count.toString() + ', From File TestComponent')

obj2.deleteThis.connect(mainColumn.deleteItems)

}

Button {

anchors.top: mainColumn.bottom

anchors.topMargin: 10

anchors.right: mainRect.right

anchors.rightMargin: 10

text: '添加'

onClicked: {

mainColumn.createItem()

}

Component.onCompleted: {

if (mainRectComponent == null)

mainRectComponent = mainRectComponent = Qt.createComponent('qrc:/QML/TestCompont.qml')

}

Component {

id: itemCompont

Rectangle {

id: compontRect

color: 'blue'

implicitWidth: 200

implicitHeight: 50

property var currentObject: ''

signal deleteThis(var obj)

// 设置文字的内容

function setCurrentText(textName) {

interText.text = textName

}

Text {

id: interText

anchors.left: parent.left

anchors.leftMargin: 10

anchors.verticalCenter: parent.verticalCenter

text: qsTr("text")

}

Button {

anchors.margins: 5

anchors.top: parent.top

anchors.bottom: parent.bottom

anchors.right: parent.right

text: '删除'

onClicked: {

compontRect.deleteThis(compontRect)

}

Component.onCompleted: {

compontRect.currentObject = parent

}

MouseArea组件

MouseArea {

anchors.fill: parent

acceptedButtons: Qt.LeftButton | Qt.RightButton

onClicked: {

if (mouse.button == Qt.RightButton)

parent.color = 'blue';

else

parent.color = 'red';

}

MouseArea { acceptedButtons: Qt.LeftButton | Qt.RightButton }

MouseArea { acceptedButtons: Qt.AllButtons }

cursorShape : Qt::CursorShape

Qt.ArrowCursor

Qt.UpArrowCursor

Qt.CrossCursor

Qt.WaitCursor

Qt.IBeamCursor

Qt.SizeVerCursor

Qt.SizeHorCursor

Qt.SizeBDiagCursor

Qt.SizeFDiagCursor

Qt.SizeAllCursor

Qt.BlankCursor

Qt.SplitVCursor

Qt.SplitHCursor

Qt.PointingHandCursor

Qt.ForbiddenCursor

Qt.WhatsThisCursor

Qt.BusyCursor

Qt.OpenHandCursor

Qt.ClosedHandCursor

Qt.DragCopyCursor

Qt.DragMoveCursor

Qt.DragLinkCursor

drag.target : Item

drag.active : bool

drag.axis : enumeration

drag.minimumX : real

drag.maximumX : real

drag.minimumY : real

drag.maximumY : real

drag.filterChildren : bool

drag.threshold : real

drag指定对象之后，如果对象使用了anchor，会导致drag无效

下面创建一个可拖拽的rectangle，希望实现鼠标拖动黄色的矩形在绿色矩形中平移

Rectangle {

id:background

width:600

height:600

color: "green"

Rectangle {

id:dragElement

color: "yellow"

width:300

height: 200

anchors.centerIn: parent

MouseArea {

anchors.fill: parent

drag.target: parent

onPressed:dragElement.anchors.centerIn = undefined //按下时候使anchor无效

}

PinchArea 触摸事件

pinch.target : Item

pinch.active : bool

pinch.minimumScale : real

pinch.maximumScale : real

pinch.minimumRotation : real

pinch.maximumRotation : real

pinch.dragAxis : enumeration

pinch.minimumX : real

pinch.maximumX : real

pinch.minimumY : real

pinch.maximumY : real

信号

PinchArea 有三个信号：onPinchStarted() 、 onPinchUpdated() 、 onPinchFinished() 。它们都有一个名为 pinch 的参数，类型是 PinchEvent 。为了有效响应这些信号，必须了解 PinchEvent 类型，我们先介绍它。

PinchEvent 具有下列属性：

accepted ，在 onPinchStarted() 信号处理器中设置为 true 表明你要响应 PinchEvent ，Qt 会持续发给你更新事件；设置为 false ，Qt 就不会再发 PinchEvent 事件给你了。

angle ，表示最近两个触点之间的角度， previousAngle 是上一次事件的角度， rotation 是从捏拉手势开始到当前事件的总的旋转角度。

scale ，表示最近两个触点之间的缩放系数， previousScale 是上一次事件的缩放系数。

center ，两个触点的中心点， previousCenter 是上一次事件的中心点， startCenter 是事件开始时的中心点。

point1 ， point2 保存当前触点的位置， startPoint1 ， startPoint2 保存第二个触点按下时两个触点的位置。

pointCount 保存到现在为止的触点总数。

oPinchStarted() 信号在第一次识别到捏拉手势时发出，如果你要处理它，那就要将其设置为 true 。然后就可以通过 pinch 参数来设置要变换的 Item 了。

当你在 onPinchStarted() 的信号处理器中接受了 TouchEvent 事件，那么 Qt 就会不断的发送新事件给你， onPinchUpdated() 信号就会不断的发射，你可以在它的信号处理器中通过 pinch 参数，撷取你需要的值来更新你的 Item 。

onPinchFinished() 信号在用户手指离开屏幕时触发。

怎样使用

介绍了 PinchArea 和 PinchEvent，是时候看看怎么使用它们了。

想使用 PinchArea 来变换一个 Item，有两个办法：

设定 target 属性，将其指向要变换的 Item ，然后 PinchArea 就会在合适的时候帮你变换它。

处理 onPinchStarted() / onPinchUpdated() / onPinchFinished() 信号，在信号处理器中变换目标 Item 。这种方式更灵活，你甚至可以同时处理多个 Item 。

选定一种方式后，你可能还要配置 PinchArea.pinch 属性，给不同的参数设置合理的值，比方说最大可以放大到多少倍。

缩放与旋转实例

pinch.target方式

import QtQuick 2.0

Rectangle {

width: 360;

height: 360;

focus: true;

Rectangle {

width: 100;

height: 100;

color: "blue";

id: transformRect;

anchors.centerIn: parent;

}

PinchArea {

anchors.fill: parent

pinch.maximumScale: 20;

pinch.minimumScale: 0.2;

pinch.minimumRotation: 0;

pinch.maximumRotation: 90;

pinch.target: transformRect;

}

代码很简单，初始化了最小、最大缩放系数，最小、最大旋转角度，然后将 pinch.target 指向 id 为 transformRect 的蓝色矩形。于是，一切都正常运转，两指捏拉之间，缩放与旋转效果就出来了。

使用 pinch.target 这种方式，你什么都不用关心，甚至不需要弄明白 pinch 属性到底是什么含义，就可以得到一个不错的变换效果， Qt Quick 默认帮你处理所有的事情。

下面看看使用信号的方式。

使用信号

使用 onPinchStarted() / onPinchUpdated() / onPinchFinished() 要稍微麻烦一些，你必须要了解 PinchEvent 每个参数的含义，自己设计变换策略。不过好处是，七十二般变化都由你控制

import QtQuick 2.0

Rectangle {

width: 360;

height: 360;

focus: true;

Rectangle {

width: 100;

height: 100;

color: "blue";

id: transformRect;

anchors.centerIn: parent;

}

PinchArea {

anchors.fill: parent

pinch.maximumScale: 20;

pinch.minimumScale: 0.2;

pinch.minimumRotation: 0;

pinch.maximumRotation: 90;

onPinchStarted: {

pinch.accepted = true;

}

onPinchUpdated: {

transformRect.scale *= pinch.scale;

transformRect.rotation += pinch.rotation;

}

onPinchFinished: {

transformRect.scale *= pinch.scale;

transformRect.rotation += pinch.rotation;

}

代码大部分都和 pinch.target 方式一样，只是去掉了 "pinch.target: transformRect" 语句，改用信号处理器。代码很直接，不再解释了。

MultiPointTouchArea 多点触控

import QtQuick 2.0

Rectangle {

width: 400; height: 400

MultiPointTouchArea {

anchors.fill: parent

touchPoints: [

TouchPoint { id: point1 },

TouchPoint { id: point2 }

]

}

Rectangle {

width: 30; height: 30

color: "green"

x: point1.x

y: point1.y

}

Rectangle {

width: 30; height: 30

color: "yellow"

x: point2.x

y: point2.y

}

布局组件 Row Colomun Grid Flow GridLayout RowLayout ColumnLayout

LayOut和原始的区别，LayOut会自动调节Item的大小来适应界面大小的变化

ComboBox

ComboBox {

width: 200

model: [ "Banana", "Apple", "Coconut" ]

}

ComboBox {

currentIndex: 2

model: ListModel {

id: cbItems

ListElement { text: "Banana"; color: "Yellow" }

ListElement { text: "Apple"; color: "Green" }

ListElement { text: "Coconut"; color: "Brown" }

}

width: 200

onCurrentIndexChanged: console.debug(cbItems.get(currentIndex).text + ", " + cbItems.get(currentIndex).color)

}

TabView

Properties

contentItem : Item

count : int

currentIndex : int

frameVisible : bool

tabPosition : int

tabsVisible : bool

Methods

Tab addTab(string title, Component component)

Tab getTab(int index)

Tab insertTab(int index, string title, Component component)

void moveTab(int from, int to)

void removeTab(int index)

TabView {

Tab {

title: "Red"

Rectangle { color: "red" }

}

Tab {

title: "Blue"

Rectangle { color: "blue" }

}

Tab {

title: "Green"

Rectangle { color: "green" }

}

ListView使用

修改数据可以

listview.model.setProperty(5,"name","xunen");

代替数据可以用

listview.model.set(0,{"name":"bbb","old":42});

添加数据

listview.model.append({"name":"bbb","old":42});

import QtQuick 2.9

import QtQuick.Window 2.2

import QtQuick 2.2

import QtQuick.Controls 1.1

import QtQuick.Layouts 1.1

//ListView 显示一个条目列表

//model 条目对应的数据

//Delegate 条目的外观

Window {

visible: true

width: 640

height: 480

title: qsTr("Hello World")

//数据显示

Component{

id:phoneModel

ListModel{

//id:phoneModel

ListElement{

name:"iphone 3GS"

cost:"1000"

manufacturer:"Apple"

}

ListElement{

name:"iphone 4"

cost:"1800"

manufacturer:"Apple"

}

ListElement{

name:"iphone 4S"

cost:"2300"

manufacturer:"Apple"

}

ListElement{

name:"iphone 5"

cost:"4900"

manufacturer:"Apple"

}

ListElement{

name:"B199"

cost:"1590"

manufacturer:"HuaWei"

}

ListElement{

name:"MI 2S"

cost:"1999"

manufacturer:"Xiao Mi"

}

ListElement{

name:"GALAXY S5"

cost:"4699"

manufacturer:"Samsung"

}

//表显示

Component{

id:phoneDelegate

Item{

id:wrapper

width: parent.width

height: 30

MouseArea{

anchors.fill: parent

onClicked: {

wrapper.ListView.view.currentIndex = index

console.log("index = "+index)

}

RowLayout{

anchors.left: parent.left

anchors.verticalCenter: parent.verticalCenter

spacing: 8

Text {

id:coll

text: name

color: wrapper.ListView.isCurrentItem?"red":"black"

font.pixelSize: wrapper.ListView.isCurrentItem?22:18

Layout.preferredWidth: 80

}

Text {

text: cost

color: wrapper.ListView.isCurrentItem?"red":"black"

font.pixelSize: wrapper.ListView.isCurrentItem?22:18

Layout.preferredWidth: 80

}

Text {

text: manufacturer

color: wrapper.ListView.isCurrentItem?"red":"black"

font.pixelSize: wrapper.ListView.isCurrentItem?22:18

Layout.fillWidth: true

}

//表头

Component{

id:headerview

Item{

width: parent.width

height: 30

RowLayout{

anchors.left: parent.left

anchors.verticalCenter: parent.verticalCenter

spacing: 8

Text{

text:"Name"

font.bold: true

font.pixelSize: 20

Layout.preferredWidth: 120

}

Text{

text: "cost"

font.bold: true

font.pixelSize: 20

Layout.preferredWidth: 80

}

Text{

text:"manufacture"

font.bold: true

font.pixelSize: 20

Layout.fillWidth: true

}

//list显示数据

ListView{

id:listView

anchors.fill: parent

delegate: phoneDelegate

model:phoneModel.createObject(listView)

header: headerview

focus: true

highlight: Rectangle{

color: "lightblue"

}

QML中ListView的几种数据模型

方式一：ListModel:

ListModel是一个简单的ListElement容器，每个容器都包含数据角色。其中内容可以动态定义，也可以在QML中显式定义。

ListModel {

id: m_model

ListElement {

number: "555 3264"

color1: "red"

}

ListElement {

number: "555 8426"

color1: "green"

}

ListElement {

number: "555 0473"

color1: "blue"

}

ListView {

width: 100

height: 100

model: m_model

delegate: Text{

color: color1

text: name+":"+number

}

方式二：ObjectModel

当ObjectModel被用于视图的时候，视图不再需要委托，因为对象模型已经包含了可视化的委托(项)

ObjectModel {

id: itemModel

Rectangle {

height: 20; width: 80;

Text {

color: "red"

text: "Bill Smith" + ":" + "555 3264"

}

Rectangle {

height: 20; width: 80;

Text{

color: "green"

text: "John Brown" + ":" + "555 8426"

}

Rectangle {

height: 20; width: 80;

Text {

color: "blue"

text: "Sam Wise"+":" + "555 0473"

}

选择该数据模型：

ListView{

width: 100

height: 100

model: itemModel

}

方式三：C++中的QStringList作为数据模型

在main.cpp中

QStringList a;

a << "Bill Smith" << "John Brown" << "Sam Wise"; //QStringList model

QQmlApplicationEngine engine;

engine.rootContext()->setContextProperty("name1", QVariant::fromValue(a));

在qml文件中：

ListView{

width: 100

height: 100

model: name1

delegate: Text{

text: modelData

}

方式四：C++中QList作为数据源

在main.cpp中：

自定义头文件：dataobject.h

#ifndef DATAOBJECT_H

#define DATAOBJECT_H

#include <QObject>

class DataObject : public QObject

{

Q_OBJECT

Q_PROPERTY(QString name READ name WRITE setName NOTIFY nameChanged)

Q_PROPERTY(QString color READ color WRITE setColor NOTIFY colorChanged)

Q_PROPERTY(QString number READ number WRITE setNumber NOTIFY numberChanged)

public:

DataObject(QObject *parent = nullptr);

DataObject(const QString &name,const QString &color,const QString &number,QObject *parent=nullptr);

QString name()const;

void setName(const QString &name);

QString color()const;

void setColor(const QString &color);

QString number()const;

void setNumber(const QString &number);

signals:

void nameChanged();

void colorChanged();

void numberChanged();

private:

QString m_name;

QString m_color;

QString m_number;

};

#endif // DATAOBJECT_H

源文件：

#include "dataobject.h"

DataObject::DataObject(QObject *parent) : QObject(parent)

{

}

DataObject::DataObject(const QString &name, const QString &color, const QString &number, QObject *parent)

:QObject(parent),m_name(name),m_color(color),m_number(number)

{

}

QString DataObject::name() const

{

return m_name;

}

void DataObject::setName(const QString &name)

{

if(name!=m_name)

m_name=name;

emit nameChanged();

}

QString DataObject::color() const

{

return m_color;

}

void DataObject::setColor(const QString &color)

{

if(color!=m_color)

m_color=color;

emit colorChanged();

}

QString DataObject::number() const

{

return m_number;

}

void DataObject::setNumber(const QString &number)

{

if(number!=m_number)

m_number=number;

emit numberChanged();

}

在main.cpp中

QList<QObject*> dataList; //QObject model

dataList << new DataObject("Bill Smith","red","555 3264") << new DataObject("John Brown","green","555 8426")

<< new DataObject("Sam Wise","blue","555 0473");

QQmlApplicationEngine engine; //之前有定义的，这里就不用重复定义了

engine.rootContext()->setContextProperty("myObjectModel", QVariant::fromValue(dataList));

qml文件中：

ListView{

width: 100

height: 100

model: myObjectModel

delegate: Text{

color: model.modelData.color

text: name+":"+number}

}

方式五：自定义类AbstractListModel

自定义头文件abstractlistmodel.h

#ifndef ABSTRACTLISTMODEL_H

#define ABSTRACTLISTMODEL_H

#include <QAbstractListModel>

#include<QStringList>

class AbstractList //抽象数据列表类

{

public:

AbstractList(const QString &name,const QString &color,const QString &number);

QString name() const;

QString color() const;

QString number() const;

private:

QString m_name;

QString m_color;

QString m_number;

};

class AbstractListModel : public QAbstractListModel

{

Q_OBJECT

public:

enum AbstractListRoles{

NameRole=Qt::UserRole+1,

ColorRole,

NumberRole

}; //定义抽象类成员角色

AbstractListModel(QObject *parent=nullptr);

void addList(const AbstractList &list);

int rowCount(const QModelIndex &parent=QModelIndex()) const; //返回给定父项行数

QVariant data(const QModelIndex &index, int role=Qt::DisplayRole) const;//返回索引所在项给定角色的存储数据

protected:

QHash<int,QByteArray> roleNames() const; //返回模型的角色名

private:

QList<AbstractList> m_abstractList; //抽象列表类容器

};

#endif // ABSTRACTLISTMODEL_H

源文件：

#include "abstractlistmodel.h"

AbstractListModel::AbstractListModel(QObject *parent)

:QAbstractListModel(parent)

{

}

void AbstractListModel::addList(const AbstractList &list)

{

beginInsertRows(QModelIndex(),rowCount(),rowCount());

m_abstractList.append(list);

// m_abstractList<<list;

endInsertRows();

}

int AbstractListModel::rowCount(const QModelIndex &parent) const

{

Q_UNUSED(parent);

return m_abstractList.count();

}

QVariant AbstractListModel::data(const QModelIndex &index, int role) const

{

if(index.row()<0||index.row()>=m_abstractList.count())

return QVariant();

const AbstractList &abstractList=m_abstractList[index.row()];

if(role==AbstractListRoles::NameRole)

return abstractList.name();

else if(role==AbstractListRoles::ColorRole)

return abstractList.color();

else if(role==AbstractListRoles::NumberRole)

return abstractList.number();

return QVariant();

}

QHash<int, QByteArray> AbstractListModel::roleNames() const

{

QHash<int,QByteArray> roles;

//use operator[]

// roles[AbstractListRoles::NameRole]="name"; //定义对应角色值

// roles[AbstractListRoles::ColorRole]="color1";

// roles[AbstractListRoles::NumberRole]="number";

//use insert

roles.insert(AbstractListRoles::NameRole,"name");

roles.insert(AbstractListRoles::ColorRole,"color1");

roles.insert(AbstractListRoles::NumberRole,"number");

return roles;

}

AbstractList::AbstractList(const QString &name, const QString &color, const QString &number)

:m_name(name),m_color(color),m_number(number)

{

}

QString AbstractList::name() const

{

return m_name;

}

QString AbstractList::color() const

{

return m_color;

}

QString AbstractList::number() const

{

return m_number;

}

main.cpp中

AbstractListModel listmodel;

listmodel.addList(AbstractList("Bill Smith","red","555 3264"));

listmodel.addList(AbstractList("John Brown","green","555 8426"));

listmodel.addList(AbstractList("Sam Wise","blue","555 0473"));

QQmlApplicationEngine engine;

engine.rootContext()->setContextProperty("myModel", &listmodel);

qml文件中：

ListView{

width: 100

height: 100

model: myModel

delegate: Text {

color: color1

text: name+":"+number}

}

main.qml文件的所有代码：

import QtQuick 2.6

import QtQuick.Window 2.2

import QtQml.Models 2.2

Window {

visible: true

width: 640

height: 480

title: qsTr("Hello World")

ListModel {

id: m_model

ListElement {

number: "555 3264"

color1: "red"

}

ListElement {

number: "555 8426"

color1: "green"

}

ListElement {

number: "555 0473"

color1: "blue"

}

ObjectModel {

id: itemModel

Rectangle {

height: 20; width: 80;

Text {

color: "red"

text: "Bill Smith" + ":" + "555 3264"

}

Rectangle {

height: 20; width: 80;

Text{

color: "green"

text: "John Brown" + ":" + "555 8426"

}

Rectangle {

height: 20; width: 80;

Text {

color: "blue"

text: "Sam Wise"+":" + "555 0473"

}

Column{

spacing: 10

ListView{

width: 100

height: 100

model: m_model

delegate: Text{

color: color1

text: name+":"+number

}

ListView{

width: 100

height: 100

model: itemModel

}

ListView{

width: 100

height: 100

model: name1

delegate: Text{

text: modelData

}

ListView{

width: 100

height: 100

model: myObjectModel

delegate: Text{

color: model.modelData.color

text: name+":"+number}

}

ListView{

width: 100

height: 100

model: myModel

delegate: Text {

color: color1

text: name+":"+number}

}

main.cpp文件：

#include <QGuiApplication>

#include <QQmlApplicationEngine>

#include<QQmlContext>

#include"dataobject.h"

#include"abstractlistmodel.h"

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

{

QGuiApplication app(argc, argv);

QStringList a;

a << "Bill Smith" << "John Brown" << "Sam Wise"; //QStringList model

QList<QObject*> dataList; //QObject model

dataList << new DataObject("Bill Smith","red","555 3264") << new DataObject("John Brown","green","555 8426")

<< new DataObject("Sam Wise","blue","555 0473");

AbstractListModel listmodel;

listmodel.addList(AbstractList("Bill Smith","red","555 3264"));

listmodel.addList(AbstractList("John Brown","green","555 8426"));

listmodel.addList(AbstractList("Sam Wise","blue","555 0473"));

QQmlApplicationEngine engine;

engine.rootContext()->setContextProperty("name1", QVariant::fromValue(a));

engine.rootContext()->setContextProperty("myObjectModel", QVariant::fromValue(dataList));

engine.rootContext()->setContextProperty("myModel", &listmodel);

engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

if (engine.rootObjects().isEmpty())

return -1;

return app.exec();

}

Qt Quick之ListView下拉刷新数据

Qt Quick里的ListView，本身是Flickable的派生类，当你用鼠标拖曳或者手指触摸（触摸屏）时，会产生flickStarted和flickEnded两个信号，利用这两个信号，就可以实现下拉刷新数据，当然上拉刷新也是可以的。

创建一个Qt Quick App项目，添加dynamicModel.h和dynamicModel.cpp两个文件，用于实现DynamicListModel。项目创建过程参考《Qt Quick 之 Hello World 图文详解》。

我们实现的下拉刷新效果有点儿特别，每次刷新后，只保留预定义的一页数据，比如代码中默认的页大小为20。

C++ model实现

很简单，直接上代码了。

dynamic.h：

#ifndef DYNAMICMODEL_H

#define DYNAMICMODEL_H

#include <QAbstractListModel>

class DynamicListModelPrivate;

class DynamicListModel : public QAbstractListModel

{

Q_OBJECT

Q_PROPERTY(int pageSize READ pageSize WRITE setPageSize NOTIFY pageSizeChanged)

Q_PROPERTY(int total READ total WRITE setTotal NOTIFY totalChanged)

public:

DynamicListModel(QObject *parent = 0);

~DynamicListModel();

int rowCount(const QModelIndex &parent) const;

QVariant data(const QModelIndex &index, int role) const;

QHash<int, QByteArray> roleNames() const;

Q_INVOKABLE void loadMore(bool forward);

int pageSize();

void setPageSize(int size);

int total();

void setTotal(int total);

signals:

void pageSizeChanged(int size);

void totalChanged(int total);

private:

DynamicListModelPrivate *m_dptr;

};

#endif // DYNAMICMODEL_H

dynamicModel.cpp：

#include "dynamicModel.h"

#include <QDebug>

class DynamicListModelPrivate

{

public:

DynamicListModelPrivate(DynamicListModel *model)

: m_model(model), m_start(0), m_end(20)

, m_total(100), m_pageSize(20)

{

m_roleNames.insert(Qt::UserRole, "content");

}

void pageDown()

{

if(m_end < m_total)

{

m_start += m_pageSize;

m_end += m_pageSize;

if(m_end > m_total)

{

m_end = m_total;

m_start = m_end - m_pageSize;

}

void pageUp()

{

if(m_start > 0)

{

m_start -= m_pageSize;

if(m_start < 0) m_start = 0;

m_end = m_start + m_pageSize;

}

void adjustPageRange()

{

if(m_end - m_start < m_pageSize)

{

m_end = m_start + m_pageSize;

if(m_end > m_total)

{

m_end = m_total;

m_start = m_end - m_pageSize;

}

DynamicListModel *m_model;

int m_start;

int m_end;

int m_total;

int m_pageSize;

QHash<int, QByteArray> m_roleNames;

};

DynamicListModel::DynamicListModel(QObject *parent)

: QAbstractListModel(parent),

m_dptr(new DynamicListModelPrivate(this))

{

}

DynamicListModel::~DynamicListModel()

{

delete m_dptr;

}

int DynamicListModel::rowCount(const QModelIndex &parent) const

{

return m_dptr->m_end - m_dptr->m_start;

}

QVariant DynamicListModel::data(const QModelIndex &index, int role) const

{

int row = index.row();

//qDebug() << "index.row - " << row << " start - " << m_dptr->m_start;

return QString::number(row + m_dptr->m_start);

}

QHash<int, QByteArray> DynamicListModel::roleNames() const

{

return m_dptr->m_roleNames;

}

void DynamicListModel::loadMore(bool forward)

{

beginResetModel();

if(forward)m_dptr->pageDown();

else m_dptr->pageUp();

endResetModel();

}

int DynamicListModel::pageSize()

{

return m_dptr->m_pageSize;

}

void DynamicListModel::setPageSize(int size)

{

m_dptr->m_pageSize = size;

m_dptr->adjustPageRange();

emit pageSizeChanged(size);

}

int DynamicListModel::total()

{

return m_dptr->m_total;

}

void DynamicListModel::setTotal(int total)

{

m_dptr->m_total = total;

m_dptr->adjustPageRange();

emit totalChanged(total);

}

DynamicListModel仅仅是演示用法，使用m_start、m_end、m_total、m_pageSize四个整型变量来模拟实际的数据。而data()方法，将ListView内的行序号加上m_start转换为字符串返回，就是我们在ListView界面上看到了文字了。

loadMore()函数，区分向前还是向后加载数据，它调用DynamicListModel的pageDown()、pageUp()来更新内部的数据状态。在loadMore()一开始，调用beginResetModel()，通知关联到DynamicListModel上的view们刷新自己，当内部数据状态更新结束后，调用endResetModel()来通知view们，这样view们就会刷新，最终在实例化item delegate时调用data()方法来准备数据，此时m_start已变化，所以界面上看到的数字也跟着变了。

导出C++ Model

这个简单，我们在《Qt Quick 之 QML 与 C++ 混合编程详解》一文中已经讲过。直接看main.cpp：

#include <QGuiApplication>

#include <QQmlApplicationEngine>

#include <QQmlContext>

#include "dynamicModel.h"

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

{

QGuiApplication app(argc, argv);

QQmlApplicationEngine engine;

QQmlContext *ctx = engine.rootContext();

ctx->setContextProperty("dynamicModel", new DynamicListModel());

engine.load(QUrl(QStringLiteral("qrc:///main.qml")));

return app.exec();

}

QML代码介绍

是时候看看main.qml了：

import QtQuick 2.2

import QtQuick.Window 2.1

import QtQuick.Controls 1.2

import QtQuick.Layouts 1.1

import QtQuick.Controls.Styles 1.2

Window {

width: 320;

height: 480;

minimumWidth: 300;

minimumHeight: 480;

visible: true;

id: root;

Component {

id: listDelegate;

Text {

id: wrapper;

width: parent.width;

height: 32;

font.pointSize: 15;

verticalAlignment: Text.AlignVCenter;

horizontalAlignment: Text.AlignHCenter;

text: content;

color: ListView.view.currentIndex == index ? "red" : "blue";

MouseArea {

anchors.fill: parent;

onClicked: {

if(wrapper.ListView.view.currentIndex != index){

wrapper.ListView.view.currentIndex = index;

}

ListView {

id: dynamicList;

z: 1;

anchors.fill: parent;

anchors.margins: 10;

delegate: listDelegate;

model: dynamicModel;

focus: true;

activeFocusOnTab: true;

highlight: Rectangle {

color: "steelblue";

}

property real contentYOnFlickStarted: 0;

onFlickStarted: {

//console.log("start,origY - ", originY, " contentY - ", contentY);

contentYOnFlickStarted = contentY;

}

onFlickEnded: {

//console.log("end,origY - ", originY, " contentY - ", contentY);

dynamicModel.loadMore(contentY < contentYOnFlickStarted);

}

定义ListView对象时，指定其model为main()函数中导出的dynamicModel，其它的代码不必细说了，咱们单看实现下拉（上拉）刷新的关键代码。

onFlickStarted信号处理器，在这里我们仅仅是将flick开始时的contentY记录到contentYOnFlickStarted属性中。

onFlickEnded信号处理器，这里比较flick结束时的contentY和开始时的contentY（即contentYOnFlickStarted），结束时小，说明是下拉，结束时大，说明是上拉。根据比较结果调用loadMore()。

好啦，就这么简单了。看看效果。

ListView的 add remove move populate displaced 动画

ListView{

add:Transition{

ParalleAnimation{

NumberAnimation{

property:"opacity";

from:0;

to:1;

duration:1000;

}

NumberAnimation{

property:"x";

from:0;

duration:1000;

}

Canvas对象

Properties

available : bool

canvasSize : size

context : object

contextType : string

renderStrategy : enumeration

renderTarget : enumeration

Signals

imageLoaded()

paint(rect region)

painted()

Methods

cancelRequestAnimationFrame(int handle)

object getContext(string contextId, ... args)

isImageError(url image)

isImageLoaded(url image)

isImageLoading(url image)

loadImage(url image)

markDirty(rect area)

int requestAnimationFrame(callback)

requestPaint()

bool save(string filename)

string toDataURL(string mimeType)

unloadImage(url image)

查询Context2D对象资料

基础代码

Canvas {

id:canvas

onPaint:{

var ctx = canvas.getContext('2d');

ctx.strokeStyle = Qt.rgba(0, 0, 0, 1);

ctx.lineWidth = 1;

ctx.beginPath();

ctx.moveTo(20, 0);//start point

ctx.bezierCurveTo(-10, 90, 210, 90, 180, 0);

ctx.stroke();

}

ctx.scale(2.0, 0.5);

var space = 4

ctx.setLineDash([1, space, 3, space, 9, space, 27, space, 9, space])

...

ctx.stroke();

strokeStyle

See also createLinearGradient(), createRadialGradient(), createPattern(), and fillStyle.

对象内函数如

Rectangle{

Canvas{

id=imageCanvas;

property var poster;

onPaint:{

var ctx=getContentx("2d");

ctx.drawImage(poster,0,0,width,height);

}

Component.onCompleted:loadImage(poster);

onImageLoaded:{

requestPaint();

negative.setImageData(getContext("2d").createImageData(poster); //调用对象函数

}

Canvas {

id:negative;

property var imageData=null;

onPaint:

{

if(imageData!=null)

{

context.drawImage(imageData,0,0,width,height);

}

function setImageData(data)

{

imageData=data;

var limit=data.width*data.height*4;

for(var i=0;i<limit;i+=4)

{

imagedara.data[i]=255-data.data[[i];

imagedara.data[i+1]=255-data.data[[i+1];

imagedara.data[i+2]=255-data.data[[i+2];

imagedara.data[i+3]=data.data[[i+3];

}

requestPaint();

}

translate 平移 x,y

一般

ctx.save();//保存之前状态

ctx.translate(width/2,height/2); //等于把原点移动到画布中心位置

ctx.beginpath();

ctx.arc(0,0,30,0,Math.PI*2); //所有的绘制等于设置的值+translate的x y 如该句实际绘制是 ctx.arc(0+width/2,0+height/2,30,0,Math.PI*2);

....

ctx.strocke();

ctx.restore();//恢复

clip裁减绘制使用

ctx.save();

ctx.beginPath();

ctx.arc(...);

...

ctx.closePath();

ctx.clip();

//其他绘制裁减

ctx.restore();

FileDialog

FileDialog {

id:fds

title: "选择文件"

folder: shortcuts.desktop

selectExisting: true

selectFolder: false

selectMultiple: false

nameFilters: ["json文件 (*.json)"]

onAccepted: {

labels.text = fds.fileUrl;

console.log("You chose: " + fds.fileUrl);

}

onRejected: {

labels.text = "";

console.log("Canceled");

Qt.quit();

}

动画

PropertyAnimation 针对的组件的属性值的变化

NumberAnimation PropertyAnimation派生的专门针对数字类型的property

PathAnimation 让目标对象沿着一个既定的路径运动

SmoothedAnimation派生自 NumberAnimation 在from和to之间产生平滑的动画效果

SpringAnimation 模拟弹簧的振荡行为

ParalleAniamtion 组合动画包含多个动画（同时执行）

SequentialAnimation 与ParalleAniamtion类似不过他是顺序执行

State不同状态不同的显示等

states:[

State{

name:"redText";

changes{

PropertyChanges{

target:centerText;color:"red";

}

State{

name:'dddd';

when:mouseArea.pressed;//条件

changes{

}

]

state:"redText";

Qt 多线程同步与通信

转自网络

1 多线程同步

Qt提供了以下几个类来完成这一点：QMutex、QMutexLocker、QSemphore、QWaitCondition。

当然可能还包含QReadWriteLocker、QReadLocker、QWriteLocker，但线程同步是应用很少，这里只做简单的讲解！

QMutex、QMutexLocker

QMutex类提供了一个保护一段临界区代码的方法，他每次只允许一个线程访问这段临界区代码。QMutex::lock()函数用来锁住互斥量，如果互斥量处于解锁状态，当前线程就会立即抓住并锁定它；否则当前线程就会被阻塞，直到持有这个互斥量的线程对其解锁。线程调用lock()函数后就会持有这个互斥量直到调用unlock()操作为止。QMutex还提供了一个tryLock()函数，如果互斥量已被锁定，就立即返回。

在问题出来了，如果要在stop()函数中使用mutex进行互斥操作，但unlock()操作写在那里？unlock()操作却不得不再return之后，从而导致unlock()操作永远也无法执行...

Qt提供了QMutexLocker类何以简化互斥量的处理，它在构造函数中接受一个QMutex对象作为参数并将其锁定，在析构函数中解锁这个互斥量。

bool Thread::stop()

{

QMutexLocker locker(&mutex);

m_stop = true;

return m_stop;

}

QReadWriteLocker、QReadLocker、QWriteLocker

下面是一段对QReadWriteLocker类的对象进行，读写锁的操作，比较简单，这里也不多做讲解了，自己看吧

复制代码

MyData data;

QReadWriteLock lock;

void ReaderThread::run()

{

...

lock.lockForRead();

access_data_without_modifying_it(&data);

lock.unlock();

...

}

void WriterThread::run()

{

...

lock.lockForWrite();

modify_data(&data);

lock.unlock();

...

}

复制代码

QSemphore

Qt中的信号量是由QSemaphore类提供的，信号量可以理解为互斥量功能的扩展，互斥量只能锁定一次而信号量可以获取多次，它可以用来保护一定数量的同种资源。

acquire(n)函数用于获取n个资源，当没有足够的资源时调用者将被阻塞直到有足够的可用资源。release(n)函数用于释放n个资源。

QSemaphore类还提供了一个tryAcquire(n)函数，在没有足够的资源是该函数会立即返回。

一个典型的信号量应用程序是在两个线程间传递一定数量的数据(DataSize)，而这两个线程使用一定大小(BufferSize)的共享循环缓存。

const int DataSize = 100000;

const int BufferSize = 4096;

char buffer[BufferSize];

生产者线程向缓存中写入数据，直到它到达终点，然后在起点重新开始，覆盖已经存在的数据。消费者线程读取前者产生的数据。

生产者、消费者实例中对同步的需求有两处，如果生产者过快的产生数据，将会覆盖消费者还没有读取的数据，如果消费者过快的读取数据，将越过生产者并且读取到一些垃圾数据。

解决这个问题的一个有效的方法是使用两个信号量：

QSemaphore freeSpace(BufferSize);

QSemaphore usedSpace(0);

freeSpace信号量控制生产者可以填充数据的缓存部分。usedSpace信号量控制消费者可以读取的区域。这两个信号量是互补的。其中freeSpace信号量被初始化为BufferSize(4096)，表示程序一开始有BufferSize个缓冲区单元可被填充，而信号量usedSpace被初始化为0，表示程序一开始缓冲区中没有数据可供读取。

对于这个实例，每个字节就看作一个资源，实际应用中常会在更大的单位上进行操作，从而减小使用信号量带来的开销。

复制代码

void Producer::run()

{

for (int i = 0; i < DataSize; ++i) {

freeSpace.acquire();

buffer[i % BufferSize] = "MING"[uint(rand()) % 4];

usedSpace.release();

}

复制代码

在生产者中，我们从获取一个“自由的”字节开始。如果缓存被消费者还没有读取的数据填满，acquire()的调用就会阻塞，直到消费者已经开始消耗这些数据为止。一旦我们已经获取了这个字节，我们就用一些随机数据("M"、"I"、"N"或"G")填充它并且把这个字节释放为“使用的”,所以它可以被消费者线程使用。

复制代码

void Consumer::run()

{

for (int i = 0; i < DataSize; ++i) {

usedSpace.acquire();

cerr << buffer[i % BufferSize];

freeSpace.release();

}

cerr << endl;

}

复制代码

int main()

{

Producer producer;

Consumer consumer;

producer.start();

consumer.start();

producer.wait();

consumer.wait();

return 0;

}

复制代码

QWaitCondition

对生产者和消费者问题的另一个解决方法是使用QWaitCondition,它允许线程在一定条件下唤醒其他线程。其中wakeOne()函数在条件满足时随机唤醒一个等待线程，而wakeAll()函数则在条件满足时唤醒所有等待线程。

下面重写生产者和消费者实例，以QMutex为等待条件，QWaitCondition允许一个线程在一定条件下唤醒其他线程。

QWaitCondition.wait 内部会首先解锁mutex，使其他线程能使用mutex ,进入等待状态，当收到wakeAll wakeOne 唤醒线程时候，wait会再次锁定mutex 然后退出阻塞状态,执行后面的语句

QMutex mutex;

QWaitCondition newdataAvliable;

QByteArray array;

典型生产者消费者

mutex.lock();

array.Add(..);

....

mutex.unlock();

newdataAvliable.wakeAll();

消费者

mutex.lock();

newdataAvliable.wait(&mutext);

array[0];

mutex.unlock();

const int DataSize = 100000;

const int BufferSize = 4096;

char buffer[BufferSize];

QWaitCondition bufferIsNotFull;

QWaitCondition bufferIsNotEmpty;

QMutex mutex;

int usedSpace = 0;

在缓存之外，我们声明了两个QWaitCondition、一个QMutex和一个存储了在缓存中有多少个“使用的”字节的变量。

复制代码

void Producer::run()

{

for (int i = 0; i < DataSize; ++i) {

mutex.lock();

if (usedSpace == BufferSize)

bufferIsNotFull.wait(&mutex);

buffer[i % BufferSize] = "MING"[uint(rand()) % 4];

++usedSpace;

bufferIsNotEmpty.wakeAll();

mutex.unlock();

}

复制代码

在生产者中，我们从检查缓存是否充满开始。如果是充满的，我们等待“缓存不是充满的”条件。当这个条件满足时，我们向缓存写入一个字节，增加usedSpace，并且在唤醒任何等待这个“缓存不是空白的”条件变为真的线程。

for循环中的所有语句需要使用互斥量加以保护，以保护其操作的原子性。

bool wait ( QMutex * mutex, unsigned long time = ULONG_MAX );

这个函数做下说明，该函数将互斥量解锁并在此等待，它有两个参数，第一个参数为一个锁定的互斥量，第二个参数为等待时间。如果作为第一个参数的互斥量在调用是不是锁定的或出现递归锁定的情况，wait()函数将立即返回。

调用wait()操作的线程使得作为参数的互斥量在调用前变为锁定状态，然后自身被阻塞变成为等待状态直到满足以下条件：

其他线程调用了wakeOne()或者wakeAll()函数，这种情况下将返回"true"值。

第二个参数time超时(以毫秒记时)，该参数默认情况是ULONG_MAX，表示永不超时，这种情况下将返回"false"值。

wait()函数返回前会将互斥量参数重新设置为锁定状态，从而保证从锁定状态到等待状态的原则性转换。

复制代码

void Consumer::run()

{

forever {

mutex.lock();

if (usedSpace == 0)

bufferIsNotEmpty.wait(&mutex);

cerr << buffer[i % BufferSize];

--usedSpace;

bufferIsNotFull.wakeAll();

mutex.unlock();

}

cerr << endl;

}

复制代码

消费者做的和生产者正好相反，他等待“缓存不是空白的”条件并唤醒任何等待“缓存不是充满的”的条件的线程。

main()函数与上面的基本相同，这个不再多说。

在QThread类的静态函数currentThread()，可以返回当前线程的线程ID。在X11环境下，这个ID是一个unsigned long类型的值。

自己总结：

原子类型 QAtomicInt QAtomicPointer

2.多线程通信

a . 全局变量即共享内存

b. 管道

c. 信号槽

3.多进程通信

信号槽 socket 文件映射

QT 使用http协议post json数据

首先要添加项目的网络支持，也就是要在pro文件中添加下边这一行

QT += network

添加一个槽函数，这个函数用来连接发送完成信号，从而接收reply

// *.h 声明部分

private slots:

void finishedSlot(QNetworkReply*);

// *.cpp 定义部分

void MainWindow::finishedSlot(QNetworkReply* reply)

{

if (reply->error() == QNetworkReply::NoError)

{

QByteArray bytes = reply->readAll();

// 下边我们将收到的body部分解析为json格式，其中有个key是status

QJsonDocument jsonDocument = QJsonDocument::fromJson(bytes);

QJsonObject jsonObject = jsonDocument.object();

QString value = jsonObject.value("status").toString();

}

reply->deleteLater();

}

发送部分，为简单起见，将整个发送部分放在构造函数里

MainWindow::MainWindow(QWidget *parent) :

QMainWindow(parent),

ui(new Ui::MainWindow)

{

ui->setupUi(this);

QNetworkAccessManager * net_mgr = new QNetworkAccessManager(this);

connect(net_mgr, SIGNAL(finished(QNetworkReply*)), this, SLOT(finishedSlot(QNetworkReply*)));

QNetworkRequest net_request;

net_request.setUrl(QUrl("http://balabala"));

// 下边这行也很重要，要发送json格式的数据必须要在header里设置，不然不会成功的

net_request.setHeader(QNetworkRequest::ContentTypeHeader,QVariant("application/json"));

QJsonObject object;

object.insert("name", "xq");

object.insert("sex", "male");

QJsonDocument document=QJsonDocument(object);

// 这里要将json格式的数据转换为QByteArray才行

QByteArray post_data = document.toJson(QJsonDocument::Compact);

net_mgr->post(net_request, post_data);

}

这就完成了，这里只是拿post和json格式举个例子而已，看实际需要做相应的改变。

property var xmlhttp: null

//get method- asyn请求

function get(url){

if(xmlhttp==null){

xmlhttp=new XMLHttpRequest()

xmlhttp.onreadystatechange=onResultReady;

}

if(xmlhttp.readyState===0){

result.remove(0, result.length)

xmlhttp.open("GET", url, true)

xmlhttp.send()

}

//post mothod- asyn请求

function post(url, data){

if(xmlhttp==null){

xmlhttp=new XMLHttpRequest()

xmlhttp.onreadystatechange=onResultReady;

}

if(xmlhttp.readyState===0){

result.remove(0, result.length)

xmlhttp.open("POST", url, true)

xmlhttp.send(data)

}

//response,.readyState===4:返回请求结果

function onResultReady(){

console.log(xmlhttp.readyState)

if(xmlhttp.readyState===4){

if(xmlhttp.responseText!==null){

result.append("response data: "+ xmlhttp.responseText)

}

xmlhttp.abort()

}

用于保存配置信息

#include <QGuiApplication>

#include <QQmlApplicationEngine>

#include <QQmlContext>

#include <QSettings>

#include <QQuickStyle>

#include <QIcon>

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

{

QGuiApplication::setApplicationName("Gallery");

QGuiApplication::setOrganizationName("QtProject");

QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

QGuiApplication app(argc, argv);

QIcon::setThemeName("gallery");

QSettings settings;

QString style = QQuickStyle::name();

if (!style.isEmpty())

settings.setValue("style", style);

else

QQuickStyle::setStyle(settings.value("style").toString());

QQmlApplicationEngine engine;

engine.rootContext()->setContextProperty("availableStyles", QQuickStyle::availableStyles());

engine.load(QUrl("qrc:/gallery.qml"));

if (engine.rootObjects().isEmpty())

return -1;

return app.exec();

}

import QtQuick 2.12

import QtQuick.Layouts 1.12

import QtQuick.Controls 2.12

import QtQuick.Controls.Material 2.12

import QtQuick.Controls.Universal 2.12

import Qt.labs.settings 1.0

Settings {

id: settings

property string style: "Default"

}

Settings {

category: 'window'

property alias x: window.x

property alias y: window.x

property alias width: window.width

property alias height: window.height

}

QML快捷键（Shortcut、Keys）

1.Shortcut { }

Shortcut 可以设置当前 Window 或者整个应用的全局快捷键，先看下它的属性和信号：

属性：

1.autoRepeat : bool

重复触发，如长按的情况，默认 true

2.context : enumeration

处理当前Window还是整个应用的快捷键

可以是 Qt.WindowShortcut (默认)或者 Qt.ApplicationShortcut

3.enabled : bool

是否启用

4.nativeText : string

5.portableText : string

sequence快捷设置对应的字符串，

如设置 "delete" 则 nativeText 和 portableText 显示为 Del

6.sequence : keysequence

单个快捷键或序列，可以是 QKeySequence::StandardKey，也可以是最多四个键组合的字符串

如："Ctrl+E,Ctrl+W" 先按 Ctrl+E，再按 Ctrl+W 触发

如：StandardKey.Delete 删除键，具体平台映射按键值见文档

7.sequences : list<keysequence>

可以触发的快捷键列表，每一个都可以触发

如：["return","enter","space"]

信号：

1.activated()

快捷键触发了

2.activatedAmbiguously()

快捷键触发了，但是被多个 Shortcut 对象捕获，此时不会触发 activated()，

多个 Shortcut 轮流触发 activatedAmbiguously()

使用也很简单

Shortcut {

//过滤整个应用

context: Qt.ApplicationShortcut

//快捷键

//sequence: "left,right" //按了left再按right触发

//sequences: ["left","right"] //按left或者right触发

//sequences: ["return","enter"] //大小键盘回车

sequences: ["+","delete","return","enter","space"]

//只有一个Shortcut关注该快捷键则只触发onActivated

//否则只触发onActivatedAmbiguously

onActivated: {

console.log('Shortcut 1 onActivated.')

}

onActivatedAmbiguously: {

console.log('Shortcut 1 onActivatedAmbiguously.')

}

2.Keys

Keys 是作为附加属性来使用的，相当于过滤当前 Item 的按键事件。只要 Keys.press 和 Keys.release 没有被 accepted 或者被 Shortcut 处理，可以一直往上级传递，多个层级都可以获知该按键事件。流程为先触发 ShortcutOverride，该事件不会冒泡，如果 ShortcutOverride 没被 Shortcut 接收，那么后面的按键事件会往父级冒泡；要是 ShortcutOverride 被 Shortcut 处理了，那么后面的按键事件就不会触发 Keys.press 信号了。

看下它的属性和信号：

属性：

1.enabled : bool

启用开关

2.forwardTo : list<Object>

可以将按键转发给别的对象，一旦被列表中某个Item accepted，将不再转发给列表中往后的Item。

3.priority : enumeration

设置 forwardTo 的优先级，

Keys.BeforeItem（默认值）-在一般的按键处理之前处理该事件

Keys.AfterItem-在一般的按键处理之后处理该事件

要注意的是，event.accepted 就不再继续传递了

信号：

1.shortcutOverride(KeyEvent event)

快捷键事件，如果想拦截某个按键的快捷键不被全局捕获，可以 accepted

如：event.accepted=(event.key===Qt.Key_Space);

2.pressed(KeyEvent event)

某个按键按下，accpted 可以拦截不往上传递事件

3.released(KeyEvent event)

某个按键释放，accpted 可以拦截不往上传递事件

4.一堆具体按键的 pressed 信号

简单的使用

FocusScope {

id: keys_scope

anchors.fill: parent

Keys.enabled: true //activeFocus的时候就能触发了

Keys.onShortcutOverride: {

event.accepted=(event.key===Qt.Key_Space);

}

Keys.onPressed: {

console.log('Keys onPressed.')

}

Keys.onReleased: {

console.log('Keys onReleased.')

}

3.实例：屏蔽 Button 空格触发 clicked

Button {

width: 100

height: 30

focus: true

//被Shortcut捕获了就不会触发Keys.press

//被Shortcut或者Keys.press接受了，5.15不会触发click，5.12、5.13会

//5.12、5.13及以下需要接受Keys.release才不会触发click

Keys.onSpacePressed: {

console.log('Keys onSpacePressed')

//5.15 accepted了press就不会触发点击，5.12、5.13需要设置release的accepted

event.accepted=false;

}

Keys.onReleased: {

console.log('Keys onReleased')

event.accepted=(event.key===Qt.Key_Space); //低版本需要

}

//通过onShortcutOverride accepted可以拦截快捷键

//Control组件的空格是在事件函数里处理的，所以不需要这个

//Keys.onShortcutOverride: { }

onClicked: {

console.log('Button onClicked')

}

background: Rectangle {

border.width: parent.activeFocus?2:1

border.color: parent.focus?"red":"gray"

}

4.实例：屏蔽全局快捷键，使用当前 FocusScope 的快捷键处理

Shortcut {

sequence: "space"

onActivated: {

console.log('Shortcut onActivated')

}

FocusScope {

focus: true

anchors.fill: parent

Keys.onPressed: {

console.log('Keys onPressed')

}

Keys.onReleased: {

console.log('Keys onReleased')

}

//通过onShortcutOverride accepted可以拦截快捷键

Keys.onShortcutOverride: {

console.log('Keys onShortcutOverride')

//accepted接受需要屏蔽的按键后就不再触发全局快捷键

event.accepted=(event.key===Qt.Key_Space);

}

Item {

}

5.实例：eventFilter 过滤快捷键

虽然 Keys 可以对当前 activeFocus Item 过滤快捷键，但是组件比较多时，想要对某个焦点域进行快捷键操作，但又需要屏蔽全局快捷键怎么办呢？总不能每个组件都设置一边吧。我的办法就是使用 eventFilter 对 qApp 实例进行事件过滤，大致代码如下：

class KeysFilter : public QObject

{

Q_OBJECT

public:

//过滤类型

enum FilterType {

None = 0x00

,ShortcutOverride = 0x01

,KeyPress = 0x02

,KeyRelease = 0x04

,All = 0xFFFF

};

Q_ENUM(FilterType)

public:

explicit KeysFilter(QObject *parent = nullptr);

void setEnabled(bool enable)

{

if(enabled != enable){

if(enable){

qApp->installEventFilter(this);

}else{

qApp->removeEventFilter(this);

}

enabled = enable;

emit enabledChanged();

}

bool eventFilter(QObject *watched, QEvent *event) override

{

Q_UNUSED(watched)

const int &&e_type = event->type();

switch(e_type)

{

case QEvent::ShortcutOverride:

if(filterType & FilterType::ShortcutOverride) goto Tab_KeyProcess;

break;

case QEvent::KeyPress:

if(filterType & FilterType::KeyPress) goto Tab_KeyProcess;

break;

case QEvent::KeyRelease:

if(filterType & FilterType::KeyRelease) goto Tab_KeyProcess;

break;

}

return false;

Tab_KeyProcess:

{

QKeyEvent *key_event = static_cast<QKeyEvent*>(event);

if(key_event && filterKeys.contains(key_event->key())){

//accepted之后，shortcut就不再处理了

key_event->setAccepted(true);

//下面的逻辑用不到，目前只把快捷键过滤

if(acceptAutoRepeat || !key_event->isAutoRepeat()){

if(e_type == QEvent::KeyPress){

emit pressed(key_event->key());

}else if(e_type == QEvent::KeyRelease){

emit released(key_event->key());

}

return true;

}

return false;

}

private:

//使能-eventFilter

bool enabled = true;

//使能-长按重复触发

bool acceptAutoRepeat = false;

//过滤类型

FilterType filterType = FilterType::ShortcutOverride;

//过滤的按键列表

QList<int> filterKeys;

};

StackView和Dialog

stackView.push(model.source)

ToolButton {

icon.name: "menu"

onClicked: optionsMenu.open()

Menu {

id: optionsMenu

x: parent.width - width

transformOrigin: Menu.TopRight

MenuItem {

text: "Settings"

onTriggered: settingsDialog.open()

}

MenuItem {

text: "About"

onTriggered: aboutDialog.open()

}

StackView {

id: stackView

anchors.fill: parent

initialItem: Pane {

id: pane

Image {

id: logo

width: pane.availableWidth / 2

height: pane.availableHeight / 2

anchors.centerIn: parent

anchors.verticalCenterOffset: -50

fillMode: Image.PreserveAspectFit

source: "images/qt-logo.png"

}

Label {

text: "Qt Quick Controls 2 provides a set of controls that can be used to build complete interfaces in Qt Quick."

anchors.margins: 20

anchors.top: logo.bottom

anchors.left: parent.left

anchors.right: parent.right

anchors.bottom: arrow.top

horizontalAlignment: Label.AlignHCenter

verticalAlignment: Label.AlignVCenter

wrapMode: Label.Wrap

}

Image {

id: arrow

source: "images/arrow.png"

anchors.left: parent.left

anchors.bottom: parent.bottom

}

Dialog {

id: settingsDialog

x: Math.round((window.width - width) / 2)

y: Math.round(window.height / 6)

width: Math.round(Math.min(window.width, window.height) / 3 * 2)

modal: true

focus: true

title: "Settings"

standardButtons: Dialog.Ok | Dialog.Cancel

onAccepted: {

settings.style = styleBox.displayText

settingsDialog.close()

}

onRejected: {

styleBox.currentIndex = styleBox.styleIndex

settingsDialog.close()

}

contentItem: ColumnLayout {

id: settingsColumn

spacing: 20

RowLayout {

spacing: 10

Label {

text: "Style:"

}

ComboBox {

id: styleBox

property int styleIndex: -1

model: availableStyles

Component.onCompleted: {

styleIndex = find(settings.style, Qt.MatchFixedString)

if (styleIndex !== -1)

currentIndex = styleIndex

}

Layout.fillWidth: true

}

Label {

text: "Restart required"

color: "#e41e25"

opacity: styleBox.currentIndex !== styleBox.styleIndex ? 1.0 : 0.0

horizontalAlignment: Label.AlignHCenter

verticalAlignment: Label.AlignVCenter

Layout.fillWidth: true

Layout.fillHeight: true

}

QML组件

基于文件的组件将QML元素放置在一个单独的文件中，然后给文件一个名字，可以通过名字来使用组件。如果有一个文件名为Cell.qml，就可以在QML中使用Cell { … }形式。自定义组件的文件名的首字母必须大写。

Cell.qml文件：

import QtQuick 2.0

Item

{

id: container

property alias cellColor: rectangle.color

signal clicked(color cellColor)

width: 40; height: 25

Rectangle

{

id: rectangle

border.color: "white"

anchors.fill: parent

}

MouseArea

{

anchors.fill: parent

onClicked: container.clicked(container.cellColor)

}

Rectangle有一个Text用于显示按钮的文本；有一个MouseArea用于接收鼠标事件。用户可以定义按钮的文本，用过设置Text的text属性实现的。为了不对外暴露Text元素，给Text的text属性一个别名。signal clicked给Cell一个信号。由于clicked信号是无参数的，也可以写成signal clicked()，二者是等价的。clicked信号会在MouseArea的clicked信号被发出，具体就是在MouseArea的onClicked属性中调用个clicked信号。

Main.qml文件：

import QtQuick 2.0

Rectangle

{

id: page

width: 320; height: 480

color: "lightgray"

Text

{

id: helloText

text: "Hello world!"

y: 30

anchors.horizontalCenter: page.horizontalCenter

font.pointSize: 24; font.bold: true

}

Grid

{

id: colorPicker

x: 4; anchors.bottom: page.bottom; anchors.bottomMargin: 4

rows: 2; columns: 3; spacing: 3

Cell { cellColor: "red"; onClicked: helloText.color = cellColor }

Cell { cellColor: "green"; onClicked: helloText.color = cellColor }

Cell { cellColor: "blue"; onClicked: helloText.color = cellColor }

Cell { cellColor: "yellow"; onClicked: helloText.color = cellColor }

Cell { cellColor: "steelblue"; onClicked: helloText.color = cellColor }

Cell { cellColor: "black"; onClicked: helloText.color = cellColor }

}

main.qml中，直接使用了Cell组件。由于Cell.qml与main.qml位于同一目录下，所以不需要额外的操作。但如果将Cell.qml放在不同目录，main.qml的import部分增加一行import ../components才能够找到Cell组件。

Import“qml/”中，qml为文件夹，里面有Monitor.qml和Compass.qml两个?件qml/为文件夹的相对路径

选择一个组件的根元素很重要。比如Cell组件，使用Rectangle作为其根元素。Rectangle元素可以设置背景色等。如果不允许用户设置背景色，可以选择使用Item元素作为根。

利用Qt自制可import的QML插件

Qt的插件种类很多，但有些插件的协议是GPL协议，例如QtCharts。如果项目中使用了这种插件的话，那么就必须要共享源码。

商业软件肯定是不能共享源码的，所以就只能自制插件了。

自制插件的方式有很多种，可以直接写qml文件，使用时导入qml文件就行。但如果插件的代码除了bug需要修改，那么所有使用这个qml文件的源码都需要修改，很不方便。

所以，就决定写一个可以import的插件，方便好用。也可以把插件共享出来给广大网友，而不用担心源码泄露

第一步新建一个扩展插件项目

扩展插件项目，新建项目>>Library>>Qt Quick 2 Extension Plugin。

我们新建一个名为 QMLPlugin 的项目。

接下来需要输入class-name和URI，我们把URI更改成MyPlugin，class-name先不要改，等跑通整个程序后再做调整

然后一直点击下一步，直到完成，这个时候我们就能得到一个完整的插件扩展项目

请注意，这里有一个叫做 qmldir 的文件，打开文件看看。

module MyPlugin

plugin QMLPlugin

很简单的两句话，这个文件第二步有用。

第二步构建插件扩展项目

插件扩展项目新建完成后，我们对项目进行构建，分别用debug和release进行构建。

这样就能够得到一个debug的QMLPlugind.dll文件，和release的QMLPlugin.dll文件。注意：如果是linux的话，应该是so文件。

我们在桌面新建一个文件夹 MyPlugin（当然也可以叫其他名字），把我们刚刚构建出来的QMLPlugind.dll和QMLPlugin.dll，还有第一步的qmldir文件，放入到MyPlugin文件夹中。

再将MyPlugin这个文件夹放到Qt安装目录的qml文件夹下面，一定要找准位置。这个文件夹下面还有许多其它的qml插件，比如说QtCharts等。

第三步新建一个qml项目做测试

在第一步和第二步都做完的情况下，讲道理qml中就已经可以调用了，我们测试一下。

新建一个qml的qt项目。

新建完成后，我们什么都不要改，直接打开main.qml文件，import刚刚我们新做的插件。

还记得刚刚的qmldir文件吗，里面有两行代码。

module MyPlugin

plugin QMLPlugin

这个module 里面的MyPlugin就是我们要导入的对象。我们先导入试用，然后我再说为什么可以导入。

import MyPlugin 1.0

导入成功，程序没有报红也没有报错。

好，还记得我们新建插件扩展项目时，说先不要改动的class-name吗，那个就是可以在qml中调用的插件名 MyItem，试用一下看看。

第四步讲解为什么可以导入

在第三步我们试用时已经成功了，那为什么可以做到呢。

打开我们之前新建的插件扩展项目QMLPlugin，里面有一个文件qmlplugin_plugin.cpp，打开它

看到了吗，有这么一句代码：

qmlRegisterType<MyItem>(uri, 1, 0, "MyItem");

这个uri就是之前新建项目输入的URI，也是写入qmldir文件的module，也就是我们可以import导入的原因，版本为1.0。

代码最后的参数"MyItem"，就是我们在qml中使用的插件名，也可以换个其它任何你喜欢的名字，但最好是要首字母大写。

第五步创建一个自己的插件

在第四步讲了为什么可以使qml导入后，大家或许也猜到了，只要用qmlRegisterType注册一下其它的对象，那么qml不就可以调用了吗。

我们实验一下，假设我想自定义一个提示板，可以设置颜色、文字、背景等功能。

首先新建一个c++类，名为NoticeBoard。

因为是给qml调用，所以这个类需要继承QQuickItem，又因为需要用到画板Painter，所以继承QQuickPaintedItem类，记得勾选Add Q_OBJECT的选项，因为可能会用到信号。

新建类后，因为没有头函数，所以文件会报错，我们把.h和.cpp文件都补充完整。

注意：

记得要加上这一句话：Q_DISABLE_COPY(NoticeBoard)，否则qml中会报红色。

因为是继承了QQuickPaintedItem类，所以一定要记得重写paint函数，否则编译会报错的。

#ifndef NOTICEBOARD_H

#define NOTICEBOARD_H

#include <QQuickPaintedItem>

class NoticeBoard : public QQuickPaintedItem

{

Q_OBJECT

Q_DISABLE_COPY(NoticeBoard)

public:

NoticeBoard(QQuickItem *parent = nullptr);

~NoticeBoard() override;

protected:

void paint(QPainter *painter) override;

};

#endif // NOTICEBOARD_H

#include "noticeboard.h"

NoticeBoard::NoticeBoard(QQuickItem *parent) : QQuickPaintedItem(parent)

{

}

构建一下，没有报错了。如果还有再报错的话，建议把构建出来的文件全部删除后，重新构建。

修改一下qmlplugin_plugin.cpp，使得qml中能够调用到这个插件。

#include "qmlplugin_plugin.h"

#include "myitem.h"

#include "noticeboard.h"

#include <qqml.h>

void QMLPluginPlugin::registerTypes(const char *uri)

{

// @uri MyPlugin

qmlRegisterType<MyItem>(uri, 1, 0, "MyItem");

qmlRegisterType<NoticeBoard>(uri, 1, 0, "NoticeBoard");

}

NoticeBoard::~NoticeBoard()

{

}

void NoticeBoard::paint(QPainter *painter)

{

}

再使用debug和release分别对项目进行构建，将构建出来的两个dll库放入qt安装目录下，我们在第二步做的MyPlugin文件夹下。

记得一定是qt安装目录下的MyPlugin文件夹，这一步后面就不再重复了，每当更改了这个插件的代码时，都需要将dll文件更新一下。

第六步让自己创建的插件有可修改属性

第四步创建插件提示板成功了，但是这个提示板没有颜色也没有文字，一片空白，现在来修改一下，首先修改颜色，我们希望在qml中可以控制提示板的颜色color属性。

我们就在NoticeBoard中增加一个color属性，用Q_PROPERTY的功能使得qml可以使用。

我们修改一下noticeboard.h和noticeboard.cpp文件。

#ifndef NOTICEBOARD_H

#define NOTICEBOARD_H

#include <QQuickPaintedItem>

#include <QPainter>

class NoticeBoard : public QQuickPaintedItem

{

Q_OBJECT

Q_DISABLE_COPY(NoticeBoard)

Q_PROPERTY(QString color READ getColor WRITE setColor NOTIFY colorChanged)

public:

NoticeBoard(QQuickItem *parent = nullptr);

~NoticeBoard() override;

QString getColor() const;

void setColor(const QString &color);

protected:

void paint(QPainter *painter) override;

private:

QString color = "#FF0000";

signals:

void colorChanged();

};

#endif // NOTICEBOARD_H

#include "noticeboard.h"

NoticeBoard::NoticeBoard(QQuickItem *parent) : QQuickPaintedItem(parent)

{

}

NoticeBoard::~NoticeBoard()

{

}

QString NoticeBoard::getColor() const

{

return color;

}

void NoticeBoard::setColor(const QString &color)

{

this->color = color;

emit colorChanged();

}

void NoticeBoard::paint(QPainter *painter)

{

QBrush brush; //画刷。填充几何图形的调色板，由颜色和填充风格组成

brush.setColor(QColor(color));

brush.setStyle(Qt::SolidPattern);

QPen pen; //画笔。

pen.setColor(QColor(color));

//在画板上画一个跟画板同宽同高的矩形

painter->setPen(pen);

painter->setBrush(brush);

painter->drawRect(0, 0, this->width(), this->height());

}

QML组件事件动态绑定

ReturnBtn.qml 文件

//此处定义一个msgChange信号，该信号带有一个sting类型的参数name，还有一个int类型的参数age

signal msgChange(name:string,age:int)

MouseArea {

anchors.fill: returnIcon_128

onClicked: {

//当点击MouseArea对象类型时，调用msgChange函数，并传入”iriczhao“和999两个参数

msgChange("iriczhao",999)

}

onPressed: {

glow.visible = true

glow.color = "lightskyblue"

}

onReleased:{

glow.visible = false

}

test.qml文件

Window {

id: window

width: 640

height: 480

visible: true

color: "#4c79ef"

title: qsTr("Hello World")

ReturnBtn {

id: returnBtn

x: 245

y: 204

width: 100

height: 47

anchors.verticalCenter: parent.verticalCenter

anchors.horizontalCenter: parent.horizontalCenter

//此处在msgChange信号处理函数中，使用function()来接收msgChange信号带入的两个参数

onMsgChange: function(name,age){console.log("recv " + name + " " + age)}

}

1、函数中形式参数的名称不必与信号中的名称相匹配。

2、如果不需要处理所有的参数，可以省略后面的参数。例如，只想在onMsgChange信号处理函数中接收name参数，不接受age参数，可以这样写：

onMsgChange: function(name){console.log("recv " + " " + name)}

3、对于function（）中的不需要的参数，可以使用下划线(_)来进行参数占位，从而告诉qml引擎忽略掉该参数。例如，如果不想在onMsgChange信号处理函数中接收name参数，可以这样写：

onMsgChange: function(_,age){console.log("recv " + " " + age)}

使用Connections qml类型创建信号连接

import QtQuick 2.0

import QtQuick.Window 2.15

import "Components"

Window {

id: window

width: 640

height: 480

visible: true

color: "#4c79ef"

title: qsTr("Hello World")

ReturnBtn {

id: returnBtn

x: 245

y: 204

width: 100

height: 47

anchors.verticalCenter: parent.verticalCenter

anchors.horizontalCenter: parent.horizontalCenter

onMsgChange: function(name){console.log("recv " + " " + name)}

//附加的信号处理函数

Component.onCompleted: {

console.log("ReturnBtn")

}

//附加的信号处理函数

Component.onCompleted: {

console.log("Window")

}

使用connect将信号连接到方法和信号

Window {

id: window

width: 640

height: 480

visible: true

color: "#4c79ef"

title: qsTr("Hello World")

ReturnBtn {

id: returnBtn

x: 245

y: 204

width: 100

height: 47

anchors.verticalCenter: parent.verticalCenter

anchors.horizontalCenter: parent.horizontalCenter

}

Component.onCompleted: {

//在该组件加载完成信号处理函数中创建：returnBtn对象的msgChange信号与masChangeHandler JavaScript的

//函数连接

returnBtn.msgChange.connect(msgChangeHandler)

}

//定义msgChangeHandler函数

function msgChangeHandler(messae,value)

{

console.log("recv param :" + messae +" " + value);

}

连接到信号

Window {

id: window

width: 640

height: 480

visible: true

color: "#4c79ef"

title: qsTr("Hello World")

signal returnBtnClicked()

ReturnBtn {

id: returnBtn

x: 245

y: 204

width: 100

height: 47

anchors.verticalCenter: parent.verticalCenter

anchors.horizontalCenter: parent.horizontalCenter

onMsgChange: console.log("ReturnBtn")

}

Component.onCompleted: {

returnBtn.msgChange.connect(returnBtnClicked)

}

onReturnBtnClicked:

{

console.log("this is Window signal : returnBtnClicked handler")

}

QML 布局中的项目提供特定间距

例如 Column或 Row , 布局被引入以支持 UI 的图形缩放，也是由引入的。灌装可用空间(在这种特定情况下填充其父级)。在这个意义上，spacing属性不应被视为 Item 之间间距的严格上限s 但作为最小允许距离它们之间。

当前解决您的问题的方法是使用“填充物”Item ，它使用 fillHeight 属性(property)。此 Item占据了对方留下的所有空间Item s 在布局中，因此根据需要将它们打包在一起:

import QtQuick 2.5

import QtQuick.Window 2.2

Window {

visible: true

width: 100

height: 200

ColumnLayout {

anchors.fill: parent

spacing: 2

Rectangle {

height: 50

width: 50

color: "red"

}

Rectangle {

height: 50

width: 50

color: "green"

}

Rectangle {

height: 50

width: 50

color: "blue"

}

Item { Layout.fillHeight: true } // <-- filler here

}

请注意，您可以利用相同的方法并在布局的开头添加一个填充符以垂直居中子项 Item s。最后，请注意，在这种情况下，建议使用 Column其中放置了 Item s 如预期正确，不考虑剩余的可用空间。

还有 anchors.leftMargin 等

Qt Quick 之 QML 与 C++ 混合编程详解

Qt Quick 技术的引入，使得你能够快速构建 UI ，具有动画、各种绚丽效果的 UI 都不在话下。但它不是万能的，也有很多局限性，原来 Qt 的一些技术，比如低阶的网络编程如 QTcpSocket ，多线程，又如 XML 文档处理类库 QXmlStreamReader / QXmlStreamWriter 等等，在 QML 中要么不可用，要么用起来不方便，所以呢，很多时候我们是会基于这样的原则来混合使用 QML 和 C++： QML 构建界面， C++ 实现非界面的业务逻辑和复杂运算。

那这篇呢，我们就来看看 QML 和 C++ 之间如何交互。

其实话说回来， QML 的很多基本类型原本就是在 C++ 中实现的，比如 Item 对应 QQuickItem ， Image 对应 QQuickImage ， Text 对应 QQuickText ，……这样看来，在 QML 中访问 C++ 对象必然不成问题。然也！反过来，在 C++ 中其实也可以使用 QML 对象。

对于这两种情景，我们分别讲述。先看如何在 QML 中使用 C++ 类和对象。

首先我们需要创建一个 Qt Quick App ，请参考《Qt Quick 之 Hello World 图文详解》建立一个名为 colorMaker 的项目，接下来我们的学习将会伴随 colorMaker 项目进行，等我们讲完，一个完整的 colorMaker 项目也会完成。需要新建两个文件， colorMaker.h 和 colorMaker.cpp 。

colorMaker 只是一个示例项目，我在 C++ 中实现一个 ColorMaker 类，它可以被注册为一个 QML 类型供 QML 像内建类型一样使用，它的实例也可以导出为 QML 上下文属性在 QML 中访问。我们的示例只是在界面顶部显示当前时间（时间文字的颜色随时间变化而变化），在界面中间显示一个变色矩形，在界面底部放置几个按钮来控制颜色如何变化。

图 1 是效果图：

在 QML 中使用 C++ 类和对象

我们知道， QML 其实是对 JavaScript 的扩展，融合了 Qt Object 系统，它是一种新的解释型的语言， QML 引擎虽然由 Qt C++ 实现，但 QML 对象的运行环境，说到底和 C++ 对象的上下文环境是不同的，是平行的两个世界。如果你想在 QML 中访问 C++ 对象，那么必然要找到一种途径来在两个运行环境之间建立沟通桥梁。

Qt 提供了两种在 QML 环境中使用 C++ 对象的方式：

在 C++ 中实现一个类，注册到 QML 环境中， QML 环境中使用该类型创建对象

在 C++ 中构造一个对象，将这个对象设置为 QML 的上下文属性，在 QML 环境中直接使用改属性

不管哪种方式，对要导出的 C++ 类都有要求，不是一个类的所有方法、变量都可以被 QML 使用，因此我们先来看看怎样让一个方法或属性可以被 QML 使用。

实现可以导出的 C++ 类

前提条件

要想将一个类或对象导出到 QML 中，下列前提条件必须满足：

从 QObject 或 QObject 的派生类继承

使用 Q_OBJECT 宏

看起来好像和使用信号与槽的前提条件一样……没错，的确是一样的。这两个条件是为了让一个类能够进入 Qt 强大的元对象系统（meta-object system）中，只有使用元对象系统，一个类的某些方法或属性才可能通过字符串形式的名字来调用，才具有了在 QML 中访问的基础条件。

一旦你导出了一个类，在 QML 中就必然要访问该类的实例的属性或方法来达到某种目的，否则我真想不来你要干什么……而具有什么特征的属性或方法才可以被 QML 访问呢？

信号，槽

只要是信号或者槽，都可以在 QML 中访问，你可以把 C++ 对象的信号连接到 QML 中定义的方法上，也可以把 QML 对象的信号连接到 C++ 对象的槽上，还可以直接调用 C++ 对象的槽或信号……所以，这是最简单好用的一种途径。

下面初始 ColorMaker 类的声明：

class ColorMaker : public QObject

{

Q_OBJECT

public:

ColorMaker(QObject *parent = 0);

~ColorMaker();

signals:

void colorChanged(const QColor & color);

void currentTime(const QString &strTime);

public slots:

void start();

void stop();

};

我们定义了 start() / stop() 两个槽， colorChanged() / currentTime() 两个信号，都可以在 QML 中使用。

Q_INVOKABLE 宏

在定义一个类的成员函数时使用 Q_INVOKABLE 宏来修饰，就可以让该方法被元对象系统调用。这个宏必须放在返回类型前面。

我给 ColorMaker 添加了两个使用 Q_INVOKABLE 宏修饰的方法，现在 ColorMaker 类的声明变成了这个样子：

class ColorMaker : public QObject

{

Q_OBJECT

public:

ColorMaker(QObject *parent = 0);

~ColorMaker();

Q_INVOKABLE GenerateAlgorithm algorithm() const;

Q_INVOKABLE void setAlgorithm(GenerateAlgorithm algorithm);

signals:

void colorChanged(const QColor & color);

void currentTime(const QString &strTime);

public slots:

void start();

void stop();

};

一旦你使用 Q_INVOKABLE 将某个方法注册到元对象系统中，在 QML 中就可以用 ${Object}.${method} 来访问，colorMaker 的 main.qml 中有使用 algorithm() 和 setAlgorithm() 的 QML 代码：

Component.onCompleted: {

colorMaker.color = Qt.rgba(0,180,120, 255);

colorMaker.setAlgorithm(ColorMaker.LinearIncrease);

changeAlgorithm(colorAlgorithm, colorMaker.algorithm());

}

我在根元素创建完成时初始化 colorMaker 对象，给它设定了颜色生成算法，同时改变界面上切换颜色生成算法的按钮的文字。

Q_ENUMS

如果你要导出的类定义了想在 QML 中使用枚举类型，可以使用 Q_ENUMS 宏将该枚举注册到元对象系统中。

ColorMaker 类定义了 GenerateAlgorithm 枚举类型，支持 RandomRGB / RandomRed 等颜色生成算法。现在 ColorMaker 类的声明变成了这个样子：

class ColorMaker : public QObject

{

Q_OBJECT

Q_ENUMS(GenerateAlgorithm)

public:

ColorMaker(QObject *parent = 0);

~ColorMaker();

enum GenerateAlgorithm{

RandomRGB,

RandomRed,

RandomGreen,

RandomBlue,

LinearIncrease

};

Q_INVOKABLE GenerateAlgorithm algorithm() const;

Q_INVOKABLE void setAlgorithm(GenerateAlgorithm algorithm);

signals:

void colorChanged(const QColor & color);

void currentTime(const QString &strTime);

public slots:

void start();

void stop();

};

一旦你使用 Q_ENUMS 宏注册了你的枚举类型，在 QML 中就可以用 ${CLASS_NAME}.${ENUM_VALUE} 的形式来访问，比如 ColorMaker.LinearIncrease ，上节展示的 QML 代码片段已经使用了导出的枚举类型。

Q_PROPERTY

Q_PROPERTY 宏用来定义可通过元对象系统访问的属性，通过它定义的属性，可以在 QML 中访问、修改，也可以在属性变化时发射特定的信号。要想使用 Q_PROPERTY 宏，你的类必须是 QObject 的后裔，必须在类首使用 Q_OBJECT 宏。

下面是 Q_PROPERTY 宏的原型：

Q_PROPERTY(type name

(READ getFunction [WRITE setFunction] |

MEMBER memberName [(READ getFunction | WRITE setFunction)])

[RESET resetFunction]

[NOTIFY notifySignal]

[REVISION int]

[DESIGNABLE bool]

[SCRIPTABLE bool]

[STORED bool]

[USER bool]

[CONSTANT]

[FINAL])

是不是很复杂？你可以为一个属性命名，可以设定的选项数超过10个……我是觉得有点儿头疼。不过，不是所有的选项都必须设定，看一个最简短的属性声明：

Q_PROPERTY(int x READ x)

上面的声明定义了一个类型为 int 名为 x 的属性，通过方法 x() 来访问。

type name 这两个字段想必不用细说了吧？ type 是属性的类型，可以是 int / float / QString / QObject / QColor / QFont 等等， name 就是属性的名字。

其实我们在实际使用中，很少能够用全 Q_PROPERTY 的所有选项，就往 QML 导出类这种场景来说，比较常用的是 READ / WRITE / NOTIFY 三个选项。我们来看看都是什么含义。

READ 标记，如果你没有为属性指定 MEMBER 标记，则 READ 标记必不可少；声明一个读取属性的函数，该函数一般没有参数，返回定义的属性。

WRITE 标记，可选配置。声明一个设定属性的函数。它指定的函数，只能有一个与属性类型匹配的参数，必须返回 void 。

NOTIFY 标记，可选配置。给属性关联一个信号（该信号必须是已经在类中声明过的），当属性的值发生变化时就会触发该信号。信号的参数，一般就是你定义的属性。

其它标记的含义，请参考 Qt SDK 。

QML 中的 Text 类型对应 C++ 中的 QQuickText 类，下面是我摘取的部分代码，可以看到 Q_ENUMS 和 Q_PROPERTY 的使用：

class QQuickText : public QQuickImplicitSizeItem

{

Q_OBJECT

Q_ENUMS(HAlignment)

Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged)

Q_PROPERTY(QFont font READ font WRITE setFont NOTIFY fontChanged)

Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)

...

public:

enum HAlignment { AlignLeft = Qt::AlignLeft,

AlignRight = Qt::AlignRight,

AlignHCenter = Qt::AlignHCenter,

AlignJustify = Qt::AlignJustify };

...

QString text() const;

void setText(const QString &);

QFont font() const;

void setFont(const QFont &font);

QColor color() const;

void setColor(const QColor &c);

...

};

现在给我们的 ColorMaker 类添加一些属性，以便 QML 可以获取、设置颜色值。新的 ColorMaker 类如下：

class ColorMaker : public QObject

{

Q_OBJECT

Q_ENUMS(GenerateAlgorithm)

Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)

Q_PROPERTY(QColor timeColor READ timeColor)

public:

ColorMaker(QObject *parent = 0);

~ColorMaker();

enum GenerateAlgorithm{

RandomRGB,

RandomRed,

RandomGreen,

RandomBlue,

LinearIncrease

};

QColor color() const;

void setColor(const QColor & color);

QColor timeColor() const;

Q_INVOKABLE GenerateAlgorithm algorithm() const;

Q_INVOKABLE void setAlgorithm(GenerateAlgorithm algorithm);

signals:

void colorChanged(const QColor & color);

void currentTime(const QString &strTime);

public slots:

void start();

void stop();

protected:

void timerEvent(QTimerEvent *e);

private:

GenerateAlgorithm m_algorithm;

QColor m_currentColor;

int m_nColorTimer;

};

现在我们的 ColorMaker 已经是一个完整的类了，有信号、有槽、有使用 Q_INVOKABLE 注册的方法，还导出了枚举类型，小小麻雀五脏俱全。

是时候看看它的实现了。翠花，上代码：

#include "colorMaker.h"

#include <QTimerEvent>

#include <QDateTime>

ColorMaker::ColorMaker(QObject *parent)

: QObject(parent)

, m_algorithm(RandomRGB)

, m_currentColor(Qt::black)

, m_nColorTimer(0)

{

qsrand(QDateTime::currentDateTime().toTime_t());

}

ColorMaker::~ColorMaker()

{

}

QColor ColorMaker::color() const

{

return m_currentColor;

}

void ColorMaker::setColor(const QColor &color)

{

m_currentColor = color;

emit colorChanged(m_currentColor);

}

QColor ColorMaker::timeColor() const

{

QTime time = QTime::currentTime();

int r = time.hour();

int g = time.minute()*2;

int b = time.second()*4;

return QColor::fromRgb(r, g, b);

}

ColorMaker::GenerateAlgorithm ColorMaker::algorithm() const

{

return m_algorithm;

}

void ColorMaker::setAlgorithm(GenerateAlgorithm algorithm)

{

m_algorithm = algorithm;

}

void ColorMaker::start()

{

if(m_nColorTimer == 0)

{

m_nColorTimer = startTimer(1000);

}

void ColorMaker::stop()

{

if(m_nColorTimer > 0)

{

killTimer(m_nColorTimer);

m_nColorTimer = 0;

}

void ColorMaker::timerEvent(QTimerEvent *e)

{

if(e->timerId() == m_nColorTimer)

{

switch(m_algorithm)

{

case RandomRGB:

m_currentColor.setRgb(qrand() % 255, qrand() % 255, qrand() % 255);

break;

case RandomRed:

m_currentColor.setRed(qrand() % 255);

break;

case RandomGreen:

m_currentColor.setGreen(qrand() % 255);

break;

case RandomBlue:

m_currentColor.setBlue(qrand() % 255);

break;

case LinearIncrease:

{

int r = m_currentColor.red() + 10;

int g = m_currentColor.green() + 10;

int b = m_currentColor.blue() + 10;

m_currentColor.setRgb(r % 255, g % 255, b % 255);

}

break;

}

emit colorChanged(m_currentColor);

emit currentTime(QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss"));

}

else

{

QObject::timerEvent(e);

}

我使用一个周期为 1000 的定时器来产生颜色，定时器触发时根据算法来构造新的颜色值，发射 colorChanged 信号，同时也发送一个 currentTime 信号。

注册一个 QML 中可用的类型

看过了怎样实现一个可供 QML 访问的类，这节我们看看怎样将一个 C++ 类型注册为 QML 类型以及怎样在 QML 中使用这个类型。

要达到这种目的，大概可以分四步：

实现 C++ 类

在 QML 中导入类型

在 QML 创建由 C++ 导出的类型的实例并使用

ColorMaker 已经就绪了，现在看看怎样将其注册为 QML 可以使用的类型。

注册 QML 类型

要注册一个 QML 类型，有多种方法可用，如 qmlRegisterSingletonType() 用来注册一个单例类型， qmlRegisterType() 注册一个非单例的类型， qmlRegisterTypeNotAvailable() 注册一个类型用来占位， qmlRegisterUncreatableType() 通常用来注册一个具有附加属性的附加类型，……好吧，我这里只说常规的类型注册，其它的，请您参考 Qt SDK 吧。

qmlRegisterType() 是个模板函数，有两个原型：

template<typename T>

int qmlRegisterType(const char *uri, int versionMajor, int versionMinor, const char *qmlName);

template<typename T, int metaObjectRevision>

int qmlRegisterType(const char *uri, int versionMajor, int versionMinor, const char *qmlName);

前一个原型一般用来注册一个新类型，而后一个可以为特定的版本注册类型。后面这个牵涉到 Qt Quick 的类型和版本机制，三言两语不能尽述，咱们单说前一个原型的使用。要使用 qmlRegisterType 需要包含 QtQml 头文件。

先说模板参数 typename ，它就是你实现的 C++ 类的类名。

qmlRegisterType() 的第一个参数 uri ，让你指定一个唯一的包名，类似 Java 中的那种，一是用来避免名字冲突，而是可以把多个相关类聚合到一个包中方便引用。比如我们常写这个语句 "import QtQuick.Controls 1.1" ，其中的 "QtQuick.Controls" 就是包名 uri ，而 1.1 则是版本，是 versionMajor 和 versionMinor 的组合。 qmlName 则是 QML 中可以使用的类名。

下面是 colorMaker 示例的 main.cpp 文件：

#include <QtGui/QGuiApplication>

#include "qtquick2applicationviewer.h"

#include <QtQml>

#include "colorMaker.h"

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

{

QGuiApplication app(argc, argv);

qmlRegisterType<ColorMaker>("an.qt.ColorMaker", 1, 0, "ColorMaker");

QtQuick2ApplicationViewer viewer;

viewer.setMainQmlFile(QStringLiteral("qml/colorMaker/main.qml"));

viewer.showExpanded();

return app.exec();

}

上面的代码将 ColorMaker 类注册为 QML 类 ColorMaker ，主版本为 1 ，次版本为 0 ，而我起的包名则是 an.qt.ColorMaker 。注册动作一定要放在 QML 上下文创建之前，否则的话，木有用滴。

在 QML 中导入 C++ 注册的类型

一旦你在 C++ 中注册好了 QML 类型，就可以在 QML 文档中引入你注册的包，然后使用注册的类型。要引入包，使用 import 语句。比如要使用我们注册的 ColorMaker 类，可以在 QML 文档中加入下面的 import 语句：

import an.qt.ColorMaker 1.0

在 QML 中创建 C++ 导入类型的实例

引入包后，你就可以在 QML 中创建 C++ 导入类型的对象了，与 QML 内建类型的使用完全一样。如下是创建一个 ColorMaker 实例的代码：

Rectangle {

width: 360;

height: 360;

ColorMaker {

id: colorMaker;

color: Qt.green;

}

如你所见，ColorMaker 的使用与 Retangle 没什么区别。如果你想在别处引用 ColorMaker 的实例，可以给实例指定一个唯一的 id ，就像上面的代码中那样。

完整的 colorMaker 实例

如何定义一个可以导出到 QML 中的 C++ 类、如何注册 QML 类型、如何在 QML 中使用 C++ 导出的类型，都介绍完了，现在来看看完整的 colorMaker 。

如果你对如何在 QML 中使用信号与槽还有疑问，请温习下《 Qt Quick 事件处理之信号与槽》再往下看。如果你对 QML 的基本语法忘了，请温习《 QML 语言基础》。如果你不记得 Qt Quick 的基本元素，看《 Qt Quick 简单教程》吧。

C++ 代码前面都展示过了，这里看下完整的 main.qml 文档：

import QtQuick 2.0

import QtQuick.Controls 1.1

import an.qt.ColorMaker 1.0

Rectangle {

width: 360;

height: 360;

Text {

id: timeLabel;

anchors.left: parent.left;

anchors.leftMargin: 4;

anchors.top: parent.top;

anchors.topMargin: 4;

font.pixelSize: 26;

}

ColorMaker {

id: colorMaker;

color: Qt.green;

}

Rectangle {

id: colorRect;

anchors.centerIn: parent;

width: 200;

height: 200;

color: "blue";

}

Button {

id: start;

text: "start";

anchors.left: parent.left;

anchors.leftMargin: 4;

anchors.bottom: parent.bottom;

anchors.bottomMargin: 4;

onClicked: {

colorMaker.start();

}

Button {

id: stop;

text: "stop";

anchors.left: start.right;

anchors.leftMargin: 4;

anchors.bottom: start.bottom;

onClicked: {

colorMaker.stop();

}

function changeAlgorithm(button, algorithm){

switch(algorithm)

{

case 0:

button.text = "RandomRGB";

break;

case 1:

button.text = "RandomRed";

break;

case 2:

button.text = "RandomGreen";

break;

case 3:

button.text = "RandomBlue";

break;

case 4:

button.text = "LinearIncrease";

break;

}

Button {

id: colorAlgorithm;

text: "RandomRGB";

anchors.left: stop.right;

anchors.leftMargin: 4;

anchors.bottom: start.bottom;

onClicked: {

var algorithm = (colorMaker.algorithm() + 1) % 5;

changeAlgorithm(colorAlgorithm, algorithm);

colorMaker.setAlgorithm(algorithm);

}

Button {

id: quit;

text: "quit";

anchors.left: colorAlgorithm.right;

anchors.leftMargin: 4;

anchors.bottom: start.bottom;

onClicked: {

Qt.quit();

}

Component.onCompleted: {

colorMaker.color = Qt.rgba(0,180,120, 255);

colorMaker.setAlgorithm(ColorMaker.LinearIncrease);

changeAlgorithm(colorAlgorithm, colorMaker.algorithm());

}

Connections {

target: colorMaker;

onCurrentTime:{

timeLabel.text = strTime;

timeLabel.color = colorMaker.timeColor;

}

Connections {

target: colorMaker;

onColorChanged:{

colorRect.color = color;

}

main.qml 的界面分成了三部分，参看图 1 。顶部是一个 Text ，用来显示由 ColorMaker 提供的时间，我使用 Connections 对象，指定 target 为 colorMaker ，在 onCurrentTime 信号处理器中改变 timeLabel 的文本和颜色。这里使用 ColorMaker 的 timeColor 属性，该属性的读取函数是 timeColor ，回看一下 colorMaker.cpp 中的实现：

QColor ColorMaker::timeColor() const

{

QTime time = QTime::currentTime();

int r = time.hour();

int g = time.minute()*2;

int b = time.second()*4;

return QColor::fromRgb(r, g, b);

}

timeColor() 函数获取当前时间，取时、分、秒转换为 R 、 G 、 B 值，构造一个 QColor 对象。

我构造了ColorMaker 类的一个实例， id 为 colorMaker ，初始化颜色值为 green 。

colorMaker 实例界面的中间是一个 Rectangle 对象，id 是 colorRect 。我使用 Connections 对象，指定 target 为 colorMaker ，在 onColorChanged 信号处理器中改变 colorRect 的颜色。

界面的底部就是几个按钮，使用锚布局把它们排成一行。 start 按钮的 onClicked 信号处理器调用 colorMaker 的 start() 槽，启动颜色生成器。 stop 按钮的 onClicked 信号处理器调用 colorMaker 的 stop() 槽，停止颜色生成器。而 colorAlgorithm 按钮则每点击一次就切换一个颜色生成算法，同时调用 changeAlgorithm() 函数，根据算法改变按钮上的文字。 quit 按钮一点就退出应用。

main.qml 还引入了一个新内容：定义函数。这个可以参考 JavaScript 的教程。我们定义的 changeAlgorithm 函数，接受两个参数， button 和 algorithm 。如果你是 C++ 程序猿，可能有点儿不适应：怎么参数就木有类型呢哈…… JavaScript 就是酱紫滴，拥有动态类型，一个变量在赋值时决定其类型。

这就是 colorMaker 的全部了。

好啦，现在再来看看怎样导出一个对象到 QML 中。

导出一个 C++ 对象为 QML 的属性

上面看了怎样导出一个 QML 类型在 QML 文档中使用，你还可以把 C++ 中创建的对象作为属性传递到 QML 环境中，然后在 QML 环境中访问。我们还是以 colorMaker 为例，对其代码做适当修改来适应本节的内容。

注册属性

要将一个对象注册为属性很简单，colorMaker 的 main.cpp 修改后如下：

#include <QtGui/QGuiApplication>

#include "qtquick2applicationviewer.h"

#include <QtQml>

#include "colorMaker.h"

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

{

QGuiApplication app(argc, argv);

QtQuick2ApplicationViewer viewer;

viewer.rootContext()->setContextProperty("colorMaker", new ColorMaker);

viewer.setMainQmlFile(QStringLiteral("qml/colorMaker/main.qml"));

viewer.showExpanded();

return app.exec();

}

注意我在 viewer 变量后增加的新语句：

viewer.rootContext()->setContextProperty("colorMaker", new ColorMaker);

正式这行代码从堆上分配了一个 ColorMaker 对象，然后注册为 QML 上下文的属性，起了个名字就叫 colorMaker 。

viewer.rootContext() 返回的是 QQmlContext 对象。 QQmlContext 类代表一个 QML 上下文，它的 setContextProperty() 方法可以为该上下文设置一个全局可见的属性。要注意的是，你 new 出来的对象， QQmlContext 只是使用，不会帮你删除，你需要自己找一个合适的时机来删除它。

还有一点要说明，因为我们去掉了 qmlRegisterType() 调用，所以在 main.qml 中不能再访问 ColorMaker 类了，比如你不能通过类名来引用它定义的 GenerateAlgorithm 枚举类型， colorMaker.setAlgorithm(ColorMaker.LinearIncrease) 语句会导致下面的报错：

ReferenceError: ColorMaker is not defined

现在来看如何在 QML 中使用我们导出的属性

在 QML 中使用关联到 C++ 对象的属性

一旦调用 setContextProperty() 导出了属性，就可以在 QML 中使用了，不需要 import 语句哦。下面是 main.qml 修改后的代码：

import QtQuick 2.0

import QtQuick.Controls 1.1

//[1]

//import an.qt.ColorMaker 1.0

Rectangle {

width: 360;

height: 360;

Text {

id: timeLabel;

anchors.left: parent.left;

anchors.leftMargin: 4;

anchors.top: parent.top;

anchors.topMargin: 4;

font.pixelSize: 26;

}

/* [2]

ColorMaker {

id: colorMaker;

color: Qt.green;

}

Rectangle {

id: colorRect;

anchors.centerIn: parent;

width: 200;

height: 200;

color: "blue";

}

Button {

id: start;

text: "start";

anchors.left: parent.left;

anchors.leftMargin: 4;

anchors.bottom: parent.bottom;

anchors.bottomMargin: 4;

onClicked: {

colorMaker.start();

}

Button {

id: stop;

text: "stop";

anchors.left: start.right;

anchors.leftMargin: 4;

anchors.bottom: start.bottom;

onClicked: {

colorMaker.stop();

}

function changeAlgorithm(button, algorithm){

switch(algorithm)

{

case 0:

button.text = "RandomRGB";

break;

case 1:

button.text = "RandomRed";

break;

case 2:

button.text = "RandomGreen";

break;

case 3:

button.text = "RandomBlue";

break;

case 4:

button.text = "LinearIncrease";

break;

}

Button {

id: colorAlgorithm;

text: "RandomRGB";

anchors.left: stop.right;

anchors.leftMargin: 4;

anchors.bottom: start.bottom;

onClicked: {

var algorithm = (colorMaker.algorithm() + 1) % 5;

changeAlgorithm(colorAlgorithm, algorithm);

colorMaker.setAlgorithm(algorithm);

}

Button {

id: quit;

text: "quit";

anchors.left: colorAlgorithm.right;

anchors.leftMargin: 4;

anchors.bottom: start.bottom;

onClicked: {

Qt.quit();

}

Component.onCompleted: {

colorMaker.color = Qt.rgba(0,180,120, 255);

//[3]

//colorMaker.setAlgorithm(ColorMaker.LinearIncrease);

colorMaker.setAlgorithm(2);

changeAlgorithm(colorAlgorithm, colorMaker.algorithm());

}

Connections {

target: colorMaker;

onCurrentTime:{

timeLabel.text = strTime;

timeLabel.color = colorMaker.timeColor;

}

Connections {

target: colorMaker;

onColorChanged:{

colorRect.color = color;

}

main.qml 代码主要修改了三处，我已经使用方括号标注出来了。因为我将导出的属性命名为 colorMaker ，和导出 ColorMaker 类时构造的实例的 id 一样，所以改动少了些。

你看到了，导出的属性可以直接使用，与属性关联的对象，它的信号、槽、可调用方法（使用 Q_INVOKABLE 宏修饰的方法）、属性都可以使用，只是不能通过类名来引用枚举值了。

在 C++ 中使用 QML 对象

看过了如何在 QML 中使用 C++ 类型或对象，现在来看如何在 C++ 中使用 QML 对象。

我们可以使用 QML 对象的信号、槽，访问它们的属性，都没有问题，因为很多 QML 对象对应的类型，原本就是 C++ 类型，比如 Image 对应 QQuickImage ， Text 对应 QQuickText……但是，这些与 QML 类型对应的 C++ 类型都是私有的，你写的 C++ 代码也不能直接访问。肿么办？

Qt 最核心的一个基础特性，就是元对象系统，通过元对象系统，你可以查询 QObject 的某个派生类的类名、有哪些信号、槽、属性、可调用方法等等信息，然后也可以使用 QMetaObject::invokeMethod() 调用 QObject 的某个注册到元对象系统中的方法。而对于使用 Q_PROPERTY 定义的属性，可以使用 QObject 的 property() 方法访问属性，如果该属性定义了 WRITE 方法，还可以使用 setProperty() 修改属性。所以只要我们找到 QML 环境中的某个对象，就可以通过元对象系统来访问它的属性、信号、槽等。

查找一个对象的孩子

QObject 类的构造函数有一个 parent 参数，可以指定一个对象的父亲， QML 中的对象其实借助这个组成了以根 item 为父的一棵对象树。

而 QObject 定义了一个属性 objectName ，这个对象名字属性，就可以用于查找对象。现在该说到查找对象的方法了： findChild() 和 findChildren() 。它们的函数原型如下：

T QObject::findChild(const QString & name = QString(),\

Qt::FindChildOptions options = \

Qt::FindChildrenRecursively) const;

QList<T> QObject::findChildren(const QString & name = \

QString(), Qt::FindChildOptions options = \

Qt::FindChildrenRecursively) const;

QList<T> QObject::findChildren(const QRegExp & regExp, \

Qt::FindChildOptions options = \

Qt::FindChildrenRecursively) const;

QList<T> QObject::findChildren(const QRegularExpression & re,\

Qt::FindChildOptions options = \

Qt::FindChildrenRecursively) const;

都是模板方法，从命名上也可以看出，一个返回单个对象，一个返回对象列表。闲话少说，现在让我们看看如何查询一个或多个对象，我们先以 Qt Widgets 为例来说明用法哈。

示例 1 ：

QPushButton *button = parentWidget->findChild<QPushButton *>("button1");

查找 parentWidget 的名为 "button1" 的类型为 QPushButton 的孩子。

示例 2 ：

QList<QWidget *> widgets = parentWidget.findChildren<QWidget *>("widgetname");

返回 parentWidget 所有名为 "widgetname" 的 QWidget 类型的孩子列表。

使用元对象调用一个对象的方法

QMetaObject 的 invokeMethod() 方法用来调用一个对象的信号、槽、可调用方法。它是个静态方法，其函数原型如下：

bool QMetaObject::invokeMethod(QObject * obj, const char * member, Qt::ConnectionType type, QGenericReturnArgument ret, QGenericArgument val0 = QGenericArgument( 0 ), QGenericArgument val1 = QGenericArgument(), QGenericArgument val2 = QGenericArgument(), QGenericArgument val3 = QGenericArgument(), QGenericArgument val4 = QGenericArgument(), QGenericArgument val5 = QGenericArgument(), QGenericArgument val6 = QGenericArgument(), QGenericArgument val7 = QGenericArgument(), QGenericArgument val8 = QGenericArgument(), QGenericArgument val9 = QGenericArgument()) [static]

其实 QMetaObject 还有三个 invokeMethod() 函数，不过都是上面这个原型的重载，所以我们只要介绍上面这个就 OK 了。

先说返回值吧，返回 true 说明调用成功。返回 false ，要么是因为没有你说的那个方法，要么是参数类型不匹配。

第一个参数是被调用对象的指针。

第二个参数是方法名字。

第三个参数是连接类型，看到这里你就知道， invokeMethod 为信号与槽而生，你可以指定连接类型，如果你要调用的对象和发起调用的线程是同一个线程，那么可以使用 Qt::DirectConnection 或 Qt::AutoConnection 或 Qt::QueuedConnection ，如果被调用对象在另一个线程，那么建议你使用 Qt::QueuedConnection 。

第四个参数用来接收返回指。

然后就是多达 10 个可以传递给被调用方法的参数。嗯，看来信号与槽的参数个数是有限制的，不能超过 10 个。

对于要传递给被调用方法的参数，使用 QGenericArgument 来表示，你可以使用 Q_ARG 宏来构造一个参数，它的定义是：

QGenericArgument Q_ARG( Type, const Type & value)

返回类型是类似的，使用 QGenericReturnArgument 表示，你可以使用 Q_RETURN_ARG 宏来构造一个接收返回指的参数，它的定义是：

QGenericReturnArgument Q_RETURN_ARG( Type, Type & value)

好啦，总算把这个天杀的函数介绍完了，下面我们看看怎么用。

假设一个对象有这么一个槽 compute(QString, int, double) ，返回一个 QString 对象，那么你可以这么调用（同步方式）：

QString retVal;

QMetaObject::invokeMethod(obj, "compute", Qt::DirectConnection,

Q_RETURN_ARG(QString, retVal),

Q_ARG(QString, "sqrt"),

Q_ARG(int, 42),

Q_ARG(double, 9.7));

如果你要让一个线程对象退出，可以这么调用（队列连接方式）：

QMetaObject::invokeMethod(thread, "quit",

Qt::QueuedConnection);

更多细节请参考 Qt 帮助中的 QMetaObject 手册。

callQml 示例

现在让我们创建一个新的项目，名字是 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";

}

我们给根元素起了个名字 "rootRect" ，给退出按钮起了个名字 "quitButton" ，给文本起了名字 "textLabel" ，我们会在 C++ 代码中通过这些个名字来查找对应的对象并改变它们。

现在来看看 main.cpp ：

#include <QtGui/QGuiApplication>

#include "qtquick2applicationviewer.h"

#include <QQuickItem>

#include "changeColor.h"

#include <QMetaObject>

#include <QDebug>

#include <QColor>

#include <QVariant>

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<QObject*>("quitButton");

if(quitButton)

{

QObject::connect(quitButton, SIGNAL(clicked()), &app, SLOT(quit()));

}

QObject *textLabel = rootItem->findChild<QObject*>("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();

}

在一开始我通过 viewer.rootObject() ，获取到了作为根元素的 Rectangle ，然后把它交给一个 ChangeQmlColor 对象，该对象会内部通过一个定时器，一秒改变一次传入对象的颜色。

紧接着，我使用 QObject 的 findChild() 找到了 quitButton 按钮，把它的 clicked() 信号连接到 QGuiApplication 的 quit() 槽上。所以你点击这个按钮，应用就退出了。

后来，我又通过名字 "textLabel" 找到了 textLabel 对象。首先我企图使用 invodeMethod() 调用 setText() 方法来改变 textLabel 的文本，这个注定是会失败的，因为 QML 中的Text 对象对应 C++ QQuickText 类，而 QQuickText 没有名为 setText 的槽或者可调用方法。我查看了头文件 qquicktext_p.h ，发现它有一个使用 Q_INVOKABLE 宏修饰的 doLayout() 的方法，所以后来我又调用 doLayout() ，这次成功了。

图 2 是运行效果：

图 2 callQml 运行效果图

Hello World 这行字变成了红色，是因为我在 main() 函数中使用 setProperty 修改了 textLabel 的 color 属性。

下面是 Qt Creator 应用程序输出窗口的信息，可以验证对 Text 方法的调用是否成功：

Starting D:\projects\...\release\callQml.exe...

QMetaObject::invokeMethod: No such method QQuickText::setText(QString)

call setText return - false

call doLayout return - true

好啦，最后看看界面背景为么变成了浅绿色。这正是下面这行代码的功劳：

new ChangeQmlColor(rootItem);

它以 rootItem 为参数创建了一个 ChangeQmlColor 对象，而 ChangeQmlColor 类会改变传给它的对象的颜色。

ChangeQmlColor 类定义如下：

#ifndef CHANGECOLOR_H

#define CHANGECOLOR_H

#include <QObject>

#include <QTimer>

class ChangeQmlColor : public QObject

{

Q_OBJECT

public:

ChangeQmlColor(QObject *target, QObject *parent = 0);

~ChangeQmlColor();

protected slots:

void onTimeout();

private:

QTimer m_timer;

QObject *m_target;

};

#endif

实现文件 changeColor.cpp ：

#include "changeColor.h"

#include <QDateTime>

#include <QColor>

#include <QVariant>

ChangeQmlColor::ChangeQmlColor(QObject *target, QObject *parent)

: QObject(parent)

, m_timer(this)

, m_target(target)

{

qsrand(QDateTime::currentDateTime().toTime_t());

connect(&m_timer, SIGNAL(timeout()), this, SLOT(onTimeout()));

m_timer.start(1000);

}

ChangeQmlColor::~ChangeQmlColor()

{}

void ChangeQmlColor::onTimeout()

{

QColor color = QColor::fromRgb(qrand()%256, qrand()%256, qrand()%256);

m_target->setProperty("color", color);

}

很简单，不说啦。

My God ！终于说完了吗？ QML 中使用 C++ 对象， C++ 中使用 QML 对象……不知道你看明白没？

回顾一下吧：

Qt Quick 简介

QML 语言基础

Qt Quick 之 Hello World 图文详解

Qt Quick 简单教程

Qt Quick 事件处理之信号与槽

Qt Quick事件处理之鼠标、键盘、定时器

Qt Quick 事件处理之捏拉缩放与旋转

Qt Quick 组件与对象动态创建详解

Qt Quick 布局介绍

QML与HTML JS交互

WebChannel

WebChannel提供一种机制使得QObject或者QML访问HTML。所有的属性，信号和公共的槽函数都可以被HTML使用。

WebChannel由一些属性和方法组成。

属性包括：

registeredObjects

A list of objects which should be accessible to remote clients.

The objects must have the attached id property set to an identifier, under which the object is then known on the HTML side.

Once registered, all signals and property changes are automatically propagated to the clients. Public invokable methods, including slots, are also accessible to the clients.

If one needs to register objects which are not available when the component is created, use the imperative registerObjects method.

简单翻译一下：

这是一个提供给HTML访问的object列表。

object需要有id标识，这样才能被HTML识别。

object一旦被注册，所有的信号和属性的改变都会被自动传递到客户端。还包括公共的方法和槽。

如果组件创建时object还不可用，可以使用registerObject方法。

transports

A list of transport objects, which implementQWebChannelAbstractTransport. The transports are used to talk to the remote clients.

一个传输列表，实现了QWebChannelAbstractTransport类。用来跟客户端交互。

其它方法具体不再赘述，可以参考后面的参考文献。这里我们主要讲一下registeredObjects的用法。

registeredObjects提供给HTML访问的object列表。object须声明id属性，这样HTML才能知道它；同时，object要声明WebChannel.id，HTML使用该id访问对象。

QtObject定义如下：

QtObject {

id: myObject

WebChannel.id: "myWebObject"

property string name: "QtObjectName"

signal onMystringChanged(var myStr)

}

WebChannel定义如下：

WebChannel {

id: myChannel

registeredObjects: [myObject]

}

WebEngineView

WebChannel声明好之后，下面就是如何使用它。我们定义WebEngineView元素，用来加载HTML文件，并指定关联的WebChannel，使用方式如下：

WebEngineView {

id: webView

url: "./map.html"

webChannel: myChannel

}

至此，QML端的工作就已经完成了。下面讲一下如何在HTML端使用WebChannel。

引入qwebchannel.js库

HTML想要使用QWebChannel，需要先引用qwebchannel库，这是一个JavaScript类库，使用方式如下：

然后在增加如下代码：

new QWebChannel(qt.webChannelTransport, function(channel) {

var myClass = channel.objects.myClass;

var myObject = channel.objects.myWebObject;

myObject.onMystringChanged.connect(function(myStr) {

console.log(myStr);

});

调用页面js

var functionStr = "jsFileCall()";

webView.runJavaScript(functionStr, function(result){

console.log(String(result));

});

网页中的视频不能加载

通过以上方式加载网页后，如果网页中包含视频或音频之类的元素，是不能正常播放的，这是因为没有默认运行插件，如 flash player，设置方法如下：

webview.settings.pluginsEnabled:true

缓存路径，清除缓存

加载网页会有缓存产生，那么缓存的路径如下：

webview.profile.cachePath

清理缓存

webview.profile.clearHttpCache()

QML快速上手2 - 状态转换与分组动画

动画

在使用任何动画之前，必须要在 main.qml 内导入以下头文件

或者在任何需要调用动画的 qml 文件添加该头，否则会一直报错！

若使用 QT5 的 QML，使用：import QtQuick.Controls 1.4

若使用 QT6 的 QML，使用：import QtQuick.Controls 2.0

添加完毕后，必须要重新构建整个项目！

rect 点击后在固定时间内持续自旋后停止案例

代码清单：AnimationComp.qml

import QtQuick 2.0

Item {

id: root

width: 100; height: 100

// 控制是否播放动画的属性

property bool isRunning: false

Rectangle{

id: rect

anchors.fill: parent

anchors.margins: 20

color: "deepskyblue"

// RotationAnimation控制旋转类型的动画

RotationAnimation on rotation{

to: 360 // 从当前位置到360

duration: 300 // 持续时间300ms

running: root.isRunning // 当前动画状态

}

// 设立一个按钮点击区域以便启动动画

MouseArea{

id: mouse

anchors.fill: parent

onClicked: root.isRunning = true

}

在 main.qml 里面是这样的：

import QtQuick 2.12

import QtQuick.Window 2.12

// 一定一定一定要记住导入这个头文件！！！

import QtQuick.Controls 1.4

Window {

width: 640

height: 480

visible: true

title: qsTr("Hello World")

// 调用自己编写的带动画的rect组件

AnimationComp{}

}

Rectangle 竖直方向移动动画

我们可以使用两种方式实现

方法一：Behavior 监听位置变换

Rectangle{

id:rect

width: 200; height: 200

color: "deepskyblue"

// 使用Behavior监听组件y轴位置

// 一旦y值变化，则启动动画过渡效果

Behavior on y{

// NumberAnimation数值动画过渡效果

NumberAnimation{

duration: 1000

easing.type: Easing.InOutQuad

}

MouseArea{

id:mouse

anchors.fill: parent

// 点击后修改y轴位置，触发对应Behavior

onClicked: rect.y = 200

}

方法二：NumberAnimation 触发

Rectangle{

id:rect

width: 200; height: 200

color: "deepskyblue"

// NumberAnimation数值类型动画过渡

NumberAnimation {

id:anim // 设置动画id

target: rect // 那个组件执行动画

property: "y" // 欲监听变动的属性

to: 200 // 属性变化到哪个数值

duration: 1000 // 动画持续时间

easing.type: Easing.InOutQuad // 过渡曲线

}

MouseArea{

id:mouse

anchors.fill: parent

// 使用start显式触发对应id的动画！

onClicked: anim.start()

}

分组动画

ParallelAnimation 非顺序分组动画

由该组件包裹的所有动画全部都同时进行，不按顺序

Rectangle{

id:rect

width: 100; height: 100

color: "deepskyblue"

MouseArea{

id:mouse

anchors.fill: parent

onClicked: para.start() // 开启分组动画

}

ParallelAnimation{

id:para

NumberAnimation{

target: rect

properties: "y"

to: 100

duration: 1000

easing.type: Easing.Bezier

}

NumberAnimation{

target: rect

properties: "x"

to: 200

duration: 1000

easing.type: Easing.Bezier

}

SequentialAnimation 按顺序分组动画

所有添加进去的动画都按照顺序依次执行

代码不做演示，直接把上方代码中的 ParallelAnimation 改为 SequentialAnimation 即可

状态与转换

使用 states 进行状态管理，实现不同状态的切换

import QtQuick 2.0

Item {

id:root

width: 100; height: 100

// 起始状态

state: "open"

// 所有可能的状态

states: [

// open状态，颜色为灰色

State {

PropertyChanges {

target: rect

color:"lightgray"

}

// close状态，颜色为橙色

State {

PropertyChanges {

target: rect

color:"orange"

}

]

Rectangle{

id:rect

anchors.fill: parent

color: "orange"

MouseArea{

id:mouse

anchors.fill: parent

// 鼠标点击切换状态

onClicked: root.state = (root.state=="open" ? "close" : "open")

}

直接切换 state 显得是否僵硬，我们需要通过 transitions 添加一些过渡效果

直接把以下代码插入到上方代码中去

// 设置过渡效果

transitions: [

Transition {

// 表示过渡效果针对所有state切换过程

// 当然你也可以选择针对单次状态切换过程执行动画，比如from:"open"; to:"close"

from: "*"; to:"*"

// 一个标准的颜色切换过渡

ColorAnimation {

properties: "color"

duration: 2000

easing.type: Easing.Bezier

}

]

此时完整的代码应该是这样的

代码清单 TransitionComp.qml

import QtQuick 2.0

Item {

id:root

width: 100; height: 100

state: "open"

states: [

State {

PropertyChanges {

target: rect

color:"lightgray"

}

State {

PropertyChanges {

target: rect

color:"orange"

}

]

transitions: [

Transition {

from: "*"; to:"*"

ColorAnimation {

properties: "color"

duration: 2000

easing.type: Easing.Bezier

}

]

Rectangle{

id:rect

anchors.fill: parent

color: "orange"

MouseArea{

id:mouse

anchors.fill: parent

onClicked: root.state = (root.state=="open" ? "close" : "open")

}

QML快速上手1 - 预备知识

QtQuick 预备知识

二维坐标系

新建一个 quick 工程文件

main.qml 代码清单

import QtQuick 2.12

import QtQuick.Window 2.12

// 主window

Window {

width: 640

height: 480

visible: true

title: qsTr("Hello World")

// 构建一个长方形

// 左上角绘制点为[0,0]

// 绘制长宽为176 96

// Gradient给予长方形一个渐变底色

Rectangle {

id: rect1

x: 12; y: 12

width: 176; height: 96

gradient: Gradient {

GradientStop { position: 0.0; color: "lightsteelblue" }

GradientStop { position: 1.0; color: "slategray" }

}

border.color: "slategray"

}

quick 中的坐标系如下图所示

y 轴向下为正

x 轴向右为正

所有的组件绘制起点都是左上角点，所以代码中我们设置 Rectangle 的坐标为 [12,12] 即为绘制起点坐标

text

很简单，学过类似的声明式页面开发都知道这些英文代表什么，就不多废话了

仅就不易辨别或者 QT 自带特有的属性进行分析讲解

Text {

width: 40; height: 120

text: 'A very long text'

// elide 表示文本省略的位置，省略位置会以三个英文原点代替

// 这里表示中间省略，故文本最终展示为："A...t"

elide: Text.ElideMiddle

style: Text.Sunken

styleColor: '#FF4444'

verticalAlignment: Text.AlignTop

}

image

Image {

x: 12+64+12; y: 12

// width: 72

height: 72/2

source: "assets/triangle_red.png"

fillMode: Image.PreserveAspectCrop

clip: true

}

mousearea

鼠标可点击位置

下方代码实现：点击左侧方形，改变右侧方形的显示与隐藏

Rectangle {

id: rect1

x: 12; y: 12

width: 76; height: 96

color: "lightsteelblue"

// 设置一个点击区域

// onClicked 点击后触发的方法

MouseArea {

id: area

width: parent.width

height: parent.height

onClicked: rect2.visible = !rect2.visible

}

Rectangle{

id: rect2

x: rect1.width+24; y:12

width: 76; height: 96

color: "deepskyblue"

}

组件

在 main.qml 同级目录下新建一个自定义组件文件 DemoBtn.qml

下方展示最终文件结构

以下简单案例实现：自定义一个按钮 DemoBtn，并给予其两个插槽，可更改按钮显示文本以及按钮点击事件；在主界面 main.qml 调用自定义按钮，实现组件复用

下方为 DemoBtn.qml 代码清单

import QtQuick 2.12

// 定义根元素

// 需要在根元素内定义接收的参数，让根元素下所有子元素调度

Rectangle {

id: root

// 既然这是一个自定义组件，就必须给予可传递的参数位置来改变组件内容

// 导出属性使用 property alias

property alias text: label.text

// 导出信号或者其他触发方法使用 signal

signal clicked

width: 116; height: 26

color: "lightsteelblue"

border.color: "slategrey"

Text {

id: label

anchors.centerIn: parent

text: "Start"

}

MouseArea {

anchors.fill: parent

onClicked: {

// 点击事件直接采用根元素接收来的参数clicked

root.clicked()

}

回到咱们的 main.qml

由于处于同级目录，不需要 import 导入，直接使用自定义组件即可！

自定义组件名==文件名

// 由于我们编写的自定义组件文件名为DemoBtn.qml，所以使用该组件时依旧使用此名称

DemoBtn {

id: button

x: 12; y: 12

// 传递text参数

text: "innerText"

// 传递点击事件参数

onClicked: {

status.text="Button click!!!"

}

// 被控制的text组件

Text {

id: status

x: 12; y: 76

width: 116; height: 26

text: "waiting ..."

horizontalAlignment: Text.AlignHCenter

}

组件复用还可以使用另外一种方法 Item

在开发大型项目时，几乎都采用此方法

修改自定义组件 DemoBtn.qml 代码为

import QtQuick 2.12

Item {

id: root

width: 116; height: 26

property alias text: label.text

signal clicked

Rectangle {

anchors.fill: parent

color: "lightsteelblue"

border.color: "slategrey"

Text {

id: label

anchors.centerIn: parent

text: "Start"

}

MouseArea {

anchors.fill: parent

onClicked: {

root.clicked()

}

定位元件

Column 列定位

在其中添加的组件都会按照列的方向竖直排列

Column{

id: row

x: 12; y:12

// 每个组件之间垂直方向间隔

spacing: 8

// 所有组件（这里使用了我自己写的可复用组件，实际上就是一个带背景颜色的正方形）

SimpleRect{}

SimpleRect{color: "deepskyblue"}

SimpleRect{color: "lightgreen"}

}

Row 行定位

水平方向，不做过多解释

Row{

id: row

x: 12; y:12

spacing: 8

SimpleRect{}

SimpleRect{color: "deepskyblue"}

SimpleRect{color: "lightgreen"}

}

Grid 栅格排列

Grid{

id: row

x: 12; y:12

rows: 2

columns: 2

spacing: 8

anchors.centerIn: parent

SimpleRect{}

SimpleRect{color: "deepskyblue"}

SimpleRect{color: "lightgreen"}

SimpleRect{color: "orange"}

}

Grid 搭配 Repeater 可以实现循环渲染元素的效果

Grid{

id: row

x: 12; y:12

rows: 4

columns: 4

spacing: 8

anchors.centerIn: parent

// 将会渲染16个，4x4排列的，由正方形组成的矩阵

Repeater{

model: 16

SimpleRect{}

}

布局项

子组件通过对其父组件的各个锚点，实现精确定位

（这类似于 android 的约束布局，欠约束的子组件将会可以被改变位置）

使用 anchors 锚点作为定位手段

水平居中与垂直居中，并附带水平和垂直方向上的偏移

Rectangle{

id: rect1

anchors.fill: parent

Rectangle{

id: rect2

width: 100; height: 100

color: "deepskyblue"

anchors.horizontalCenter: parent.horizontalCenter

anchors.verticalCenter: parent.verticalCenter

anchors.verticalCenterOffset: 10

anchors.horizontalCenterOffset: -10

}

指定方向锚点约束，并附加 margin

Rectangle{

id: rect1

anchors.fill: parent

Rectangle{

id: rect2

width: 100; height: 100

color: "deepskyblue"

anchors.top: parent.top

anchors.topMargin: 10

anchors.left: parent.left

anchors.leftMargin: 50

}

输入元素

输入元素即文本输入框 TextInput

首先看一下焦点定位与键盘切换焦点示例

import QtQuick 2.5

Rectangle {

width: 200

height: 80

color: "linen"

TextInput {

id: input1

x: 8; y: 8

width: 96; height: 20

// 是否获取焦点

focus: true

text: "Text Input 1"

// 点击键盘上的tab键后，焦点移动到哪一个组件上去

KeyNavigation.tab: input2

}

TextInput {

id: input2

x: 8; y: 36

width: 96; height: 20

text: "Text Input 2"

KeyNavigation.tab: input1

}

使用 keys 进行按键检测，是不是想到实现一个角色控制游戏了？

import QtQuick 2.5

DarkSquare {

width: 400; height: 200

GreenSquare {

id: square

x: 8; y: 8

}

focus: true

Keys.onLeftPressed: square.x -= 8

Keys.onRightPressed: square.x += 8

Keys.onUpPressed: square.y -= 8

Keys.onDownPressed: square.y += 8

Keys.onPressed: {

switch(event.key) {

case Qt.Key_Plus:

square.scale += 0.2

break;

case Qt.Key_Minus:

square.scale -= 0.2

break;

}

QT QuickControl2

简介

风格设置

官方文档对于风格设置提供了两种方式，此处就采用其中的一种，即使用 QQuickStyle

首先在 pro 文件内，添加对应库

QT += quick quickcontrols2

之后来到 main.cpp 设置我们的整体风格

注意，风格必须在 qml 初始化前设置，且一旦设置则全局使用此风格，不可变换！

#include <QGuiApplication>

#include <QQmlApplicationEngine>

// 第一步，导入头文件

#include <QQuickStyle>

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

{

#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)

QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

#endif

QGuiApplication app(argc, argv);

// 第二步，应用风格

// 这里使用了google的material风格

QQuickStyle::setStyle("Material");

...

return app.exec();

}

最后回到我们的 qml 主文件，写一段简单的代码测试一下风格

main.qml 代码清单

import QtQuick 2.12

import QtQuick.Controls 2.12

// 默认此处根组件应该是Window，我这里用了ApplicationWindow，效果是一致的

ApplicationWindow {

visible: true

width: 640

height: 480

// 创建一个列表，包含三个单选按钮

Column {

anchors.centerIn: parent

RadioButton { text: qsTr("Small") }

RadioButton { text: qsTr("Medium"); checked: true }

RadioButton { text: qsTr("Large") }

}

control 配置文件

对于普通项目，为便于开发，我们可以额外新建一个配置文件用于管理当前应用的整体风格

在与 main.qml 同级的目录下新建配置文件 qtquickcontrols2.conf (必须是这个名字！)

填入下方配置

; This file can be edited to change the style of the application

; Read "Qt Quick Controls 2 Configuration File" for details:

; http://doc.qt.io/qt-5/qtquickcontrols2-configuration.html

; 配置全局风格为MaterialDesign2

[Controls]

Style=Material

图像浏览器案例

推荐风格选择 Fusion

功能很简单，添加菜单栏和工具栏，选择文件并打开；

主要关注点为 FileDialog 的使用

下面是 main.qml 的完整代码

import QtQuick 2.12

import QtQuick.Controls 2.12

import QtQuick.Dialogs 1.2

ApplicationWindow {

visible: true

width: 640

height: 480

title: qsTr("Image Viewer")

// 顶部菜单栏

menuBar: MenuBar {

// 主菜单项

Menu {

title: qsTr("&File")

// 子菜单项

MenuItem {

text: qsTr("&Open...")

icon.name: "document-open"

// 点击后触发对应FileDialog

onTriggered: fileOpenDialog.open()

}

Menu {

title: qsTr("&Help")

MenuItem {

text: qsTr("&About...")

onTriggered: aboutDialog.open()

}

// 顶部工具栏

header: ToolBar {

// 流式布局

Flow {

anchors.fill: parent

// 工具项

ToolButton {

text: qsTr("Open")

icon.name: "document-open"

onClicked: fileOpenDialog.open()

}

// 设置背景颜色

background: Rectangle {

color: "darkGray"

}

// 图片显示组件

Image {

id: image

anchors.fill: parent

fillMode: Image.PreserveAspectFit

asynchronous: true

}

// 打开文件对话框

FileDialog {

id: fileOpenDialog

title: "Select an image file"

folder: shortcuts.documents

nameFilters: [

"Image files (*.png *.jpeg *.jpg)",

]

onAccepted: {

image.source = fileOpenDialog.fileUrl

}

// About对话框

Dialog {

id: aboutDialog

title: qsTr("About")

Label {

anchors.fill: parent

text: qsTr("QML Image Viewer\nA part of the QmlBook\nhttp://qmlbook.org")

horizontalAlignment: Text.AlignHCenter

}

standardButtons: StandardButton.Ok

}

component 组件报错问题

当我们在需要使用 Component 定义一个组件时，通常会发现编辑器报错 Unknown component (M300)

解决方法很简单，点击编辑器菜单栏的工具->QML/JS->重置代码模型即可解决

StackView

StackView 可以实现多页面的堆栈管理，类似于 android 中的 view

下方代码实现效果：点击界面实现 push 和 pop 效果，并附带自定义界面切换效果

由于要使用动画过渡属性，故导入头文件时，control 需要使用 1.4 版本的 import QtQuick.Controls 1.4

简要介绍下方代码展示的主要内容及其对应含义：

initialItem 设置初始展示页面/组件

delegate 设置当新页面 push 或者被 pop 后的过渡动画

Component 组件，根据 id 被 stackview 使用

代码清单 main.qml

import QtQuick 2.12

// 请使用1.4版本

import QtQuick.Controls 1.4

ApplicationWindow {

visible: true

width: 640

height: 480

title: qsTr("Image Viewer")

StackView {

id:sv

anchors.fill: parent

initialItem: mainView // 设置初始页面

// 设置页面push或pop后过渡动画

// 动画设置中有两个可用变量：exitItem正在退出的元素；enterItem正在加入的元素；

delegate: StackViewDelegate {

// 当动画结束后，执行的对应方法

function transitionFinished(properties)

{

properties.exitItem.x = 0

properties.exitItem.rotation = 0

}

// push插入动画

// 动画内容是：让当前组件从界面左侧移动走，然后自身再旋转360度

pushTransition: StackViewTransition {

// 顺序动画

SequentialAnimation {

ScriptAction {

script: enterItem.rotation = 90

}

PropertyAnimation {

target: enterItem

property: "x"

from: enterItem.width

to: 0

}

PropertyAnimation {

target: enterItem

property: "rotation"

from: 90

to: 0

}

PropertyAnimation {

target: exitItem

property: "x"

from: 0

to: -exitItem.width

}

// pop弹出动画

// 动画内容：组件颜色渐变（非常实用，建议copy）

popTransition: StackViewTransition {

PropertyAnimation {

target: enterItem

property: "opacity"

from: 0

to: 1

}

PropertyAnimation {

target: exitItem

property: "opacity"

from: 1

to: 0

}

// 在stackview内部定义组件

Component{

id: mainView

MouseArea{

Rectangle{

id:mvRect

width: 100; height: 100

anchors.centerIn: parent

color: "orange"

}

onClicked: sv.push(sideView) // 点击后插入新页面

}

// 定义的另一个组件

Component{

id: sideView

MouseArea{

Rectangle{

id:svRect

width: 100; height: 100

anchors.centerIn: parent

color: "deepskyblue"

}

onClicked: sv.pop() // 点击后弹出当前页面

}

外部界面文件调用案例

注意，这里全部需要使用 import QtQuick.Controls 2.2

当然了，我们不可能把所有组件或者页面都以 Component 的形式写到 stackview 里面去，我们需要对其进行充分的解构

首先来看看主文件 main.qml

import QtQuick 2.12

import QtQuick.Controls 2.2

ApplicationWindow {

visible: true

width: 640

height: 480

title: qsTr("Image Viewer")

StackView {

id:sv

anchors.fill: parent

// 加载外部组件HomeView

initialItem: HomeView{}

}

主页面代码清单 HomeView.qml

import QtQuick 2.0

import QtQuick.Controls 2.2

// Page表示页面

Page{

title: qsTr("Home")

MouseArea{

anchors.fill: parent

Label {

text: qsTr("Home Screen")

}

// sv就是我们在主页面定义的stackview组件

// push内部直接写同级目录下的qml文件，就可以插入了

onClicked: sv.push("SideView.qml")

}

副页面代码清单 SideView.qml

import QtQuick 2.0

import QtQuick.Controls 2.2

Page{

title: qsTr("Home")

Button{

id:btn

width: 120; height: 40

anchors.centerIn: parent

text: qsTr("点击返回home")

onClicked: sv.pop() // 弹出

}

这里就实现了调用外部 qml 文件来执行 push 和 pop 操作

SwipeView

类似前端中的轮播图

同样的，需要注意导入 import QtQuick.Controls 2.2

import QtQuick 2.9

import QtQuick.Controls 2.2

ApplicationWindow {

// ...

visible: true

width: 640

height: 480

title: qsTr("Side-by-side")

// 滑动视图

SwipeView {

id: swipeView

anchors.fill: parent

// 这是三个外部Page组件，用于组成视图

Current {

}

UserStats {

}

TotalStats {

}

// ...

}

// 导航指示点

PageIndicator {

anchors.bottom: parent.bottom

anchors.horizontalCenter: parent.horizontalCenter

currentIndex: swipeView.currentIndex

}

// ...

}

我们随机找一个 swipeview 用到的外部组件，该组件很简单，根部是 Page，点击按钮返回第一个轮播项

代码清单 TotalStats.qml

import QtQuick 2.9

import QtQuick.Controls 2.2

// 和stackview一样，这里的外部组件依然需要使用page定义

Page {

header: Label {

text: qsTr("Community Stats")

font.pixelSize: Qt.application.font.pixelSize * 2

padding: 10

}

Column {

anchors.centerIn: parent

spacing: 10

Label {

anchors.horizontalCenter: parent.horizontalCenter

text: qsTr("Community statistics")

}

Button {

anchors.horizontalCenter: parent.horizontalCenter

text: qsTr("Back")

onClicked: swipeView.setCurrentIndex(0); // 点按钮回到第一个轮播项

}

由于内容比较简单，其余的两个轮播项就不一一展示代码了，反正也就是对应的使用 Page 组件即可！

优秀的QML项目

小弟不才，我的项目，优质谈不上，但是都是开源的。

这里分享其他十分优秀的项目：

mikalv/awesome-qt-qml

quickly/quickly ES6 and Node.js-like environment for QML
GitHub - MidoriYakumo/learnopengl-qt3d: QML/Qt3D version of http://learnopengl.com examples Qt3D 的学习项目
GitHub - qmlbook/qmlbook: The source code for the upcoming qml book 强烈推荐，然后有中文的哦~

GitHub - trollixx/node.qml: A port of Node.js to QML GitHub - papyros/qml-material: Material Design implemented in QtQuick

彩阳的 Qt3D 教程配套代码：GitHub - jiangcaiyang/Tutorial3D: This tutorial mainly focuses on Qt 3D and its usages, Every commit is a step that tells how to build a project from scratch.
GitHub - wearyinside/qmlparticleeditorQML 制作的例子编辑器。

GitHub - wearyinside/qmlcreator

GitHub - jan0e/QMLemoji: An Emoji picker written in QML 不过我只在电脑上测试通过，安卓手机上效果不佳或者没有效果。
GitHub - 188080501/QmlDesignerPlus QmlDisigner二次开发计划，显著提升 QmlDisigner 用户体验。
188080501/JQTools 基于Qt开发的小工具包

GitHub - neterror/qmlhex: QML hex editor GitHub - toby20130333/qmlpathview: 基于QML PathView实现的一些效果

GitHub - toby20130333/qtquickqrencode: qrencode plugins use in qml QtQuick 上二维码解决办法之一。
GitHub - retf/qt-android-native-web-view-example: Automatically exported from code.google.com/p/qt-android-native-web-view-example 现在 Qt 官方对于手机应用的网页支持，一般解决方案是在 QSuface 上绘制原生网页。
GitHub - toby20130333/qtioswebview: a qtquick application using ios UIView
GitHub - brexis/qml-bootstrap: Sweet Qml compoments inspired from Ionic framework style for mobile and desktop Qt/Qml projects
GitHub - bckmnn/qml-qt-snippets: collection of useful snippets for qt/qml
GitHub - xiangzhai/qwx: WeChat Qt frontend 微信Qt前端
GitHub - penk/qml-handwriting: Open source handwriting recognition keyboard written in QML/JavaScript qml 手写支持。
GitHub - 15th/qmlStyle: qt qml样式最近一次更新大概是半年前。
GitHub - MartinBriza/2048.qml: 2048 clone written in pure QML. No C++ wrappers needed.
GitHub - yeatse/moebox: 萌音盒子虽然使用的是塞班 + Qt4，但是项目组织和设计上可以学习学习。
Ecohnoch/Mota-Editor 魔塔编辑器，一款游戏框架

推荐一些 github 用户吧

iBelieve (Michael Spencer)
trollixx (Oleg Shparber) · GitHub
iBeliever (Michael Spencer) · GitHub
wearyinside (Oleg Yadrov) · GitHub
foruok · GitHub 安晓辉老师
toby20130333 (一衣带水) · GitHub
yeatse (Yeatse CC) · GitHub PS 在塞班时代就使用 qml 开发应用，所以如果要开发手机应用，可以参照这位大神的项目。
jiangcaiyang · GitHub
Ecohnoch (xcy) game maker
MidoriYakumo (MidoriYakumo)
188080501 (Jason)
https://github.com/qyvlik 恩，还有我。

以上名单只是一小部分，还有更多的优秀开发者需要我们自己去挖掘了。

QML开发简单浏览器（加载H5）

QML开发浏览器以及加载HTML5页面，主要利用QML的WebEngineView可实现对网页的加载。

导入WebEngineView模块，在.pro文件中写入

QT += qml quick webview webengine

其代码如下：

import QtQuick 2.4

import QtQuick.Layouts 1.2

import QtQuick.Controls 1.4

import QtQuick.Controls.Styles 1.4

import QtWebEngine 1.1

Rectangle {

id: root

width: 800

height: 600

Rectangle {

id: edit_area

width: parent.width

height: 70

anchors {

left: parent.left

right: parent.right

}

color: "#E4EEF9"

Button {

id: goBack_click

anchors {

left: parent.left

leftMargin: 5

verticalCenter: edit_area.verticalCenter

}

width: 30

height: url_edit.height

property color bgColor: webView.canGoBack?"blue":"gray"

style: ButtonStyle {

background: Rectangle {

anchors.fill: parent

color: goBack_click.bgColor

radius: width/2

}

label: Label {

text: "<-"

font.pixelSize: 20

}

onClicked: {

webView.goBack()

}

Button {

id: goForward_click

anchors {

left: goBack_click.right

leftMargin: 2

verticalCenter: edit_area.verticalCenter

}

width: 30

height: url_edit.height

property color bgColor: webView.canGoForward?"blue":"gray"

style: ButtonStyle {

background: Rectangle {

anchors.fill: parent

color: goForward_click.bgColor

radius: width/2

}

label: Label {

text: "->"

font.pixelSize: 20

}

onClicked: {

webView.goForward()

}

TextField {

id: url_edit

width: parent.width-150

height: 27

anchors {

left: goForward_click.right

leftMargin: 5

rightMargin: 80

verticalCenter: parent.verticalCenter

}

placeholderText: qsTr("请输入网址")

focus: true

font.pixelSize: 16

}

Button {

id: enter_click

anchors {

left: url_edit.right

leftMargin: 5

verticalCenter: edit_area.verticalCenter

}

width: 60

height: url_edit.height

style: ButtonStyle {

background: Rectangle {

anchors.fill: parent

color: "blue"

radius: 5

}

label: Label {

text: "go>>>"

font.pixelSize: 20

}

onClicked: {

webView.url = "https://" + url_edit.text

url_edit.text = webView.url

}

Keys.onReturnPressed: {

webView.url = "https://" + url_edit.text

url_edit.text = webView.url

}

WebEngineView {

id: webView

anchors {

top: edit_area.bottom

left: parent.left

right: parent.right

bottom: parent.bottom

margins: 1

}

//url: "https://www.baidu.com"

smooth: true

visible: true

onNewViewRequested: request.openIn(webView)

onUrlChanged: {

url_edit.text = webView.url

}

QML的中属性和子对象

带冒号:表示是属性，没有表示是子对象

ApplicationWindow {

id: window //属性

width: 360

height: 520

visible: true

title: "Qt Quick Controls 2"

//flags:Qt.FramelessWindowHint //添加了这一句

Settings {

id: settings

property string style: "Default"

}//子对象Settings,添加的子对象

Shortcut {

sequences: ["Esc", "Back"]

enabled: stackView.depth > 1

onActivated: {

stackView.pop()

listView.currentIndex = -1

}

Shortcut {

sequence: "Menu"

onActivated: optionsMenu.open()

}

header: ToolBar {

注册C++对象在QML中使用

qmlRegisterType<ColorMaker>("an.qt.ColorMaker", 1, 0, "ColorMaker");

import an.qt.ColorMaker 1.0

ColorMaker {

id: colorMaker;

color: Qt.green;

}

还可以赋予全局对象

viewer.rootContext()->setContextProperty("colorMaker", new ColorMaker);

一旦调用 setContextProperty() 导出了属性，就可以在 QML 中使用了，不需要 import 语句哦。下面是 main.qml 修改后的代码：

Button {

id: start;

text: "start";

anchors.left: parent.left;

anchors.leftMargin: 4;

anchors.bottom: parent.bottom;

anchors.bottomMargin: 4;

onClicked: {

colorMaker.start();

}

setContextProperty qmlRegisterType qRegisterMetaType等区别

1，setContextProperty

如果要使用单个全局类来访问QML或从QML访问.这里您需要在使用setContextProperty()之前创建此类对象。就是说类实列化一次，QML中可以直接使用这个类。

如：

MainController mainController;

engine.rootContext()->setContextProperty("MainController", &mainController);

则QML中可直接使用 MainController。

2，qmlRegisterType

将C++实现的类在QML中调用的。与1 不一样，全局不唯一。

如：

qmlRegisterType<AgoraWeb>("AgoraWeb",1,0,"AgoraWeb");

每个QML中会自己实例化一份内存。

Item {

id:root

property bool isMaster: false

AgoraWeb{

id:agoraWeb

}

3，qRegisterMetaType

Qt信号槽中使用自定义类型，需要注意使用qRegisterMetaType对自定义类型进行注册

步骤：(以自定义TextNumber类型为例）

自定一种类型，在这个类型的顶部包含：#include <QMetaType>

在类型定义完成后，加入声明：Q_DECLARE_METATYPE(TextNumber);

在main()函数中注册这种类型：qRegisterMetaType<TextNumber>("TextNumber");

如果还希望使用这种类型的引用，可同样要注册：qRegisterMetaType<TextNumber>("TextNumber&")

纯QML实现画图工具

首先，介绍整体布局为。最上侧是菜单，下面是工具条，中间是Canvas（画布）,最底侧是状态栏。

1.菜单栏设计

为实现分页显示不同的工具，采用TabView进行布局。代码如下：

import QtQuick 2.0

import QtQuick.Controls 1.2

import QtQuick.Controls.Styles 1.2

import QtQuick.Window 2.0

import QtQuick.Dialogs 1.2

//菜单选项

Rectangle{

id:root

height: 120

width: appWindow.width

property color paintColor //绘制颜色

property string picPath:""//图片路径

TabView{

width: appWindow.width

id:tabView

Tab{

title: "文件"

Rectangle {

id: see

width: appWindow.width

anchors {

horizontalCenter: parent.horizontalCenter

top: parent.top

topMargin: 8

}

color: "transparent"

Row{

spacing: 5

Column{

Row{

spacing: 5

PicButton{

width: 50

height: 64

isImageVisible: true

imagePath: "res/new.png"

rectColor: "transparent"

describle: "新建"

onClicked: {

messageDialog.text="是否保存？"

messageDialog.standardButtons=StandardButton.Yes | StandardButton.No

messageDialog.icon=StandardIcon.Question

messageDialog.open()

}

PicButton{

width: 50

height: 64

isImageVisible: true

imagePath: "res/open.png"

rectColor: "transparent"

describle: "打开"

onClicked: {

fileDialog.open()

fileDialog.selectExisting=true

}

PicButton{

width: 50

height: 64

isImageVisible: true

imagePath: "res/save.png"

rectColor: "transparent"

describle: "保存"

onClicked:{

fileDialog.selectExisting=false

fileDialog.open()

}

PicButton{

width: 50

height: 64

isImageVisible: true

imagePath: "res/saveOther.png"

describle: "另存"

onClicked:{

fileDialog.selectExisting=false

fileDialog.open()

}

Rectangle{

width: parent.width

height: 25

color:"#F5F6F7"

anchors.horizontalCenter: parent.horizontalCenter

Text{

text:"文件操作"

color:"#929292"

anchors.centerIn: parent

}

//分隔符

Rectangle{height: 64;width: 1;color:"#E2E3E4";}

Column{

Row{

spacing: 5

PicButton{

width: 50

height: 64

isImageVisible: true

imagePath: "res/print.png"

rectColor: "transparent"

describle: "打印"

onClicked: appWindow.showFullScreen()

}

PicButton{

width: 50

height: 64

isImageVisible: true

imagePath: "res/exit.png"

rectColor: "transparent"

describle: "退出"

onClicked: Qt.quit()

}

Rectangle{

width: parent.width

height: 25

color:"#F5F6F7"

anchors.horizontalCenter: parent.horizontalCenter

Text{

text:"操作"

color:"#929292"

anchors.centerIn: parent

}

FileDialog {

id: fileDialog;

title: qsTr("Please choose an image file");

nameFilters:["PNG(*.png)","JPEG(*.jpg *.jpeg *.jpe)","GIF(*.gif)","位图(*.bmp)"]

property int isSave: 1 //判断是打开还是保存操作

onAccepted: {

if(!fileDialog.selectExisting)

if(canvas.saveImage(picPath))

{

messageDialog.title="提示"

messageDialog.text="保存成功！"

messageDialog.icon=StandardIcon.Information

messageDialog.standardButtons=StandardButton.Ok

messageDialog.open()

}

var filepath = new String(fileUrl);

if(Qt.platform.os == "windows")

root.picPath= filepath.slice(8);

else

root.picPath = filepath.slice(7);

}

//弹窗提示

MessageDialog {

id: messageDialog

onAccepted: {

console.log("do samething")

}

onYes: {fileDialog.selectExisting=false;fileDialog.open();}

onNo: canvas.newImage()

}

Tab{

title: "设置"

Rectangle {

id: colorTools

width: appWindow.width

anchors {

horizontalCenter: parent.horizontalCenter

top: parent.top

topMargin: 8

}

color: "transparent"

Row{

spacing: 5

anchors.left: parent.left

anchors.leftMargin: 15

Column{

Row{

spacing: 5

//设置线宽

PicButton{

id:selectWeight

width:50

height: grid.height

imagePath: "res/weight.png"

describle: "粗细"

isImageVisible:true

onClicked: {

listWeight.visible=listWeight.visible==true?false:true;

listWeight.z=3

}

//分隔符

Rectangle{height: grid.height;width: 1;color:"#E2E3E4";}

//选中的颜色

PicButton{

id:selectRect

width:50

height: grid.height

describle: "颜色"

}

//分隔符

Rectangle{height: grid.height;width: 1;color:"#E2E3E4";}

//色彩网格

Grid{

id:grid

columns: 7

rows:2

spacing: 2

Repeater {

model: ["#33B5E5", "#99CC00", "#FFBB33", "#FF4444","#DD6644","#AA4444","#FFBB33", "#FF4444","#DD6644","#AA4444","#FFBB33", "#FF4444","#DD6644","#AA4444"]

ColorGrid {

id: red

color: modelData

onClicked:{

selectRect.rectColor=color

root.paintColor = color

}

//分隔符

Rectangle{height: grid.height;width: 1;color:"#E2E3E4";}

//颜色对话框

PicButton{

id:editRect

width:50

height: grid.height

isImageVisible: true

imagePath: "res/pic.png"

rectColor: "transparent"

describle: "编辑"

onClicked: colorD.open()

ColorDialog{

id:colorD

onColorChanged: {selectRect.rectColor=color;root.paintColor=color;}

}

//分隔符

Rectangle{height: grid.height;width: 1;color:"#E2E3E4";}

}

Rectangle{

width: grid.width

height: 30

color:"#F5F6F7"

anchors.horizontalCenter: parent.horizontalCenter

Text{

text:"颜色"

color:"#929292"

anchors.centerIn: parent

}

//形状设置

Column{

Grid{

id:xz

width: 200

height: 60

Repeater{

model:[]

}

Rectangle{

width: xz.width

height: 30

color:"#F5F6F7"

anchors.horizontalCenter: parent.horizontalCenter

Text{

text:"形状"

color:"#929292"

anchors.centerIn: parent

}

Tab{

title: "查看"

Rectangle {

id: show

width: appWindow.width

anchors {

horizontalCenter: parent.horizontalCenter

top: parent.top

topMargin: 8

}

color: "transparent"

Row{

spacing: 5

Column{

Row{

spacing: 5

PicButton{

width: 50

height: 64

isImageVisible: true

imagePath: "res/increase.png"

rectColor: "transparent"

describle: "放大"

onClicked: {

if( statusbar.sliderValue+0.25>1)

statusbar.sliderValue=1;

else

statusbar.sliderValue= statusbar.sliderValue+0.25

}

PicButton{

width: 50

height: 64

isImageVisible: true

imagePath: "res/decrease.png"

rectColor: "transparent"

describle: "缩小"

onClicked: {

if( statusbar.sliderValue-0.25<-1)

statusbar.sliderValue=-1;

else

statusbar.sliderValue= statusbar.sliderValue-0.25

}

PicButton{

width: 50

height: 64

isImageVisible: true

imagePath: "res/big.png"

describle: "100%"

onClicked: statusbar.sliderValue=0;

}

Rectangle{

width: parent.width

height: 25

color:"#F5F6F7"

anchors.horizontalCenter: parent.horizontalCenter

Text{

text:"缩放"

color:"#929292"

anchors.centerIn: parent

}

//分隔符

Rectangle{height: 64;width: 1;color:"#E2E3E4";}

Column{

Row{

spacing: 5

PicButton{

width: 50

height: 64

isImageVisible: true

imagePath: "res/fullScreen.png"

rectColor: "transparent"

describle: "全屏"

onClicked: appWindow.showFullScreen()

}

PicButton{

width: 50

height: 64

isImageVisible: true

imagePath: "res/exitFull.png"

rectColor: "transparent"

describle: "退出"

onClicked: appWindow.showNormal()

}

Rectangle{

width: parent.width

height: 25

color:"#F5F6F7"

anchors.horizontalCenter: parent.horizontalCenter

Text{

text:"显示"

color:"#929292"

anchors.centerIn: parent

}

style:TabViewStyle{

frameOverlap: 1

tab: Rectangle {

color: styleData.selected ? "#F5F6F7" :"#FFFFFF"

implicitWidth: Math.max(text.width + 4, 100)

implicitHeight: 30

radius: 1

Text {

id: text

anchors.centerIn: parent

text: styleData.title

color: "black"

font.pixelSize: 12

}

frame: Rectangle {

width: appWindow.width

color: "#F5F6F7"

}

2.工具栏，采用ToolBar设计。代码如下：

ToolBar{

id:toolBar

anchors.top: menuBar.bottom

Row{

anchors.verticalCenter: parent.verticalCenter

spacing: 5

ToolButton{

width:25

height: 25

tooltip: "保存"

iconSource: "./res/save.png"

}

ToolButton{

width:25

height: 25

tooltip: "撤销"

iconSource: "./res/revoke.png"

}

ToolButton{

width:25

height: 25

tooltip: "恢复"

iconSource: "./res/undo.png"

}

Rectangle{

width:25

height: 25

color: menuBar.paintColor

border.color: "gray"

border.width: 1

}

3. 中间画布使用QML自己的Canvas 实现代码如下：

import QtQuick 2.3

import QtQml 2.0

import QtQuick.Controls 1.2

import QtQuick.Controls.Styles 1.2

import QtQuick.Window 2.0

import QtGraphicalEffects 1.0

Rectangle{

id:root

width:500*statusbar.rate

height: 300*statusbar.rate

property alias mouseX: area.mouseX

property alias mouseY: area.mouseY

property string imgPath: menuBar.picPath

signal save(string str)

property double lineWidth: 1 //线宽

property color paintColor: menuBar.paintColor //画笔颜色

property var ctx: canvas.getContext('2d')

function saveImage(imgName)

{

return canvas.save(imgName)

}

//新建画布，清除画布

function newImage()

{

ctx.clearRect(0,0,canvas.width,canvas.height)

canvas.requestPaint()

}

function rePaint()

{

}

Image{

id:imgP

source:{

if(imgPath!="")

"file:///"+imgPath;

else

"";

}

visible: false

width:canvas.width

height: canvas.height

}

Timer{

interval: 100

running: true

triggeredOnStart: true

repeat: true

onTriggered: canvas.requestPaint()

}

// Image{

// id:picImg

// anchors.fill: parent

// }

//画板

Canvas {

id: canvas

anchors.fill: parent

antialiasing: true

property real lastX //画笔的终止位置

property real lastY

//opacity: 0

onImageLoaded: {

if(canvas.isImageLoaded(imgP.source))

{

console.log("imps")

}

if(canvas.isImageError(imgP.source))

{

console.log("impE")

}

onPaint: {

if(imgP.source!="")

ctx.drawImage(imgP,0,0)

ctx.lineWidth = lineWidth

ctx.strokeStyle = paintColor

ctx.beginPath()

ctx.moveTo(lastX, lastY)

lastX = area.mouseX

lastY = area.mouseY

ctx.lineTo(lastX, lastY)

ctx.stroke()

}

MouseArea {

id: area

anchors.fill: parent

acceptedButtons: Qt.AllButtons

onPressed: {

canvas.lastX = mouseX

canvas.lastY = mouseY

}

onPositionChanged: {

canvas.requestPaint()

}

onClicked: {

if(mouse.button==Qt.RightButton)

contentMenu.popup();

// var url=canvas.toDataURL('image/png');

// picImg.source=url;

}

//鼠标形状改变

cursorShape: (containsMouse? (pressed? Qt.CrossCursor: Qt.ArrowCursor): Qt.ArrowCursor);

Menu { // 右键菜单

//title: "Edit"

id: contentMenu

MenuItem {

text: "新建"

shortcut: "Ctrl+N"

onTriggered: {}

}

MenuItem {

text: "保存"

shortcut: "Ctrl+S"

onTriggered: {}

}

MenuItem {

text: "粘贴"

shortcut: "Ctrl+V"

onTriggered: {}

}

MenuSeparator { }

Menu {

title: "More Stuff"

MenuItem {

text: "Do Nothing"

}

//左侧

Rectangle{

width: 5

height: 5

x:parent.width

y:parent.height/2

border.color: "black"

border.width: 1

MouseArea{

id:xRate

anchors.fill: parent

cursorShape: (containsMouse? (pressed? Qt.SizeHorCursor: Qt.ArrowCursor): Qt.ArrowCursor);

drag.target: parent

onPositionChanged: {

root.width=parent.x

}

//下侧

Rectangle{

width: 5

height: 5

border.color: "black"

border.width: 1

x:parent.width/2

y:parent.height

Drag.active: yRate.drag.active

Drag.hotSpot.x: 10

Drag.hotSpot.y: 10

MouseArea{

id:yRate

anchors.fill: parent

cursorShape: (containsMouse? (pressed? Qt.SizeVerCursor: Qt.ArrowCursor): Qt.ArrowCursor);

drag.target: parent

onPositionChanged: {

root.height=parent.y

}

//对角

Rectangle{

width: 5

height: 5

x:parent.width

y:parent.height

border.color: "black"

border.width: 1

Drag.active: xyRate.drag.active

Drag.hotSpot.x: 10

Drag.hotSpot.y: 10

MouseArea{

id:xyRate

anchors.fill: parent

cursorShape: (containsMouse? (pressed? Qt.SizeFDiagCursor: Qt.ArrowCursor): Qt.ArrowCursor);

drag.target: parent

onPositionChanged: {

root.width=parent.x

root.height=parent.y

}

3.底部状态栏设计，左侧为鼠标坐标，中间为图像大小，右侧为缩放比例调整。代码如下：

import QtQuick 2.0

import QtQuick.Controls 1.2

import QtQuick.Controls.Styles 1.2

Rectangle {

color: "#F0F0F0";

implicitHeight: 30;

width: parent.width;

property string position: "" //位置坐标

property int pWidth: 0 //图像宽度

property int pHeight: 0 //图像高度

property alias sliderValue:pslider.value //放大缩小值

//放大倍数

property double rate: {

if(pslider.value==0)1;

else

(1+pslider.value).toFixed(2)

}

Row{

anchors.left: parent.left

anchors.leftMargin: 10

anchors.verticalCenter: parent.verticalCenter

Image{

width: 20

height: 20

source: "./res/pic.png"

anchors.verticalCenter: parent.verticalCenter

}

Text{

id:pos

anchors.verticalCenter: parent.verticalCenter

text:" "+position

}

Row{

anchors.verticalCenter: parent.verticalCenter

anchors.horizontalCenter: parent.horizontalCenter

Image{

width: 20

height: 20

source: "./res/pic.png"

anchors.verticalCenter: parent.verticalCenter

}

Text{

id:pix

text:" "+pWidth+" x "+pHeight+"像素"

anchors.verticalCenter: parent.verticalCenter

}

Row{

anchors.right: parent.right

anchors.rightMargin: 10

anchors.verticalCenter: parent.verticalCenter

spacing: 5

Text{

id:pre //百分比

color: "black"

anchors.verticalCenter: parent.verticalCenter

text:{

if(pslider.value==0)

"100%"

else

(1+pslider.value).toFixed(2)*100+"%"

}

Image{

width: 20

height: 20

source: "./res/decrease.png"

MouseArea{

anchors.fill: parent

onClicked: {

if( pslider.value-0.25<-1)

pslider.value=-1;

else

pslider.value=pslider.value-0.25

}

Slider {

id:pslider

minimumValue: -1

maximumValue: 1

value:0

style: SliderStyle {

groove: Rectangle {

implicitWidth: 150

implicitHeight: 5

color: "#F0F0F0"

border.color: "lightgray"

border.width: 1

}

handle: Rectangle {

anchors.centerIn: parent

color: control.pressed ? "blue" : "lightgray"

implicitWidth: 12

implicitHeight: 20

}

onValueChanged: {

var img=canvas.ctx.getImageData(0, 0, canvas.width, canvas.height)

canvas.ctx.putImageData(img, 0, 0)

}

Image{

width: 20

height: 20

source: "./res/increase.png"

MouseArea{

anchors.fill: parent

onClicked: {

if( pslider.value+0.25>1)

pslider.value=1;

else

pslider.value= pslider.value+0.25

}

最终的设计效果如下：

qml中loader加载页面会闪屏_Qml动态语言切换

此方法需要在Qt5.10或更高版本实现, 在Qt5.10或更高版本实现, 在Qt5.10或更高版本实现重要的事情说三遍

首先在工程文件.pro中加入TRANSLATIONS = zh_CN.ts en_US.ts 两个翻译文件, 支持中英文两种语言切换

在工程目录下 cmd 执行

lupdate main.qml -ts zh_CN.ts

lupdate main.qml -ts en_US.ts

执行完后在代码目录里就可以看到生成了 zh_CN.ts, en_US.ts 两个翻译文件接下来用Qt的Linguist分别打开和编辑ts文件

然后点击各个源文中的项, 并在下面的译文中填写与语言对应的文字就行了. 全部填写完成, 再运行菜单文件->发布就会生成对应的.qm文件. 这个文件就是我们程序在实际运行中需要加载的翻译文件了.

代码中的加载过程:

void QmlLanguage::setLanguage(int nLanguage)

{

QTranslator translator;

if (nLanguage == 0)

{

translator.load(":/en_US.qm");

}else{

translator.load(":/zh_CN.qm");

}

m_app->installTranslator(&translator);

m_engine->retranslate();

}

重点的是这句 m_engine->retranslate(); Qt5.10的新方法, 使Qml界面全部动态重新翻译

然后执行【工具】-》【外部】-》【QT语言家】-》【更新翻译(lupdate)】，如下图所示，执行完之后项目下就会生成对应的XXX.ts、YYY.ts文件。

利用QT语言家：Linguist打开生成的ts文件，将里面需要翻译的地方写上对应的语言，如下图所示：

ts文件翻译完成后，执行Qt Creator中的【工具】-》【外部】-》【QT语言家】-》【部署翻译(lrelease)】就会生成最终要用到的qm文件，如下图所示：

3. 加载qm语言包

到这里qm语言包制作完成，工作就完成了一大半了。接下来的任务就是在代码中实现语言包的加载，即：根据不同的选择加载不同的语言包。

void LHSyncClientPrivate::InitUiByLanguage(const QString strLanguage)

{

if (strLanguage.isEmpty())

{

return;

}

QString strLanguageFile;

if (strLanguage.compare("en") == 0)

{

strLanguageFile = qApp->applicationDirPath() + QString("/languages/%1/%2").arg(LHT_SYNCCLIENT_VERSION_PRODOCUTNAME).arg(LHT_SYNCCLIENT_EN_FILE);

}

else if (strLanguage.compare("zh") == 0)

{

strLanguageFile = qApp->applicationDirPath() + QString("/languages/%1/%2").arg(LHT_SYNCCLIENT_VERSION_PRODOCUTNAME).arg(LHT_SYNCCLIENT_ZH_FILE);

}

if (QFile(strLanguageFile).exists())

{

m_translator->load(strLanguageFile);

qApp->installTranslator(m_translator);

}

else

{

qDebug() << "[houqd] authclient language file does not exists ...";

}

其中，m_translator即为QTranslator实例，在类的构造函数中赋值：m_translator = new QTranslator；实现过程很简单，就是取得语言包的绝对路径，然后利用QTranslator来加载它，最后利用qApp->installTranslator(m_translator)来安装。

4. 重新设置界面显示

重新设置界面的显示，这一步是很多人容易忘记的一步，如果这儿被忽略了，往往就无法完成语言的切换，即：重新设置一下需要显示的元素，该过程是在上面InitUiByLanguage过程之后进行的，相关代码如下：

void LHSyncClientPrivate::RetranslateUi()

{

m_wgtSync->setWindowTitle(tr("Drive Client"));

//! 左侧同步信息

m_btnSynchronizing->setText(tr("Synchronizing"));

m_btnSynchronized->setText(tr("Synchronized"));

//! 右侧面板

m_lblSyncStatus->setText(tr("looking for files changes..."));

m_lblShowRecordsNum->setText(tr("There are n records ..."));

m_btnSyncOrPause->setText(tr("Sync Or Pause"));

m_btnClearAll->setText(tr("Clear all"));

m_btnSyncOrPause->setText(tr("Sync Or Pause"));

m_btnClose->setText(tr("Close"));

m_actSync->setText(tr("Sync Info"));

}

实现效果：

好了，到这里整个语言包的制作过程就基本完成了。这里还需要提及一点在网盘客户端实现时的设计思路：由于网盘在登录前和登录后可操作的菜单是不一样的，要涉及一种动态加载的方式，可以实现一个UiLoader的插件，它实现所有的窗体加载（即LoadUi()返回QWidget句柄）、菜单加载、语言切换，在这些功能中可能UiLoader插件并不完成具体的工作，而仅仅是实现信号的转发功能。同样，也需要实现一个逻辑控制插件，它负责所有的菜单逻辑，而对于每个窗体则由各自的窗体插件自行完成。多语言切换的实现效果如下：

切换为中文：

切换后效果：

加油，坚持每天的学习！！

Qml元素

Qml元素Reactangle ｛ text{} //表示里面含的别的元素 img:image{}表示里面有个属性img是一个image对象

qml全屏

qml全屏，以下代码为在Qt下实现全屏代码，为避免出现排版混乱，需要在代码前加入站位字符，具体情况可更具代码的乱码情况进行处理

import QtQuick 2.12

import QtQuick.Window 2.12

Window {

visible: true

y:10

width: fullScreen ? 640 : Screen.desktopAvailableWidth

height: fullScreen ? 480 : Screen.desktopAvailableHeight

title: qsTr("Hello World")

property bool fullScreen: true

flags: fullScreen ? Qt.Window : Qt.FramelessWindowHint

MouseArea{

anchors.fill: parent

onClicked: {

fullScreen = !fullScreen

}

QML学习体会

ApplicationWindow

{

header:ToolBar{   //表示ApplicationWindow里有个对象属性是header区域，然后这个里面赋了一个                        //ToolBar对象

}

//下面生成一个toolbar

ToolBar{

}:

}

C++与QML交互

C++与QML交互,可能是由于内容开始是网络地址（http://...）完整的英文词截取后不能换行造成为避免代码造成手机端排版的混乱，可适当增加文字描述,将代码往后推移

将类注册上去

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

{

QGuiApplication app(argc,argv);

qmlRegisterType<ColorMaker>("an,qt.ColorMaker",1,0,"ColorMaker");

QQuickView viewer;

viewer.setResizeMod(QQuickView::SizeRootObjectToView);

viewer.setSource(qUrl("Qrc://main.qml"));

viewer.show();

return

}

在QML中使用

import an.qt.ColorMaker 1.0

ColorMaker{

id:colorMaker;

color:Qt.green;

}

以属性方式

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

{

QGuiApplication app(argc,argv);

QQuickView viewer;

viewer.setResizeMode(QQUickView::SizeRootObjectToView);

viewer.rootContext()->setContentProperty("colorMaker",new ColorMaker);

viewer.setSource(QUrl("qrc://main.qml");

viewer.show();

return app.exec();

}

一旦调用setContextProperty()导出了属性，就可以在QML中使用了，不需要import语句了

main.qml修改为

import QtQuick 2.2

import QtQuick.Controls 1.2

//import an.qt.ColorMaker 1.0

ColorMaker{

id:colorMaker;

color:Qt.green;

}

使用:

function(){

colorMaker.start();

}

C++中使用QML对象

QuickView获得,QQmlApplicationEngine

QuickView.engine()

QML文件

import QtQuick 2.9

Item{

id: root

width: 100

height: 100

//自定义属性 --cpp可以访问

property string msg: "gongjianbo1992"

//自定义信号 --可以触发cpp槽函数

signal qmlSendMsg(string msg)

Rectangle {

anchors.fill: parent

color: "green"

objectName: "rect"

}

MouseArea {

anchors.fill: parent

onClicked: {

console.log("qml clicked, send qmlSendMsg signal")

root.qmlSendMsg(root.msg)

}

onHeightChanged: console.log("qml height changed")

onWidthChanged: console.log("qml width changed")

//QML中的方法可以被cpp调用

function qml_method(val_arg){

console.log("qml method",val_arg)

return "ok"

}

在QML中我定义了一些属性和方法等，用于测试。

//file CppObj.h

#ifndef CPPOBJ_H

#define CPPOBJ_H

#include <QObject>

#include <QDebug>

class CppObj : public QObject

{

Q_OBJECT

public:

explicit CppObj(QObject *parent = Q_NULLPTR)

:QObject(parent){}

public slots:

//槽函数 --用来接收qml的信号

void cppRecvMsg(const QString &msg){

qDebug()<<"cpp recv msg"<<msg;

}

};

#endif // CPPOBJ_H

Cpp中定义了一个槽函数，用来接收QML对象的信号。

//file main.cpp

#include <QGuiApplication>

#include <QQmlProperty>

#include <QQuickView>

#include <QQuickItem>

#include <QMetaObject>

#include <QDebug>

#include "CppObj.h"

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

{

QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

QGuiApplication app(argc, argv);

//可以使用QQmlComponent或QQuickView的C++代码加载QML文档

//QQuickView不能用Window做根元素

QQuickView view(QUrl("qrc:/main.qml"));

view.show();

QObject *qmlObj=view.rootObject();

/* 应该始终使用QObject::setProperty()、QQmlProperty

* 或QMetaProperty::write()来改变QML的属性值，

* 以确保QML引擎感知属性的变化。

//通过QObject设置属性值

//qmlObj->setProperty("height",200);

QQmlProperty(qmlObj,"height").write(200);

//通过QObject获取属性值

qDebug()<<"qml root height"<<qmlObj->property("height");

//任何属性都可以通过C++访问

qDebug()<<"qml property msg"<<qmlObj->property("msg");

QQuickItem *item=qobject_cast<QQuickItem*>(qmlObj);

//通过QQuickItem设置属性值

item->setWidth(200);

//通过QQuickItem获取属性值

qDebug()<<"qml root width"<<item->width();

//通过objectName访问加载的QML对象

//QObject::findChildren()可用于查找具有匹配objectName属性的子项

QObject *qmlRect=qmlObj->findChild<QObject*>("rect");

if(qmlRect){

qDebug()<<"qml rect color"<<qmlRect->property("color");

}

//调用QML方法

QVariant val_return; //返回值

QVariant val_arg="=.=!"; //参数值

//Q_RETURN_ARG()和Q_Arg()参数必须制定为QVariant类型

QMetaObject::invokeMethod(qmlObj,

"qml_method",

Q_RETURN_ARG(QVariant,val_return),

Q_ARG(QVariant,val_arg));

qDebug()<<"qml method return value"<<val_return; //函数中返回“ok”

//关联qml信号与cpp槽

//如果信号参数为QML对象类型，信号用var参数类型，槽用QVariant类型接收

CppObj cppObj;

QObject::connect(qmlObj,SIGNAL(qmlSendMsg(QString)),

&cppObj,SLOT(cppRecvMsg(QString)));

return app.exec();

}

然后就把文档中的东西测试了下，操作起来很简单。不想相对于QML中使用C++对象来说，感觉作用没那么大，毕竟QML访问C++也可以改变C++对象的状态，可能时我还没想到合适的应用场景。下面是我的测试输出结果：

QML debugging is enabled. Only use this in a safe environment.

qml: qml height changed

qml root height QVariant(double, 200)

qml property msg QVariant(QString, "gongjianbo1992")

qml: qml width changed

qml root width 200

qml rect color QVariant(QColor, QColor(ARGB 1, 0, 0.501961, 0))

qml: qml method =.=!

qml method return value QVariant(QString, "ok")

qml: qml clicked, send qmlSendMsg signal

cpp recv msg "gongjianbo1992"

以上两种方式应该就是最简单的QML与C++交互应用了，对照文档或是博客敲一遍代码可以很容易地理解

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

{

QGuiApplication app(argc,argv);

QQmlApplicationEngine engine;

engine.load(QUrl("qrc://main.qml"));

QObject *root=NULL;

Qlist<QObject *>rootObjects=engine.rootObjects();

int count=rootObjects.size();

for(int i=0;i<count;i++)

{

if(rootObjects.at(i)->objectName()=="rootObject")

{

root=rootObjects.at(i);

break;

}

QObject *quitButton=root->findChild<QTObject *>("quitButton");;

if(quitButton!=NULL)

{

QObject::connect(quitButton,SIGNAL(clicked()),&app,SLOT(quit());

}

QObject *textLabel=root->findChild<QObject *>("textLabel");

if(textLabel)

{

bool bRet=QMetaObject::invokeMethod(textLabel,"setText",q_ARG(QString,"world hello"));

textLabel->setProperty("color",QColor::fromRgb(255,0,0));

bRet=QMetaObect:::invokeMethod(textLabel,"doLayout");

}

QT-QML调用IOS原生通讯录

主要分为三大步骤：

链接ios原生库

编写C++类调用ios原生通讯录

qml调用封装的C++类（调通讯录的类）

链接ios原生库

在QT工程pro配置文件中加上如下代码：

这里得特别注意的是，你要调用的ios原生函数或方法是出自哪个类库的，一定要全部添加进去，要不编译就会提示找不到你写的ios函数或方法，另外要讲你写的mm文件路径添加进去

ios

{

LIBS += -framework Foundation -framework UIKit -framework Contacts -framework ContactsUI

OBJECTIVE_SOURCES += \

SamsonQt_IOS.mm

}

编写C++类调用ios原生通讯录

.h 文件中

*这里是c++头文件，由于是配合qml使用，所以信号槽你得换个思路，也就是c++类要给qml返回一个收到结果的信号，而qml调用c++则相当qml发了一个打开的信号给c++类，c++这边就是接收打开这个信号的槽，这个槽里面在去打开ios原生的东西*

#include <QObject>

#include <QString>

class SamsonQt_IOS : public QObject

{

Q_OBJECT

public:

static SamsonQt_IOS *s_contactsPicker;

signals:

// void contactSelected(const QString nameString);

void returnContactInfo(QString imgpath);

public slots:

void show(void);

// void contactSelected(const QString nameString);

};

#endif // SAMSONQT_IOS_H

.mm

*这里其实相当于写ios原生代码，没有做过ios原生的童鞋，可以网上百度ios的对应代码就可以了。这里相当在mm里面吧ios对应的头文件与实现文件放在了一起。*

#import <Foundation/Foundation.h>

#import <Contacts/Contacts.h>

#import <ContactsUI/ContactsUI.h>

#import <UIKit/UIKit.h>

#import <ContactsUI/CNContactPickerViewController.h>

@interface ViewController : UIViewController<CNContactPickerDelegate,CNContactViewControllerDelegate>

{

CNContactPickerViewController *picker;

}

@end

@implementation ViewController

-(void)showContactPicker

{

picker = [[CNContactPickerViewController alloc] init];

[picker setDelegate:(id)self];

UIViewController *rootCtrl = [UIApplication sharedApplication].keyWindow.rootViewController;

[rootCtrl presentViewController:picker animated:YES completion:nil];

}

-(void)contactPickerDidCancel:(CNContactPickerViewController *)picker

{

NSLog(@"取消选择联系人");

}

-(void)contactPicker:(CNContactPickerViewController *)picker didSelectContact:(CNContact *)contact

{

NSString *lastname = contact.familyName;

NSString *firstname = contact.givenName;

NSString *fullNameStr = [NSString stringWithFormat:@"%@%@",lastname,firstname];

NSLog(@"%@",fullNameStr);

//重点在这里：将原生代理返回的值转换为对应qt里面的值，这里是将nsstring 转换为了Qstring，具体如何操作，可查看qtapi或度娘.转换好以后，就是发送收到结果的信号给需要的地方了。其实和qt的c++使用没什么区别

QString fullName = QString::fromNSString(fullNameStr);

// emit SamsonQt_IOS::s_contactsPicker->contactSelected(fullName);

emit SamsonQt_IOS::s_contactsPicker->returnContactInfo(fullName);

SamsonQt_IOS::s_contactsPicker = NULL;

}

@end

//这里可千万不要忘记是c++类，需要加上构造函数或实例，并且实现其槽方法，这里同时也是打开ios原生的信号。

SamsonQt_IOS *SamsonQt_IOS::s_contactsPicker = NULL;

void SamsonQt_IOS::show(void)

{

SamsonQt_IOS::s_contactsPicker = this;

这里是用id强转后充当原生controller来使用，更深入的原理，大家可以自行研究。

void *context = [[ViewController alloc]init];

[(id)context showContactPicker];

}

上一篇：Qt Creator添加第三方头文件和类库MQTT（经验篇）

下一篇：QT学习总结

您现在的位置是：网站首页> C/C++

QML总结笔记

相关文章