Qt Quick Hello World hacking

/*********************************************************************************************
 *                             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
         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 {
         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")
            }

        }
    }