QML ApplicationWindow基础代码详细剖析

╰+哭是因爲堅強的太久メ 2022-09-04 15:57 145阅读 0赞

**目录**

1.如何创建工程

2.代码分析

2.1 项目代码结构

2.2 main.cpp

2.3 mian.qml

--------------------

#  #

# 1.如何创建工程 #

（第1节主要是写给没有基础的人看的，高手请直接看本文第2节。）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 3][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 6][]

# 2.代码分析 #

## 2.1 项目代码结构 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 7][]

## 2.2 main.cpp ##

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

main函数的代码很简单，跟我们写QWidget程序的主要区别就是中间的那两行：

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

这两行代码的意思是用QML引擎加载一个后缀名为“**.qml**”的文件，控制界面样式的代码都在qml文件中。

再来看看我们以前用QMainWindow来显示界面的代码：

#include "mainwindow.h"
    #include <QApplication>
    
    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
        
        MainWindow w;
        w.show();
    
        return a.exec();
    }

区别真的很小吧，所以我们在写Quick项目时，mian函数的代码照搬就行了。

## 2.3 mian.qml ##

这个文件为我们程序的界面定了一个框架，提供了状态栏、菜单栏、工具栏，让我们可以快速地构建出常用的程序界面。首先来总体浏览一遍整个文件的代码。

import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Window 2.2
    import QtQuick.Dialogs 1.2
    
    ApplicationWindow {
        title: qsTr("Hello World")
        width: 640
        height: 480
        visible: true
    
        menuBar: MenuBar {
            Menu {
                title: qsTr("&File")
                MenuItem {
                    text: qsTr("&Open")
                    onTriggered: messageDialog.show(qsTr("Open action triggered"));
                }
                MenuItem {
                    text: qsTr("E&xit")
                    onTriggered: Qt.quit();
                }
            }
        }
    
        MainForm {
            anchors.fill: parent
            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?")
    
            function show(caption) {
                messageDialog.text = caption;
                messageDialog.open();
            }
        }
    }

import QtQuick 2.4
    import QtQuick.Controls 1.3
    import QtQuick.Window 2.2
    import QtQuick.Dialogs 1.2

文件开头的这几行是导入语句，当我们要使用Qt自带的Quick控件或者我们自定义的控件时，需要在这里把控件导入进来，**就像cpp中加\#include一样**。写过Java或者Python的应该更容易明白。

ApplicationWindow {
        title: qsTr("Hello World")
        width: 640
        height: 480
        visible: true
    }

这几行代码相当于给程序定义了一个框框，所有的控件都会显示在这个框框里面，这个我们不能去掉。里面的title,width,heigth,visible是从Window类继承过来的4个属性。

*  title：标题
 *  width：宽度
 *  height：高度
 *  visible：窗口是否可见，true表示可见，设为false时窗口将隐藏

menuBar: MenuBar {
            Menu {
                title: qsTr("&File")
                MenuItem {
                    text: qsTr("&Open")
                    onTriggered: messageDialog.show(qsTr("Open action triggered"));
                }
                MenuItem {
                    text: qsTr("E&xit")
                    onTriggered: Qt.quit();
                }
            }
        }

这一段给程序添加了一个菜单栏。其中menuBar代表整个菜单栏，Menu表示一个菜单项(有子菜单的项)，MenuItem也表示一个菜单项(没有子菜单的项)。为了深入理解菜单的用法，我们尝试修改一下代码。修改前我们先看看目前的代码运行起来的样子：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 8][]

然后我们将代码修改为：

menuBar: MenuBar {
            Menu {
                title: qsTr("&File")
    
                //下面这段是新增的代码
                Menu{
                    title: qsTr("&Recent file")
                    MenuItem {
                        text: qsTr("&1.txt")
                        onTriggered: messageDialog.show(qsTr("Open action triggered"));
                    }
                    MenuItem {
                        text: qsTr("&2.txt")
                        onTriggered: messageDialog.show(qsTr("Open action triggered"));
                    }
                }
    
                MenuItem {
                    text: qsTr("&Open")
                    onTriggered: messageDialog.show(qsTr("Open action triggered"));
                }
                MenuItem {
                    text: qsTr("E&xit")
                    onTriggered: Qt.quit();
                }
            }
        }

再运行看一下（多了一个Recent file菜单）：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 9][]

MainForm {
            anchors.fill: parent
            button1.onClicked: messageDialog.show(qsTr("Button 1 pressed"))
            button2.onClicked: messageDialog.show(qsTr("Button 2 pressed"))
            button3.onClicked: messageDialog.show(qsTr("Button 3 pressed"))
        }

这段代码呢，主要是处理按钮点击事件的，这里要重点关注的是按钮是在哪里添加的？

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 10][]

这里QtCreator自动创建了一个MainForm.ui.qml，我们可以把MainForm当成一个类，程序在main.qml中定义了一个MainForm对象，并且用“**anchors.fill: parent**”来设置MainForm窗口填满它的父窗口，这里要注意一下：parent是指父类，直接相关的父类。anchors.fill指定的父类是必须是直接的父类，如果不是，可能会报错。

从上图中可以看出按钮是在MainForm.ui.qml中定义的，有3个按钮。双击MainForm.ui.qml文件默认是用Quick设计器打开的，可以直接往界面上拖拽控件。上面我是以文本方式打开的，可以看到最上面有提示“此文件应该在设计器中编辑，而不应该以普通的代码编辑的方式来写”。

MessageDialog {
            id: messageDialog
            title: qsTr("May I have your attention, please?")
    
            function show(caption) {
                messageDialog.text = caption;
                messageDialog.open();
            }
        }

MessageDialog是Quick自带的控件，是一个模态的对话框。

id: 控件的ID，相当于一个类的对象，可以用这个对象名引用MessageDialog的数据成员和函数。  
title: 对话框的标题

程序在定义这个对象的时候，还定义了一个show函数，参数是caption，caption赋值给了messageDialog.text，然后用open函数打开了对话框。

![20210815185407846.png][]

刚才我们在定义菜单栏的时候，看到了下面的代码，这个代码中的onTriggered是一个信号，就是菜单点击信号，然后为这个信号设置了对应的处理代码。当点击菜单的时候，就会执行这段代码。这段信号响应代码通过messageDialog这个对象名调用了它的show函数来弹出一个对话框。

MenuItem {
    	text: qsTr("&1.txt")
    	onTriggered: messageDialog.show(qsTr("Open action triggered"));
    }

MainForm.ui.qml的代码将在其他的文章中来详细介绍，如果想了解，可以持续关注一下。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70]: /images/20220829/ffdb4ede0a8c4936a386ac99cce2bd8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 1]: /images/20220829/11d571224d6c4d0180b22daa8e25a847.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 2]: /images/20220829/4f7fbd51ff09402f9d9dd3c5e34f30bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 3]: /images/20220829/8f594f143bd744278a4084ea9d0c045e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 4]: /images/20220829/538c83be7e654f6998ddef47923f7668.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 5]: /images/20220829/eba64b2332344c418e7b5518b0c2a4f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 6]: /images/20220829/7f7dd16c1f6743278e78e3b0545df5a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 7]: /images/20220829/7c6f2d5eef0c4e9d8a2c9e3b356ef36f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 8]: /images/20220829/91710b5f24d14afb8727e7491abc9910.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 9]: /images/20220829/8630f0c1810447c39feaef60c01cc76d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 10]: /images/20220829/cb48f2a5adf64a25b9810113f0893f33.png
[20210815185407846.png]: /images/20220829/37b71db002144afdbd7ac7f5065b1b32.png