《qt quick核心编程》笔记一

已于 2023-10-07 22:11:19 修改
阅读量685 收藏 6
点赞数
分类专栏： qt 文章标签： qt
于 2023-07-21 16:34:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shang_cm/article/details/131649335
版权

1.基础HelloWorld代码

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 400
    height: 300
    visible: true
    title: qsTr("Hello 1World")

    Rectangle {
        width: parent.width
        height: parent.height
        color: "gray"
        Text {
            anchors.centerIn: parent
            text: "Hello World!"
            color: "blue"
            font.pixelSize: 32
        }
    }
}

Rectangle {...}：定义一个Rectangle的对象，对象使用花括号描述
width:400：对象的属性

1.2qml表达式

Button {
	text: "Quit"
	style: ButtonStyle {
		background: Rectangle {
			implicitWidth: 25 * 2
			implicitHeight: 25
			border.width: control.activeFocus ? 2 : 1
		}
	}
}

1.3通过对象ID引用其他对象的属性、方法

Rectangle {
	Button {
		id: openFile
		text: "打开"
		anchors.left: parent.left
		anchors.leftMargin: 6
		anchors.top: parent.top
		anchors.topMargin: 6
	}
	Button {
		id: quit
		text: "退出"
		anchors.left: openFile.right
		anchors.leftMargin: 4
		anchors.bottom: openFile.bottom
	}
}

1.4注释

在QML中，注释与C++中一样，单行以“//”开始，多行以“/”开始、以“/”结束

/*
* the root element of QML
*/
Rectangle {
	width: 320
	height: 480
	Button {
		id: quit
		text: "退出"
		//use anchors to layout
		anchors.left: openFile.right
		anchors.leftMargin: 4
		anchors.bottom: openFile.bottom
		//set z-order
		z: 1
	}
}

2.属性

属性的类型：

  1. 由QML语言提供的类型
  2. 由QML模块（比如Qt Quick）提供的类型
  3. 导出到QML环境中的C++类型

2.1 由QML语言提供的类型**

2.1.1基本类型

int、real、double、bool、string、color、list、font

Rectangle {
	width: 320 //int
	height: 480
	Button {
		id: quit
		text: "退出" //string
		anchors.left: openFile.right
		anchors.leftMargin: 4
		anchors.bottom: openFile.bottom
		z: 1.5 //real
		visible: false //bool
	}
}

2.1.2 ID属性

一个对象的ID属性是唯一的，在同一个QML文件中ID属性不可重复。当给对象指定一个ID后，就可以在其他对象中引用这个对象的属性了

ID属性的值，首字母必须是小写字母或下划线，并且不能包含字母、数字、下划线以外的字符

2.1.3 列表属性

Item {
	children: [
		Text {
			text: "textOne"
		},
		Text {
			text: "textTwo"
		}
	]
	
	Component.onCompleted: {
		for (var i = 0; i < children.length; i++)
			console.log("text of label ", i, " : ", children[i].text)
	}
}
  1. 列表是包含在方括号内，以逗号分隔的多个元素的集合
  2. 列表的length属性提供了列表内元素的个数
  3. 列表内的元素通过数组下标来访问[index]
  4. 如果列表内只有一个元素，那么也可以省略方括号
  5. 列表内只能包含QML对象，不能包含任何基本类型的字面量（如8、true、如果非要包含请使用var变量来定义）

2.1.4 信号处理器

Rectangle {
	width: 320
	height: 480
	Button {
		id: quit
		text: "退出"
		anchors.left: parent.left
		anchors.leftMargin: 4
		anchors.bottom: parent.bottom
		anchors.bottomMargin: 4
		onClicked: {
			Qt.quit()
		}
	}
}
  1. 信号处理器等价于Qt中的槽
  2. 信号处理器的名称一般为on<Signal>的形式

2.1.5 分组属性

Text {
	font { pixelSize: 12; bold: true; }
}
//可以写成
Text {
	font.pixelSize: 18;
	font.bold: true;
}
  1. font类型本身是一个对象，这个对象又有pixelSize、bold等属性值
  2. 对于类型是对象的属性值，可以使用"."操作符展开每个成员进行赋值

2.1.6 附加属性

Item {
	width: 100
	height: 100
	focus: true
	Keys.enabled: false
}
  1. Keys就是Qt Quick提供的供Item处理按键事件的附加属性
  2. 附加属性类似于附加信号处理器

3.Qt Quick入门

<main.cpp>

#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
	QGuiApplication app(argc, argv);
	QQmlApplicationEngine engine;
	engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
	return app.exec();
}

<main.qml>

import QtQuick 2.2
import QtQuick.Window 2.1
Window {
	visible: true;
	width: 360;
	height: 360;
	MouseArea {
		anchors.fill: parent;
		onClicked: {
			Qt.quit();
		}
	}
	Text {
		text: qsTr("Hello Qt Quick App");
		anchors.centerIn: parent;
	}
}
  1. import语句和C++中的include类似，用于导入一个模块（import QtQuick.Window 2.1的主要类型就是Window，代表一个QML应用的顶层窗口，对应的C++类型是QQuickWindow）
  2. main.qml文档最外层的对象是Window，是这个QML应用程序的根对象，一个QML文档就是一颗以根对象为根的对象树
  3. 默认属性，用来接收那些没有显式使用"property: value"形式初始的对象。比如Window的默认属性是data，一个list<Object>类型的列表。如果你在Window对象内申明的其他对象（比如main.qml中的Text对象），并没有显示赋值给某个属性，那这个对象就会被存入data列表中
  4. 除了Window及其派生类外，QML中的其他元素大多是Item的派生类，Item的默认属性也是list<object>类型的data

3.1使用Item作为QML根对象

从C++的类型来看，QML中的Window对应Qt C++中的QQuickWindow，Item对应Qt C++中的QQuickView，而QQuickView则是从QQuickWindow继承而来。

Item替换Window作为QML根对象方法：

  1. 将main.qml中的Window直接替换为Rectangle
  2. 将main.cpp修改为
#include <QGuiApplication>
#include <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();
}

Qt Quick App有两种模式：

  • QQmlApplicationEngine搭配Window
  • QQuickView搭配Item

两者的不同之处，使用QQuickView显示QML文档，对窗口的控制权（比如设置窗口标题、Icon、窗口的最小尺寸等）在C++代码中实现；而使用QQmlApplicationEngine加载以Window为根对象的QML文档，QML文档拥有窗口的完整控制权，可以直接设置标题、窗口尺寸等属性

3.2Window对象

visibility属性用于设置窗口的显示状态

  • Window.Windowed:窗口占用屏幕的一部分，窗口管理器支持同时显示多窗口才生效
  • Window.Minimized:最小化到任务栏上的一个图标
  • Window.Maxmized:最大化，占用任务栏之外的所以屏幕空间
  • Window.FullScreen:全屏显示，占用整个屏幕，标题栏隐藏
  • Window.AutomaticVisibility:给Window一个默认的显示状态，实际值和平台有关
  • Window.Hideden:隐藏，窗口不可见，和visible属性的效果一致

visible属性控制窗口是否显示

  • true：显示窗口
  • false：隐藏窗口

color属性设置窗口的背景颜色

  • “blue”:颜色名
  • “#RRGGBB”:颜色RGB值
  • Qt.rgba:颜色的RGBA值

opactity属性设置窗口的透明度

  • 取值范围0~1.0

title设置窗口标题

  • 字符串类型

activeFocusItem属性保存窗口中拥有活动焦点的Item，可能为null

  • Item类型

contentOrientation属性设置窗口的内容布局方向

  • Qt.PrimaryOrientation：显示设备的首选方向
  • Qt.LandscapeOrientation：横屏
  • Qt.PortraitOrientation：竖屏
  • Qt.InvertedLandscapeOrientation：相对于横屏模式旋转了180°
  • Qt.InvertedPortraitOrientation：相对于竖屏模式旋转了180°

modality属性决定各个窗口之间的关系

  • Qt.NonModal：非模态
  • Qt.WindowModal：窗口级别的模态，设置此属性的窗口只针
    对某一个窗口是模态的，比如子窗口相对父窗口是模态的，
    相对同一应用中的其他非父窗口则没有模态效果
  • Qt.ApplicationModal：应用级别的模态，设置此属性的窗口
    会阻止同一应用的其他窗口获取输入事件

Flags设置窗口标志位

  • Qt.Widget
  • Qt.Popup

data默认属性

  • 类型为list<Object>

3.3ApplicationWindow对象

ApplicationWindow和QMainWindow类似，具有menuBar、toolBar、statusBar属性，分别设置菜单、工具栏、状态栏；还有contentItem，可以设置内容元素的尺寸属性

3.4Rectangle对象

Rectangle {
	width: 320;
	height: 480;
	color: "blue";
	border.color: "#808080";
	border.width: 2;
	radius: 12;
}

width指定宽
height指定高
color指定填充颜色，如果设置transparent可以达到只绘制边框不填充的效果
gradient设置渐变色供填充使用，同时指定gradient和color那么gradient生效
border.width指定边框的宽度
border.color指定边框的颜色
radius指定四个角的圆角弧度，用于绘制圆角矩形

3.5Color属性

QML中可以使用颜色名字、#RRGGBB、#AARRGGBB、Qt.rgba()、Qt.lighter()等方法来构造

Rectangle {
	width: 100;
	height: 100;
	color: "red";
	//color: "#00AA00";
	//color: "#800000B0";
	//color: Qt.rgba(0.8, 0.6, 0.4, 1.0);
	
	// prints "1 0 0 1"
	Component.onCompleted: console.log(color.r,	color.g,color.b, color.a)
}

3.6Gradient渐变色属性

Rectangle {
	width: 100;
	height: 100;
	gradient: Gradient {
		GradientStop { position: 0.0; color: "#202020"; }
		GradientStop { position: 0.33; color: "blue"; }
		GradientStop { position: 1.0; color: "#FFFFFF"; }
	}
}
  1. 渐变色通过两个或多个颜色值来指定，QML自动在两种颜色中插值进行无缝填充
  2. 使用GradientStop来指定一个颜色值和它的位置（取值在0.0-1.0之间）
  3. QT5.0中只有垂直方向的线性渐变可以用于Item，不过其他方向的可以指定rotation属性来实现

3.7Z属性

  1. z属性和x、y属性一样，用于指定图元在场景中的Z轴顺序，类型是real
  2. Z属性取值越小，图元越垫底

3.7Item对象

Item是QtQuick中所以可视元素的基类，定义了绘制图元所需的大部分通用属性，比如x、y、width、height、锚定anchoring、按键处理Key

opactity属性设置图元的透明度

  • 取值0~1.0之间

clip属性根据自己的位置和大小来裁切它自己以及孩子们的显示范围

  • true，那么孩子们无论怎样调皮也逃不出它的手掌心；
  • false，那么有些孩子就可能把手脚伸出父Item的框框外面

3.7.1利用Item来分组其他可视图元

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
	width: 300
	height: 200
	visible: true
	Item {
		id: gradientGroup
		Rectangle {
			x: 20
			y: 20
			width: 120
			height: 120
			gradient: Gradient {
				GradientStop {
					position: 0.0
					color: "#202020"
				}
				GradientStop {
					position: 1.0
					color: "#A0A0A0"
				}
			}
		}
		Rectangle {
			x: 160
			y: 20
			width: 120
			height: 120
			rotation: 90
			gradient: Gradient {
				GradientStop {
					position: 0.0
					color: "#202020"
				}
				GradientStop {
					position: 1.0
					color: "#A0A0A0"
				}
			}
		}
	}
	Component.onCompleted: {
		console.log("visible children: ", gradientGroup.visibleChildren.length)
		console.log("children: ", gradientGroup.children.length)
		for (var i = 0; i < gradientGroup.children.length; i++) {
			console.log("child ", i, " x = ", gradientGroup.children[i].x)
		}
	}
}

分组后可以使用Item的children或visibleChildren来访问子图元

3.8锚布局

  1. 锚布局：通过anchoring指定一个元素和其他元素的关系来确定元素在界面中的位置
  2. 每个Item都有7条不可见的锚线left、right、top、bottom、verticalCenter、horizontalCenter、baseline（基线定位文本）
    在这里插入图片描述
  3. 每个Item还有4个边的留白距离锚可以指定topMargin、bottomMargin、leftMargin、rightMargin
    在这里插入图片描述
  4. 可以使用margin直接指定四个边完全一样的距离锚
import QtQuick 2.15

Rectangle {
	width: 300
	height: 200
	Rectangle {
		id: rect1
		anchors.left: parent.left
		anchors.leftMargin: 20
		anchors.top: parent.top
		anchors.topMargin: 20
		width: 120
		height: 120
		gradient: Gradient {
			GradientStop {
				position: 0.0
				color: "#202020"
			}
			GradientStop {
				position: 1.0
				color: "#A0A0A0"
			}
		}
	}
	Rectangle {
		anchors.left: rect1.right
		anchors.leftMargin: 20
		anchors.top: rect1.top
		width: 120
		height: 120
		rotation: 90
		gradient: Gradient {
			GradientStop {
				position: 0.0
				color: "#202020"
			}
			GradientStop {
				position: 1.0
				color: "#A0A0A0"
			}
		}
	}
}
  1. centerIn锚，表示将一个Item居中放入另一个Item中
  2. fill锚，表示将一个Item充满另外一个Item
import QtQuick 2.15
import QtQuick.Window 2.15

Window {
	width: 300
	height: 200
	visible: true
	Rectangle {
		color: "blue"
		anchors.fill: parent
		border.width: 6
		border.color: "#888888"
		Rectangle {
			anchors.centerIn: parent
			width: 120
			height: 120
			radius: 8
			border.width: 2
			border.color: "black"
			antialiasing: true
			color: "red"
		}
	}
}

3.9键盘按键响应

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
	width: 300
	height: 200
	visible: true

	Rectangle {
		color: "#c0c0c0"
		anchors.fill: parent
		focus: true

		Keys.enabled: true
		Keys.onEscapePressed: Qt.quit()
		Keys.onBackPressed: Qt.quit()
		Keys.onPressed: {
			switch (event.key) {
			case Qt.Key_0:
			case Qt.Key_1:
			case Qt.Key_2:
			case Qt.Key_3:
			case Qt.Key_4:
			case Qt.Key_5:
			case Qt.Key_6:
			case Qt.Key_7:
			case Qt.Key_8:
			case Qt.Key_9:
				event.accepted = true
				keyView.text = event.key - Qt.Key_0
				break
			}
		}
		Text {
			id: keyView
			font.bold: true
			font.pixelSize: 24
			text: qsTr("text")
			anchors.centerIn: parent
		}
	}
}
  1. Item可以处理按键，所以从Item继承的都可以处理按键
  2. Item通过附加属性Keys来处理案件
  3. Item提供如onReturnPressed、onEscapePressed、onBackPressed这些针对特定按键的信号
  4. Item提供onPressed、onReleased通用的信号
  5. 按键响应信号有一个会带有一个类型为KeyEvent，名字是event的参数，包含了按键的具体信息
  6. 如果一个按键信号被处理了，那么需要将event.accepted设置为true，以免继续被传递

3.10Text对象

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
	width: 320
	height: 200
	visible: true
	Text {
		id: normal
		anchors.left: parent.left
		anchors.leftMargin: 20
		anchors.top: parent.top
		anchors.topMargin: 20
		font.pointSize: 24
		text: "Normal Text"
	}
	Text {
		id: raised
		anchors.left: normal.left
		anchors.top: normal.bottom
		anchors.topMargin: 4
		font.pointSize: 24
		text: "Raised Text"
		style: Text.Raised
		styleColor: "#AAAAAA"
	}
	Text {
		id: outline
		anchors.left: normal.left
		anchors.top: raised.bottom
		anchors.topMargin: 4
		font.pointSize: 24
		text: "Outline Text"
		style: Text.Outline
		styleColor: "red"
	}
	Text {
		anchors.left: normal.left
		anchors.top: outline.bottom
		anchors.topMargin: 4
		font.pointSize: 24
		text: "Sunken Text"
		style: Text.Sunken
		styleColor: "#A00000"
	}
}
  1. textFormat属性来指定显示纯文本或富文本（html标记修饰）
  2. wrapMode属性来制定单词分解处断行（用于文字超出了显示宽度需要换行）
  3. style属性提供文字风格，Text.Outline、Text.Raised、Text.Sunken
  4. styleColor属性和style属性配合使用，没有style属性时，stylecolor属性不生效
  5. elide属性，用于在有限的空间内显示一段长文本，显示不下则省略处理

3.11Button对象

import QtQuick 2.12
import QtQuick.Controls 2.12

Button {
    id: control
    text: qsTr("Button")

    contentItem: Text {
        text: control.text
        font: control.font
        opacity: enabled ? 1.0 : 0.3
        color: control.down ? "#17a81a" : "#21be2b"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 40
        opacity: enabled ? 1 : 0.3
        border.color: control.down ? "#17a81a" : "#21be2b"
        border.width: 1
        radius: 2
    }
    onClicked: {
    Qt.quit();
    }
}

text：指定按钮文字
checkable：属性设置Button是否可选。如果Button可选，checked属性则保存Button选中状态
iconName：指定按钮图标的名称，如果平台的图标主题中存在该名称对应的资源则加载它
iconSource：通过URL的方式来制定图标的位置，iconName优先级大于iconSource
isDefault：指定按钮是否是默认按钮，如果是默认按钮则按下Enter键会触发按钮的clicked()信号
pressed：保存按钮当前的按下状态
menu：属性允许给按钮设置一个菜单，用户点击按钮时弹出菜单，默认是null
action：属性允许你设定按钮的action，action可以定义按钮的checked、text、tooltip、iconSource等属性，还可以绑定按钮的clicked信号。action属性的默认值为null
activeFocusOnPress：属性指定按钮被按下时是否获取焦点，默认是false

3.12Image对象

要显示动画如gif等，可以使用AnimatedSprite或者AnimatedImage

import QtQuick 2.2
import QtQuick.Controls 1.2

Rectangle {
	width: 480
	height: 320
	color: "#121212"
	BusyIndicator {
		id: busy
		running: true
		anchors.centerIn: parent
		z: 2
	}
	Text {
		id: stateLabel
		visible: false
		anchors.centerIn: parent
		z: 3
	}
	Image {
		id: imageViewer
		asynchronous: true
		cache: false
		anchors.fill: parent
		fillMode: Image.PreserveAspectFit
		onStatusChanged: {
			if (imageViewer.status === Image.Loading) {
				busy.running = true
				stateLabel.visible = false
			} else if (imageViewer.status === Image.Ready) {
				busy.running = false
			} else if (imageViewer.status === Image.Error) {
				busy.running = false
				stateLabel.visible = true
				stateLabel.text = "ERROR"
			}
		}
	}
	Component.onCompleted: {
		imageViewer.source = "http://image.cuncunle.com/Images/EditorImages/2013/01/01/19/20130001194920468.JPG"
	}
}

width、height：设定图元的大小，图片会被拉伸来适应这个尺寸。如果没有设置，Image会使用图片本身的大小
fillMode：设定图片的填充模式

  • Image.Stretch拉伸
  • Image.PreserveAspectFit等比缩放
    • Image.PreserveAspectCrop等比缩放，最大化填充Image，必要时裁剪
  • Image.Tile在水平和垂直两个方向平铺，像贴瓷砖一样
  • Image.TileVertically在垂直方向上平铺
  • Image.TileHorizontally在水平方向上平铺
  • Image.pad保持图片原样不做变换

asynchronous：指定Image加载图片的方式，true异步，false同步。对于本地图片默认false，网络图片默认true且设置不起作用

3.13BusyIndicator对象（等待图元）

BusyIndicator对象用于在进行一些耗时操作时，用来缓解用户的焦虑情绪

BusyIndicator {
	id: busy;
	running: true;
	anchors.centerIn: parent;
	z: 2;
}

running：true时显示，false时不显示

3.14图片浏览器

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Dialogs 1.3

Window {
	visible: true
	width: 600
	height: 480
	minimumWidth: 480
	minimumHeight: 380
	BusyIndicator {
		id: busy
		running: false
		anchors.centerIn: parent
		z: 2
	}
	Text {
		id: stateLabel
		visible: false
		anchors.centerIn: parent
		z: 3
	}
	Image {
		id: imageViewer
		asynchronous: true
		cache: false
		anchors.fill: parent
		fillMode: Image.PreserveAspectFit
		onStatusChanged: {
			if (imageViewer.status === Image.Loading) {
				busy.running = true
				stateLabel.visible = false
			} else if (imageViewer.status === Image.Ready) {
				busy.running = false
			} else if (imageViewer.status === Image.Error) {
				busy.running = false
				stateLabel.visible = true
				stateLabel.text = "ERROR"
			}
		}
	}
	Button {
		id: openFile
		text: "Open"
		anchors.left: parent.left
		anchors.leftMargin: 8
		anchors.bottom: parent.bottom
		anchors.bottomMargin: 8
		background: Rectangle {
			implicitWidth: 70
			implicitHeight: 25
			color: control.hovered ? "#c0c0c0" : "#a0a0a0"
			border.width: control.pressed ? 2 : 1
			border.color: (control.hovered
						   || control.pressed) ? "green" : "#888888"
		}
		onClicked: fileDialog.open()
		z: 4
	}
	Text {
		id: imagePath
		anchors.left: openFile.right
		anchors.leftMargin: 8
		anchors.verticalCenter: openFile.verticalCenter
		font.pixelSize: 18
	}
	FileDialog {
		id: fileDialog
		title: "Please choose a file"
		nameFilters: ["Image Files (*.jpg *.png *.gif)"]
		onAccepted: {
			imageViewer.source = fileDialog.fileUrl
			var imageFile = new String(fileDialog.fileUrl)
			//remove file:///
			imagePath.text = imageFile.slice(8)
		}
	}
}

3.15FileDialog对象

FileDialog是文件对话框，用于选择已有的文件、文件夹、支持单选、多选，或者保存文件

FileDialog {
	id: fileDialog
	title: "Please choose a file"
	nameFilters: ["Image Files (*.jpg *.png *.gif)", "Bitmap File (*.bmp)", "* (*.*)"]
	selectedNameFilter: "Image Files (*.jpg *.png *.gif)"
	selectMultiple: true
	onAccepted: {
		imageViewer.source = fileDialog.fileUrls[0]
		var imageFile = new String(fileDialog.fileUrls[0])
		imagePath.text = imageFile.slice(8)
	}
}

visible：FileDialog对象默认为false，要显示对话框时，需要调用open()或者将该属性设为true
selectExisting：true表示选择已有文件或文件夹，false表示创建文件或文件夹名字，默认true
selectFolder：true表示选择文件夹，false表示选择文件，默认为false
selectMultiple：true表示多选，false表示单选，默认false，当selectExisting为false时，该属性应当为false
nameFilter：表示中设置一个过滤器列表
selectedNameFilter：设置默认的过滤器，或者保存用户选择的过滤器
modality：属性默认为Qt.WindowModal
fileUrl：保存用户所选择的文件或文件列表
folder：保存用户所选择的文件所在的文件夹的位置

4 ECMAScript

javascript包含三个部分：

  • 核心语法ECMAScript
  • 文档对象模型DOM
  • 浏览器对象模型BOM

QML包含三个部分：

  • 语法核心ECMAScript
  • Qt对象系统
  • Qt Quick标准库

测试框架

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
	Component.onCompleted:{
	//这里放测试代码
	}
}

语法如下：

4.1 变量、函数名、运算符等一切东西都区分大小写

4.2 弱类型

变量没有特定的类型，定义变量时使用var运算符，可以初始化为任意的值

var background = "white";
var i = 0;
var children = new Array();
var focus = true;

QML引入的信号，是有安全类型检测的，定义信号时，需要使用特定的类型定义参数
signal colorChanged(color clr)

4.3 语句后的分号可有可无

var background = "white";
var i = 0

4.4 注释

支持两种注释：单行注释和多行注释
单行注释，以双斜线(“//”)开头

// single-line comment

多行注释，以斜杠星(“/*”)开头，以星斜杠结尾(“*/”)

/*
* the root element of QML
*/

4.5 代码快

代码块表示一系列应该顺序执行的语句，被封装在花括号之间

if(focus == true){
	border.width = 2;
	border.color = "blue";
}

4.6 变量

变量定义：用var运算符，可以不进行初始化，用到的时候再初始化

var i = 0;
var j = 0 , name = "}";
var x;

变量可以存储不同类型的值，但是尽量不要这么干

var i = 0;
console.log(i);
i = "Wei Xiao Bao";
console.log(i);

变量命名规则：

  • 第一个字符必须是字母、下划线_、美元符号$
  • 余下的字符可以是下划线、美元符号或者任何字母或数字
  • 建议使用驼峰命名法（每个单词的首字母大写）

4.7 关键字

break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with

4.8 保留字

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto、implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

4.9 原始值和引用

变量可以存放两种类型的值，原始值和引用
变量取值为ECMAScript的5种原始类型时，它就被存储在栈上
变量取值为一个对象时，它就被存储在堆上

4.10 原始类型

ECMAScript共有5种原始类型

  • Undefined
  • Null
  • Boolean
  • Number
  • String

ECMAScript提供了typeof运算符来判断一个值的类型，如果值是原始类型，返回具体的类型名字；如果值是一个引用的话，将统一返回"object"作为类型名字

import QtQuick 2.15
import QtQuick.Window 2.15

Window {
	Component.onCompleted: {
		//这里放测试代码import QtQuick 2.2
		var a = "Zhang San Feng"
		var b = 100
		var c = false
		var d
		var e = Window
		console.log(typeof a)
		console.log(typeof b)
		console.log(typeof c)
		console.log(typeof d)
		console.log(typeof e)
	}
}

//输出
qml: string
qml: number
qml: boolean
qml: undefined
qml: object

4.10.1 Undefined类型

当变量未初始化时，该变量默认值就是undefined

var runOnce;
...
if(runOnce == undefined){
	runOnce = true;
}else{
	...
}

当函数没有明确的返回值时，返回的值也是undefined

function blankFunc(){}
console.log(blankFunc() == undefined); //输出 "true"

4.10.2 Null类型

Null类型只有一个值，即null

var a = null;

4.10.3 Boolean类型

Boolean类型共有两个值，true或者false

4.10.4 Number类型

Number既可以表示32位的整数，也可以表示64位的浮点数

var integer = 10;		//定义整数
var Number16 = 0x1f;	//定义16进制数
var Number8 = 065;		//定义8进制数
var NumberFloat = 0.33	//定义浮点数
var NumberSci1 = 3.14e8	//使用科学计数法定义浮点数
var NumberSci2 = 6-e12

数字类型的最大值是Number.MAX_VALUE，最小值是Number.MIN_VALUE，所有的数都必须在这两个值之间
当表达式计算生成的数大于Number.MAX_VALUE时，将被赋值为Number.POSITIVE_INFINITY正无穷大
当表达式计算生成的数小于Number.MIN_VALUE时，将被赋值为Number.NEGATIVE_INFINITY负无穷大

isFinit()用来判断一个树是否时有穷的

if(isFinit(ret)){
	...
}else{
	...
}

isNaN用来判断一个值是否是非数

isNaN("Not a Number");
isNaN("110");

4.10.5 String类型

  1. String类型存储Unicode字符，对应的C++类型为QString
  2. 在ECMAScript种字符串字面量可以使用双引号或者单引号来申明都可以
  3. 可以将String看成一个数组，通过下标来访问其中的字符，但是一旦赋值后，字符串的值不可进行修改
var name = "Zhang San Feng"
console.log(name)
name[0] = "S"
console.log(name)

//输出结果
qml: Zhang San Feng
qml: Zhang San Feng

4.11 类型转换

  1. 转换成字符串
    Boolean、Number、String三种原始类型，都有toString方法

    var name = "Zhang San Feng";
console.log(name.toString());
Console.log(true.toString());
var visible = false;
console.log(visible.toString());
var integer = 3.14159;
console.log(integer.toString());

  2. 转化成数字
    String类型可以使用parseInt()和parseFloat()可以把非数字的原始值转换为数字，扫描字符串直到遇到第一个非数字时停止并返回。 其他类型使用它们，将返回NaN，也即非数

    var num1 = parseInt("2014年"); //返回 2014
var num2 = parseInt("0xC"); //返回 12
var num3 = parseInt("3.14"); //返回 3
var num4 = parseInt("green"); //返回 NaN
var num5 = parseFloat("3.14159"); //返回 3.14159
var num6 = parseFloat("1.3.3"); //返回 1.3
var num7 = parseFloat("Am I Float"); //返回 NaN

//支持基模式
var num1 = parseInt("AK47", 16); //返回 10
var num2 = parseInt("AK47", 10); //返回 NaN
var num3 = parseInt("010", 8); //返回 8
var num4 = parseInt("010", 10); //返回 10

  3. 类型强制转换

    • Boolean(value)，将value转化为Boolean类型
      要转换的值是一个非空字符串、非0数字或对象时，返回true
    • Number(value)，将value转化为数字(整数或浮点数)
      转换的整个值，一旦遇到一个无法转换的无效字符会直接返回NaN
    • String(value)，将value转化为字符串
      可以把任何值转化为字符串，和toString()方法不同在于，对null或undefined进行转化可以生成字符串而不引发错误

4.12 对象

引用值就是对象，对象由new运算符加上要实例化的类型名字创建

var a = new Array();

如果类的构造函数没有参数，则括号可以省略

4.12.1 Object对象

Object是所有ECMAcript类的基类

import QtQuick 2.2
Rectangle {
	id: root;
	Component.onCompleted:{
		var obj = new Object();
		console.log(obj.toString());
		console.log(obj.constructor);
		console.log(root.hasOwnProperty("width"));
		console.log(Item.isPrototypeOf(root));
		console.log(root.propertyIsEnumerable("children"));
		console.log(root.toString());
		console.log(root.valueOf());
	}
}

具有以下属性

  • constructor：指向创建对象的函数，对于Object类，指向object()函数
  • prototype：对该对象的对象原型的引用，ECMAScript允许在运行时改变对象原型

具有以下方法：

  • hasOwnProperty(property)，判断对象是否具有某个属性
  • isPrototypeOf(object)，判断该对象是否是另一个对象的原型
  • propertyIsEnumerable()property，判断给定的属性是否可以用for…in语句进行枚举
  • toString()，返回对象的字符串表示
  • valueOf()，返回最适合该对象的原始值，对于许多类，返回值同toString()

动态增加属性：

var person = new Object();
person.name = "zhangsan"
person.year = 20;

动态增加方法：

person.printInfo = function printInfo(){
	console.log("name -", this.name, " year -", this.year);
}
person.printInfo();

通过数组下标访问属性和方法：

console.log(person["name"]); // →
person.name
person["printInfo"](); // →
person.printInfo()

使用for…in枚举对象

for(var prop in person){
 console.log(prop, ",", person[prop]);
}

//输出
name , zhangsan
year , 20
printInfo , function() { [code] }

对象的字面量表示法

var person = {
	"name": "zhangsan",
	"year": 20
}

4.12.2 String对象

String类是String原始类型的对象表示法
String对象始终是只读的，对String指向提取、查找、替换、修改等操作不会改变字符串本身，而是会返回一个新的字符串

构造String对象

var str = new String("I\'m a string")

获取字符串长度

var str = new String("I\'m a string");
console.log(str.length)

访问单个字符

var str = new String("I\'m a string");
console.log(str.charAt(2)); //输出 m
console.log(str[0]); //输出 I
console.log(str.charCodeAt(1)); //输出 39

查找子串

var str = new String("I\'m a string");
console.log(str.indexOf("ing")); //输出 9
console.log(str.indexOf("ing", 4)); //输出 9
console.log(str.search(/String/)); //输出 -1
console.log(str.lastIndexOf(" ")); //输出 5
console.log(str.search(/String/i)); //忽略大小写，输出 6
console.log(str.search("i")); //输出 9，而非 0
console.log(str.match("tri")); //输出 [tri]
var numberSource = new String("2014-08-18, I got 96");
var results = numberSource.match(/\d+/g);
console.log(results.length); //输出 4
console.log(results); //输出 [2014,08,18,96]

indexof()从前往后检索子串，找到不返回-1，可以指定开始查找的位置
lastIndexof()从后往前检索子串，找不到返回-1，可以指定开始查找的位置
search()用于从开头检索字符串中指定的子串，或检索和正则表达式匹配的子字符串
match()检索指定的值，或寻找匹配正则表达式的一个或多个子串，返回存放所有子串的数组

字符串比较

var str1 = "Qt Quick";
var str2 = "qt quick";
var str3 = "ok";
console.log(str1 == str2); //输出 false
console.log(str1 < str2); //输出 true
console.log(str1.localeCompare(str2)); //输出 1
console.log(str3.localeCompare(str2)); //输出 -1
  1. 使用大于(>)、小于(<)、等于(==)三个运算符可用于字符串比较，使用Unicode编码比较，忽略本地语言环境，可能达不到预想的结果
  2. 使用localeCompare()方法使用本地语言环境比较字符串

连接字符串

var str1 = new String("Qt");
var str2 = "Quick";
var strResult = str1.concat(str2, " is", " great!");
console.log(strResult);
console.log(str1);
console.log(str1.concat(" Widgets"));
console.log(str1 + str2);

concat()方法连接两个或多个字符串，返回一个新的字符串的原始值
使用符号加(+)连接字符串，效果同concat()

提取子串

var source = new String("I like QML");
console.log(source.slice(-3)); //输出 "QML"
console.log(source.slice(2,6)); //输出 "like"
console.log(source.substring(0, 6)); //输出 "I like"
console.log(source.substring(-3)); //输出 "I like QML"
console.log(source.substring(4, -3)); //输出 "I li"
console.log(source.slice(4, -3)); //输出 "ke"
console.log(source.substr(2, 4)); //输出 "like"

slice()在遇到负数参数时，会应用"从串尾倒数"策略
substring()会把负数参数作为0来处理，且总是会把较小的参数作为起始位置substring(3,1)和substring(1,3)效果是一样的
substr()第一个参数是起始位置，第二个参数指定要提取的字符个数，不指定则到母串结束

大小写转换

var orig = "Qt QuICk";
console.log(orig.toLocaleLowerCase());
console.log(orig.toLowerCase());
console.log(orig.toLocaleUpperCase());
console.log(orig.toUpperCase());

toLowerCase()将字符串转化为小写
toLocaleLowerCase()将字符串按照本地编码集转化为小写
toUpperCase()将字符串转化为大写
toLocaleUpperCase()将字符串按照本地编码集转化为大写

字符串替换

var strSource = new String("Android,best");
//下面语句输出 "iOS,best"
console.log(strSource.replace("Android", "iOS"));
//下面语句输出 "Android,worst"
console.log(strSource.replace(/best/, "worst"));

replace()可以将母串中的部分子串替换为指定的新字符串，第一个参数是一个字符串原始值，或者正则表达式，第二个是新的字符串或产生新字符串的函数

使用arg()进行值替换
QML对EMCAScript中的String对象进行扩充，加入arg()方法

var expression = "%1 < %2 = %3";
var result = expression.arg(7).arg(8).arg("true");
console.log(result);
console.log(expression.arg(10).arg(6).arg(false));
console.log("I am %1 years old.".arg(10));

arg()的语法，string arg(value)，value可以是数字、字符串、布尔值、对象的等，它会被用来替换调用的字符串对象内的%1、%2、%n等占位符

4.12.3 RegExp正则表达式

Qt C++中使用QRegExp对正则表达式进行支持
QML中使用RegExp对正则表达式进行支持

构造正则表达式的方法：

  • 字面量语法，/pattern/attribute
  • 创建RegExp对象，new RegExp(pattern, attribute)

修饰符:

  • “i”，匹配时忽略大小写
  • “g”，查找所有匹配而非在找到第一个匹配后停止，即全局匹配
  • “m”，执行多行匹配
var numberSource = new String("2014-08-18, I got 96");
var results = numberSource.match(/\d+/g);

使用g来进行全局匹配，否则match()找到第一个数字后就会终止模式匹配过程

元字符

  • “,”，匹配除换行符以外的任意字符
  • “\w”，匹配字符、数字、下划线和汉字
  • “\s”，匹配任意的空白字符
  • “\S”，匹配非空白字符
  • “\d”，匹配数字
  • “\D”，匹配非数字
  • “\b”，匹配单词的开始或结束
  • “^”，匹配字符串的开始
  • “$”，匹配字符串的结束
//提取以"We"开头的所有行
var str = "We are dogs;\nYour dogs;\nWe want meat,
please.\nPlease.";
var lines = str.match(/^We.*/mg);
console.log(lines.length);
console.log(lines);

重复

  • “*”，重复零次或更多次
  • “+”，重复一次或更多次
  • “?”，重复零次或一次
  • “{n}”，重复n次
  • “{n,}”，重复n次或更多次
  • “{n,m}”，重复n次到m次

字符串集合
[xyz]匹配x、y、z中的一个
[0-9]来匹配0到9中的任意一个字符，等同于\d
[a-zA-Z]匹配26个字母

转义字符
使用\来转义以上这些元字符
常见的\0,\n,\r,\t也是可以使用的

String类型的search()、match()、replace()、split()四个方法支持正则表达式

4.12.4 Array数组

EMCAScript中定义的Array是动态数组，大小可以动态变化，而且数组中的元素类型可以不同

创建数组

  • 默认构造，var a = new Array();
  • 构造指定数组长度，var a = new Array(10);
  • 使用给定的参数初始化数组，var a = new Array(10,5,23,46)
  • 使用字面量创建数组，var a = [2,3,4,5,“abc”, “??”]

访问数组

var a = new Array(10, 6, 3, 21, 22, 30, 8);
console.log("array length - ", a.length);
console.log("2nd element - ", a[1]);

length属性表示数组中元素的个数
数组中的元素通过下标来访问

修改数组

var a = new Array(10, 6, 3, 21, 22, 30, "zhangsan");
console.log("array length - ", a.length);
console.log("2nd element - ", a[1]);
console.log("7th - ", a[6]);
a[6] = "ZhangSanFeng";
a[7] = "XieXun";
a.push(250);
a.unshift(1);
console.log(a.join(" "));
console.log(a.shift());
a.reverse();
console.log(a.pop());
console.log(a.sort());
console.log(a.pop());
console.log(a.pop());
console.log(a.sort());

Array[Array.length]通过下标运算符指定一个越界的索引来创建元素
Array[0] = 1通过下标运算符直接修改已经存在的元素
push()向数组末尾插入一个或多个元素，返回数组的新长度
pop()删除并返回数组的最后一个元素
shift()删除并返回数组的第一个元素
unshift()向数组的开头添加一个元素并返回新的数组长度
reverse()颠倒数组中的元素顺序，它会改变原来的数组
sort()对数组内的元素排序，并返回数组的引用，它会改变原来的数组

数组转化为字符串
join()方法可以把数组中的所有元素组合成一个字符串，字符串之间可以用给定的分隔符填充
toString()方法也可以把数组转化为字符串，和不带参数的join()一样
toLocaleString()把数组转化为本地字符串

数组的分割与合并

var array = new Array("I", "like", "Qt", "Quick");
var subArray = array.slice(2, 4);
console.log(subArray.join(" "));
var newArray = array.concat("!", subArray);
console.log(newArray.join(" "));
newArray[0] = "Do you";
newArray.splice(4, 3, "?", "Yes", "!");
console.log(newArray.join(" "));

concat()连接两个或多个数组,它不会改变现有数组而是返回一个新的数组对象
slice(start, end)将原数组中的start到end之间的元素放到一个新的数组中返回
splice(index, howmany, item1, item2, ... , itemN)剔除掉从index开始的howmany个元素，然后将item1到itemN插入到数组中

4.12.5 Math

Math对象用来执行数学运算，无需new运算符，而是直接使用即可

var pi = Math.PI;
var textColor = Qt.rgba(Math.random(),Math.random(), Math.random());

Math具有以下属性
Math.E，算术常数e（约等于2.718）
Math.LN2，2的自然对数（约等于0.693）
Math.LN10，10的自然对象（约等于2.302）
Math.LOG2E，以2为底的e的对数（约等于1.442）
Math.LOG10E，以10为底的e的对数（约等于0.434）
Math.PI，圆周率（约等于3.14159）
Math.SQRT1_2，2的平方根的倒数（约等于0.707）
Math.SQRT2，2的平方根（约等于1.414）

Math具有以下方法
Math.abs(x)，返回数的绝对值
Math.acos(x)，返回数的反余弦值
Math.asin(x)，返回数的反正弦值
Math.atan(x)，返回x的反正切值，返回值是介于-PI/2与PI/2之间的弧度
Math.atan2(y,x)，返回从x 轴到点(x ,y )的角度，返回值是介于-PI与PI之间的弧度
Math.ceil(x)，对数进行上舍入
Math.cos(x)，返回数的余弦值
Math.exp(x)，返回e的指数
Math.floor(x)，对数进行下舍入
Math.log(x)，返回数的自然对数（底为e）
Math.max(x,y)，返回x 和y 中的最大值
Math.min(x,y)，返回x 和y 中的最小值
Math.pow(x,y)，返回x 的y 次幂
Math.random()，返回0～1之间的随机数
Math.round(x)，把数四舍五入为最接近的整数
Math.sin(x)，返回数的正弦值
Math.sqrt(x)，返回数的平方根
Math.tan(x)，返回角的正切值
Math.valueOf()，返回Math对象的原始值

4.12.6 Date对象

Data对象用于处理日期和时间

创建Date对象

  • var current = new Date() //使用当前的日期时间来构造Date对象
  • var d = new Date(value)
  • var d = new Data(dateString)
  • var d = new Date(year, month, day, hour, minute, second, millisecond)
var birthday1 = new Date("2009-10-21T22:24:00");
var birthday2 = new Date(2009, 10, 21);
var birthday3 = new Date(2009, 10, 21, 22, 24, 0);

提取Date对象中的信息
getDate()，返回一个月中的某一天（1～31）
getDay()，返回一周中的某一天（0～6）
getMonth()，返回月份（0～11）
getFullYear()，返回4位数字年份
getHours()，返回小时（0～23）
getMinutes()，返回分钟（0～59）
getSeconds()，返回秒数（0～59）
getMilliseconds()，返回毫秒（0～999）
getTime()，返回1970年1月1日至今的毫秒数
toString()，把日期转换为本地字符串

UTC时间相关
getUTCDate() 、getUTCDay()、getUTCMonth()等

设置Date对象中的信息
setDate()，设置月的某一天（1～31）
setMonth()，设置月份（0～11）
setFullYear()，设置4位数字年份
setHours()，设置小时（0～23）
setMinutes()，设置分钟（0～59）
setSeconds()，设置秒钟（0～59）
setMilliseconds()，设置毫秒（0～999）
setTime()，以1970年1月1日至今的毫秒数设置Date对象

Date的一些静态方法，无需创建Date对象使用
Date.now()，返回从1970年1月1日凌晨至今的毫秒数。
Date.parse()，解析一个时间字符串，返回那个时间距离1970年1月1日凌晨至今的毫秒数
Date.UTC()，解析UTC时间，返回那个时间距离1970年1月1日凌晨至今的毫秒数，它的参数是整型的年、月、日、时、分、秒、毫秒，至少提供年、月，就像构造函数一样

var start = Date.now();
var future = Date.UTC(2015,1,1,12);
var distance = future - start;
console.log(distance);

QML对Date的扩展，提供了和locale相关的方法

var today = new Date();
console.log(today.toLocaleString(Qt.locale("zh_CN")));
console.log(today.toLocaleString(Qt.locale("en_US"), Locale.ShortFormat));
console.log(today.toLocaleDateString(Qt.locale("en_US")));

Date fromLocaleDateString(locale, dateString, format)
Date fromLocaleString(locale, dateTimeString, format)
Date fromLocaleTimeString(locale, timeString, format)
timeZoneUpdated()
string toLocaleDateString(locale, format)
string toLocaleString(locale, format)
string toLocaleTimeString(locale, format)

  1. local参数是一个对象，提供区域信息，通过Qt.local(name)方法构建
    name由语言代码和国家编码组成。语言代码是两位小写字母（如zh表示汉语），国家编码是两位大写字母（如CN表示中国）
    name的形式为：language_country，中国的区域信息对应的name为zh_CN
  2. format参数是一个枚举类型，Locale.LongFormat、Locale.ShortFormat、Locale.NarrowFormat

每当用完一个对象后，最好主动废除掉对象的引用。var array = new Array(); … array = null;

4.13 函数

ECMAScript不支持函数重载（函数名相同，参数不同）

函数定义

function functionName(arg1, arg2, ..., argN){
 //要执行的代码
}
  1. 函数以function关键字作为开头
  2. 函数的参数不需要使用var运算符进行申明

函数的返回值

function add(number1, number2){
var result = number1 + number2;
console.log(number1, "+" ,number2, "=", result);
return result;
}

var ret = add(100, 34);

函数默认都有返回值，当未显式返回时，默认返回值为undefined

关键字运算符

  • void关键字
    放在一个表达式前，舍弃表达式的值，返回undefined
  • typeof关键字
    对于原始值，返回原始类型；对于引用值，返回object
  • instanceof关键字
    用来测试一个对象的实际类型，需要显示的指定要测试的类型
    var str = new String("hello world");
console.log(str instanceof String); //输出 true
  • new关键字
    用于创建一个对象
  • delete关键字
    用于删除对象的属性，在QML中只能删除自己定义的属性

4.14 使用console

console是和实现ECMAScript的宿主环境相关的一个对象
console提供输出日志、断言、计时器、计数器、性能分析等功能

4.14.1 输出日志信息

import QtQuick 2.2
Rectangle {
	id: root;
	Component.onCompleted:{
		console.log(root);
		var array = new Array(10, 12, 8, "Anna");
		console.debug("print array:", array);
	}
}
  • console.log();
  • console.debug();
  • console.info();
  • console.warn();
  • console.error();

可打印字符串、数字、数组、任意实现toString()方法的对象

4.14.2 断言

console.assert()提供断言功能，接收一个表达式，当表达式为false时输出调试信息，打印所在行
在QML中，使用console.assert()，断言失败，并不会终止程序

4.14.3 计时器

console提供计时器的功能，方便测量代码耗时情况

console.time("regexp");
var str = "We are dogs;\nYour dogs;\nWe want meat.\nPlease.";
var lines = str.match(/^We.*/mg);
console.log(lines.length);
console.log(lines);
console.timeEnd("regexp");

//输出
regexp: 7ms
  • console.time(tag)启动计时器
  • console.timeEnd(tag)停止计时器

4.15 内置对象

内置对象：ECMAScript定义的独立于宿主环境的对象，且无需实例化，直接使用
ECMAScript定义了三个内置对象，Global、Math、Json

4.15.1 Global对象

Global对象是接管那些不属于任何对象的函数

URI编解码
编码URI：使用专门的UTF-8编码替换如空格等非有效的URI字符

var uri = "http://www.baidu.com/s?wd=Katie Melua";
var encodedUri = encodeURI(uri);
var encodedComponent = encodeURIComponent(uri);
console.log(encodedUri);
console.log(encodedComponent);
var decodedUri = decodeURI(encodedUri);
var decodedComponent =
decodeURIComponent(encodedComponent);
console.log(decodedUri);
console.log(decodedComponent);

encodeURI()、decodeURI()：用于对一个完整的URI进行编/解码，不对URI中的特殊字符进行编/解码，如冒号、前斜杠、问号等
encodeURIComponent()、decodeURIComponent()：用于对任何的URI进行编/解码，不区分URI中的特殊字符，会对所有的非标准字符都进行编/解码

eval
用来执行一段ECMAScript脚本

var s = "8+7";
console.log(eval(s));
var s2 = new String("9+10");
console.log(eval(s2));

//输出
15
9+10

eval的参数只能是字符串且是原始字符串

4.15.2 Json对象

Json对象是一个单例对象，包含两个函数，parse()、stringify()

  • Json.parse()
    用于解析JSON文本，生成ECMAScript对象
    //json文本
{
	"status":"0",
	"t":"1401346439107",
	"data":[
		{
			"location":"安徽省宿州市 电信",
			"origip":"36.57.177.187"
		}
	]
}

import QtQuick 2.2
Rectangle {
	width: 300;
	height: 200;
	Component.onCompleted:{
		var obj = JSON.parse("{\"status\":\"0\",\"t\":\"1401346439107\",\"data\":[{\"location\":\" 安 徽 省 宿 州 市 电 信\",\"origip\":\"36.57.177.187\"}]}");
		console.log("status = ", obj.status);
		console.log("ip = ", obj.data[0].origip);
		console.log("area = ", obj.data[0].location);
	}
}
  • Json.stringify()
    用于将ECMAScript对象转换为JSON格式的字符串
    import QtQuick 2.2

Rectangle {
	width: 300
	height: 200
	id: root
	property var person: new Object()
	function replacer(key, value) {
		switch (key) {
		case "name":
			return "Zhang San"
		}
		return value
	}
	property var array: new Array()
	Component.onCompleted: {
		//stringify an array
		array[0] = "version"
		array[1] = 2.3
		console.log(JSON.stringify(array))
		//stringify object
		person.name = "zhangsan"
		person.mobile = "13888888888"
		person.age = 20
		person.country = "China"
		console.log(JSON.stringify(person))
		console.log(JSON.stringify(person, null, 4))
		console.log(JSON.stringify(person, ["name", "mobile"], ""))
		console.log(JSON.stringify(person, replacer))
		//use toJSON
		person.toJSON = function () {
			var replacement = new Object()
			for (var p in this) {
				if (typeof (this[p]) === 'string') {
					replacement[p] = this[p].toUpperCase()
				} else {
					replacement[p] = this[p]
				}
			}
			return replacement
		}
		console.log(JSON.stringify(person))
	}
}

4.16 来自QML的基本类型

QML除了实现了ECMAScript定义的基本类型以外，还增加了一些宿主相关的类型
int、bool、real、double、url、list、enumeration、color、size、rect、point等

使用QML基本类型时，只能在QML提供的宿主对象的属性定义或信号参数定义，不能在ECMAScript脚本中直接使用它们定义变量

4.16.1 url

URL用于定位资源的位置，可以是一个文件名、相对位置或网络位置
Image对象的source属性就是url类型的

Image1 { source: "images/yourimage.png";}
Image2 { source: "http://www.baidu.com/img/baidu_jgylogo3.gif";}
Image3 { source: "qrc:/images/yourimage.png";}

如果访问的资源、路径或URI中有非有效字符，则可进行URI编码

Image { source: encodeURI("http: //xxx.com/your image.png");}

4.16.2 list

import QtQuick 2.2

Rectangle {
	id: root
	width: 300
	height: 200
	Text {
		text: "simple demo"
	}
	Rectangle {
		anchors.bottom: parent.bottom
		color: "red"
		width: 50
		height: 30
	}
	Component.onCompleted: {
		console.log("%1 visualchildren:".arg(children.length))
		for (var i = 0; i < children.length; i++) {
			console.log(children[i])
		}
	}
}

//输出
qml: 2 visual children:
qml: QQuickText(0x69dca0)
qml: QQuickRectangle(0x69dfa0)
  1. list可以保存一个对象列表，用法和ECMAScript中的Array类似
  2. list只能存储对象，不能存原始值，不过可以使用var来代替原始值
  3. Item的children、data、states等属性，类型都是list

4.16.3 enumeration

enumeration代表枚举类型，通过<type>.<value>的形式使用
如Text类的，horizontalAlignment、verticalAlignment属性都是enumeration类型
可以取值Text.AlignLeft、Text.AlignVCenter、Text.AlignHCenter等

4.16.4 font

Text {
	width: 150;
	height: 100;
	wrapMode: Text.WordWrap;
	font.bold: true;
	font.pixelSize: 24;
	font.underline: true;
	text: "Hello Blue Text";
	anchors.centerIn: parent;
	color: "blue";
}

font类型对应QFont类，常用如下：
font.family， 字体家族的名字，字符串，如"Arial"、“Times”
font.bold，布尔值
font.italic，布尔值
font.underline，布尔值
font.pointSize，real类型
font.pixelSize，int类型

当font.pointSize和font.pixelSize同时指定时，pixelSize生效

4.17 宿主对象Qt

  • Qt对象的属性：
    Qt.application属性：一个对象，通过它访问应用的全局状态
    Qt.application.state表示应用状态
    Qt.application.layoutDirection表示布局方向
    Qt.application.arguments存储应用启动时的参数
    Qt.application.name
    Qt.application.version
    Qt.application.organization
    Qt.application.domain
    Qt.application还有一个信号，aboutToQuit()，在应用退出时发射和QCoreApplication的aboutToQuit()是同一个东西

    Qt.platform属性：一个对象
    Qt.platform.os操作系统的名字
    Qt.platform.inputMethod

  • Qt对象的方法：
    创建宿主类型
    Qt.rect()创建rect实例
    Qt.point()创建point实例
    Qt.size()创建size实例
    Qt.rgba() 、Qt.hsla()、Qt.darker()、Qt.lighter()、Qt.tint()等创建color类型的颜色值
    Qt.font()创建字体
    Qt.vector2d()创建vector2d
    Qt.vector3d()创建vector3d
    Qt.vector4d()创建vector4d
    Qt.quaternion()创建quaternion
    Qt.matrix4x4()创建matrix4x4

    格式化时间日期

    var today = new Date();
console.log(Qt.formatDateTime(today, "yyyy-MM-dd hh:mm:ss.zzz"));

//输出
2014-08-22 14：51：05.406

    string Qt.formatDateTime(datetime date, variant format)
    string Qt.formatDate(datetime date, variant format)
    string Qt.formatTime(datetime date, variant format)

    动态对象创建
    object Qt.createComponent(url)
    object Qt.createQmlObject(string qml, object parent,string filepath)

    其他方法
    Qt.quit()退出应用
    string Qt.md5(string)计算字符串的md5值
    string Qt.btoa(sting)对传入的数据进行Base64编码
    string Qt.atob(string)对传入的数据进行Base64解码
    object Qt.binding(function)为JS表达式创建一个对象，用于绑定到QML对象的某个属性上
    object Qt.locale()返回指定名字的区域对象
    string Qt.resolvedUrl(url)将传入的相对路径转化为全路径URL
    bool Qt.openUrlExternally(string)使用系统默认的方式打开一个URL
    list<string> Qt.fontFamilies()返回系统支持的字体族的名字列表

shang_cm
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt Quick/QML入门到精通_专栏demo对应文章目录(目前50个左右demo/长期更新)
抵抗时间扭曲，坚持做一件有意义的事
09-01 9832
自定义图标下拉列表框的效果如下所示:自定义三态按钮的效果如下所示:传送门:53.qt quick-自定义三态按钮、自定义图标下拉列表框_诺谦的博客-CSDN博客传送门:59.qt quick-qml调色板(颜色取色器)实现、自定义QQuickStyle样式_诺谦的博客-CSDN博客63.qt quick-QML侧边滑动栏(不需要任何图片资源,支持自定义左右方向和大小)_诺谦的博客-CSDN博客_qt实现好看侧边栏。...
Qt Quick核心编程
weixin_44730555的博客
04-26 1594
第一章 Qt Quick概览 1.1什么是Qt Quick 概述，Qt的软件名字是Qt Creator。先来将几个名词：IDE:集成开发环境。SDK:软件开发工具包。API:应用程序编程接口,是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。Qt Quick是Qt SDK4.7引入的一种新的界面开发框架...
qt quick 核心编程源码
06-04
《Qt Quick核心编程》起始于基础的开发环境搭建和Qt Creator快速介绍，帮助读者正确使用开发环境；着力于QML语言基础、事件、Qt Quick基本元素，辅以简要的ECMAScript（JavaScript）语言介绍，使得读者能够快速熟悉Qt Quick的基本知识和开发过程；对于Qt Quick中的关键主题，如动画、Model-View、Component、网络、多媒体，做了详尽入微的讲解，让读者一册在手，别无他求；QML与C++混合编程、Canvas、定制及自定义控件等高级主题，《Qt Quick核心编程》也做了详细讲解，同时提供了多个精彩的实作实例，力求概念清晰，用途明确。《Qt Quick核心编程》的内容适用于桌面与Android平台。值得一提的是，《Qt Quick核心编程》覆盖了Android开发的多个主题，如拍照、定位、录音、国际化、可伸缩界面等，也是使用Qt Quick进行移动开发不可错过的。
Qt Quick 核心编程 原版PDF 第一部分
01-18
Qt Quick 核心编程 原版PDF 这是目前最全最易理解的QML书籍了 第一部分 由于上传限制文件大小 所有有两个压缩包
QtQuick核心编程（有目录完整版） 百度云链接
09-10
学习QML的必备书籍，走过路过不要错过。QML是一种描述性的脚本语言，文件格式以.qml结尾。语法格式非常像CSS(参考后文具体例子)，但又支持javascript形式的编程控制。
Qt Quick核心编程.pdf
12-29
Qt Quick核心编程，高清，带目录，全部是自己加的目录。
Qt Quick核心编程
天码丶行满
05-19 705
环境配置： 参考： 1、在https://www.oracle.com/java/technologies/downloads/#java8。 jdk-8u361-windows-i586.exe jdk-8u361-windows-x64.exe 2.5.3 Qt Quick Designer 1、qmake是Qt SDK提供的一个工具，用来分析项目文件、生成项目所需的Makefile。 2、...
QtQuick核心编程学习（1）
weixin_44820280的博客
03-07 517
第五章 ECMAScript初探 5.1 语法 1 区分大小写 2 若类型 没有特定类型 用var，但是信号有特定类型 3 语句后的分号可有可无 5.2 原始值和引用值 变量可以存放两种类型的值原始值和引用值 原始值：内部变量 存放在栈上。但类的成员也我初始值，但存在堆上。 引用值：一个指针 5.5 对象 Object Object类是所有类的基类 ...
Qt Quick核心编程.安晓辉(详细书签).pdf
02-17
完整版 Qt Quick核心编程.高清扫描版,带有超级详细的书签.虽为完整版,但仅供预览,喜欢的话一定要去购买实体书.
QtQuick核心编程(1)
heyuye110
08-07 443
1.1 两种启动模式 // 第1种: QQmlApplicationEngine + Item #include <QGuiApplication> #include <QQuickView> int main(int argc, char *argv[]) { QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling); QGuiApplication app(argc, argv);
Qt+Quick核心编程.pdf
12-26
Qt+Quick核心编程.pdf 高清扫描版 安晓辉 著 Qt quick
Qt Quick核心编程　源码
12-14
Qt Quick核心编程 随书源码 安晓辉 CD SRC
《qt quick核心编程》笔记二
冰糖葫芦的夏天的博客
07-27 233
MouseArea是专门处理鼠标的Item，具有一个pressed信号Loader是专门用来动态创建组件的，可以从QML文件中创建组件，也可以通过指定sourceComponent属性为要创建的组件idLoader具有一个信号loaded，当组件被创建完成时被触发。还有一个属性Item表示当前已经加载的对象Text、TextInput、TextEdit等控件不支持定制元素背景，可通过放置一个z序更小的Rectangle来实现。
Qt Quick学习一（核心编程）
奔跑的蜗牛
03-08 2590
在一个quick 程序中其实 .qml 和c++文件是两个平行的世界，所以想要在qml中使用c++ 在qt中提供了两种方法               a、把c++的一个类注册为qml环境的一个类型  这样就能在qml环境中使用该类型创建对象               b、在c++中构造一个对象，将这个对象设置为qml的上下文属性，在qml中能够直接使用该属性 想要在qml中使用 c
QT6窗口系统之QT底层窗口QWindow：QT框架中哪些常见窗口是基于QWindow的? 如何实现QT框架栅格窗口？如何实现QT框架OpenGL窗口？
QT界面开发界面美化
07-07 849
QT6窗口系统之QT底层窗口QWindow：QT框架中哪些常见窗口是基于QWindow的?如何实现QT框架栅格窗口？如何实现QT框架OpenGL窗口？简介本文介绍了QT6窗口系统中的QT底层窗口QWindow， QWindow提供的API，以及QT框架中哪些常见窗口是基于QWindow的。本文还介绍了如何使用QBackingStore和QWindow搭配使用实现QT框架栅格窗口，同时介绍了QBackingStore和QSurface的一些概念和 API。
Qt QLineEdit详解
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
04-29 570
QLineEdit是一个单行文本编辑器。行编辑允许用户使用一组有用的编辑功能输入和编辑单行纯文本，包括撤消和重做、剪切和粘贴以及拖放。通过更改行编辑的echoMode，它也可以用作“只写”字段，用于密码等输入。文本的长度可以限制为maxLength，文本可以使用validator或inputMask进行任意约束，也可以同时使用这两种方法。在同一行编辑的validator和inputMask之间切换时，最好清除validator或输入mask，以防止出现未定义的行为。
【Qt】信号与槽
最新发布
m0_66599463的博客
04-30 648
1、信号和槽的概述 1.1 信号的本质 1.2 槽的本质 2、信号和槽的使用 2.1 连接信号的槽 click和clicked 2.2 第二种自定义创建槽函数的方式 3、自定义信号和槽 3.1 ⾃定义信号函数书写规范 3.2 带参数得槽和函数 4、信号与槽的连接方式 4.1 一对一 4.2 一对多 4.3 多对一 5、信号和槽的其他说明 5.1 信号与槽的断开 5.2 Qt4 版本信号与槽的连接 5.3 使⽤ Lambda 表达式定义槽函数 5.4 信号与槽的优缺点
qt——窗口置灰不可操作
qq_43287763的博客
04-24 581
虽然`setEnabled(false)`会自动让大多数控件看起来是灰色的，但有时你可能需要更明显的视觉效果，或者要自定义非标准控件的视觉表现。在Qt中实现一个窗口（或窗口中的特定部分）置灰并不可操作，通常涉及到两个概念：禁用窗口的交互功能以及视觉上的置灰效果。如果你希望整个窗口都不可交互，可以简单地使用`QWidget`的`setEnabled(false)`方法。这将禁用窗口及其所有子控件的交互能力。这段代码将在窗口的内容上绘制一个半透明的灰色矩形，从而给用户一种窗口被禁用的视觉印象。
qt quick核心编程pdf
10-18
《Qt Quick核心编程》是一本关于Qt Quick编程的PDF电子书。Qt Quick是一种用于GUI应用程序开发的框架，它具有直观的用户界面设计和高效的渲染速度。这本书主要介绍了Qt Quick框架的核心概念和编程技巧。 《Qt Quick核心编程》首先介绍了Qt Quick的基本概念，包括Qt Quick的结构和工作原理。然后，它详细介绍了Qt Quick中的各种重要组件，如Item、Rectangle、Image等，以及它们的属性和使用方法。此外，书中还介绍了如何使用Qt Quick的绘图API进行绘图操作，以及如何使用动态属性和动画来实现交互效果。 此外，书中还介绍了Qt Quick中的布局和响应式设计，使得应用程序能够有效适配不同的屏幕尺寸和方向。它还介绍了Qt Quick中的各种视觉效果和特性，如渲染和模糊效果，以及通过使用C++和Qt Quick进行混合编程的方法。 通过阅读《Qt Quick核心编程》，读者可以了解Qt Quick的核心概念和编程技巧，从而能够快速开发出功能丰富、直观友好的GUI应用程序。这本书适用于有一定编程基础和对Qt Quick感兴趣的读者，他们可以通过实践项目和示例代码来巩固所学的知识。 总之，《Qt Quick核心编程》是一本实用的指南，通过它读者可以掌握Qt Quick框架的核心概念和编程技巧，并能够使用Qt Quick快速开发出高效、直观的GUI应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值