/*********************************************************************************************
* Qt Quick Hello World hacking
* 说明：
* 本代码是Qt生成Quick应用程序的时候自动生成Hello World程序；
*
* 2015-5-17 深圳 晴 南山平山村 曾剑锋
********************************************************************************************/
\\\\\\\\\-*- 目录 -*-/////////
| 一、main.cpp
| 二、main.qml
| 三、MainForm.ui.qml
\\\\\\\\\\\\\\\//////////////
一、main.cpp
#include <QApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
/**
* The QApplication class manages the GUI application's control flow and main settings.
* 初始化并配置GUI界面环境
*/
QApplication app(argc, argv);
/**
* QQmlApplicationEngine provides a convenient way to load an application from a single QML file.
* 创建QML引擎（engine)
*/
QQmlApplicationEngine engine;
/**
* QStringLiteral: Creating a QString from it is free in this case, and the generated string data
* is stored in the read-only segment of the compiled object file.
* 这是一个宏，用于创建一个字符串，该字符串存放在自读数据区
* QUrl: The most common way to use QUrl is to initialize it via the constructor by passing a QString.
* Otherwise, setUrl() can also be used.
* 最常用于初始化一个QUrl的是给其构造函数传一个字符串，此外也可以使用setUrl()
* engine.load: Loads the root QML file located at filePath：.
* 加载用QML引擎加载要显示的界面
*/
engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
/**
* Enters the main event loop and waits until exit() is called.
* 进入主事件循环，并等待直到exit()函数被调用
*/
return app.exec();
}
二、main.qml
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
/**
* ApplicationWindow is a Window that adds convenience for positioning items, such as MenuBar, ToolBar,
* and StatusBar in a platform independent manner.
* 被main.cpp调用，显示的主窗口
*/
ApplicationWindow {
title: qsTr("Hello World") //窗口的标题: Hello World
width: 640 //窗口宽：640（单位不知道）
height: 480 //窗口高：480（单位不知道）
/**
* Note: By default, an ApplicationWindow is not visible.
* 窗口设为可见
*/
visible: true
/**
* 为窗口添加菜单栏，我怎么感觉应该叫菜单条 :)
*/
menuBar: MenuBar {
/**
* 观察这里，同一级别只有一个Menu，也就意味着这个菜单只有一个菜单选项
*/
Menu {
title: qsTr("&File") //唯一的一个菜单的名字叫：File。你可以通过Alt+F快捷键来操作
/**
* 观察这里，同一级别，有两个子菜单选项
*/
MenuItem {
text: qsTr("&Open") //第一个子菜单的名字是：Open。你可以通过Alt+O快捷键来操作
/**
* 1. onTriggered: 是代表点击了一次Open这个子菜单
* 2. messageDialog.show: 代表会弹出信息框
* 3. qsTr: Wherever your script uses "quoted text" for text that will be presented to the user,
* ensure that it is processed by the QCoreApplication::translate() function. Essentially
* all that is necessary to achieve this is to use the qsTr() script function.
* 意思也就是说如果你要显示字符串，就用这个函数处理一下再显示的意思
*/
onTriggered: messageDialog.show(qsTr("Open action triggered"));
}
MenuItem {
text: qsTr("E&xit") //第一个子菜单的名字是：Exit。你可以通过Alt+E快捷键来操作
onTriggered: Qt.quit(); //退出
}
}
}
/**
* 这里其实是去找同一级目录下的MainForm.ui.qml文件，而MainForm.ui.qml文件中必须是一个Item类型的控件
*/
MainForm {
anchors.fill: parent //设置填充方式
/**
* 设置MainForm.ui.qml中3个按键的单击事件，弹一个信息框
*/
button1.onClicked: messageDialog.show(qsTr("Button 1 pressed"))
button2.onClicked: messageDialog.show(qsTr("Button 2 pressed"))
button3.onClicked: messageDialog.show(qsTr("Button 3 pressed"))
}
MessageDialog {
id: messageDialog //消息对话框的变量名
title: qsTr("May I have your attention, please?") //信息框的标题
/**
* 我个人认为这是动态绑定一个函数，这个函数是显示函数(show)
*/
function show(caption) {
messageDialog.text = caption; //信息框显示的内容
messageDialog.open(); //让信息框显示
}
}
}
三、MainForm.ui.qml
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Layouts 1.1
/**
* All visual items in Qt Quick inherit from Item. Although an Item object has no visual appearance,
* it defines all the attributes that are common across visual items, such as x and y position,
* width and height, anchoring and key handling support.
*
* The Item type can be useful for grouping several items under a single root visual item.
* 个人感觉Item相当于是一个容器
* Rectangle items are used to fill areas with solid color or gradients, and/or to provide a rectangular border.
* 这里个人尝试了将Item换成Rectangle，没什么很大的变化，能够正常的显示，不过还是建议使用Item，因为貌似Rectangle更适合做有边框效果的事。
*/
Item {
width: 640 //宽：640（单位未知）
height: 480 //高：480（单位未知）
/**
* Property aliases are properties which hold a reference to another property.
* 别名属性设置，并设置对应的值，主要是为了方便外部引用
*/
property alias button3: button3
property alias button2: button2
property alias button1: button1
/**
* 这里采用列布局
*/
RowLayout {
anchors.centerIn: parent //对齐方式：居中
/**
* 接下来放置3个按钮(Button)
*/
Button {
id: button1 //按钮的变量名
text: qsTr("Press Me 1") //按钮的显示文字
}
Button {
id: button2
text: qsTr("Press Me 2")
}
Button {
id: button3
text: qsTr("Press Me 3")
}
}
}
