《qt quick核心编程》笔记一

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的形式

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入门

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

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