如何创建和编写QML应用程序（实例教程）

末蓝、 2022-09-04 09:48 467阅读 0赞

**目录**

1.编程环境

2.创建QML应用程序

3.编写QML应用程序

3.1 main.cpp

3.2 main.qml

3.3 定义QML文件对象层次结构

3.4 完整的QML文档构成

3.5 创建和运行QML项目

3.6 使用控件创建QML应用程序

3.7 处理用户输入

3.8 属性绑定

3.9 动画

3.10 为重用定义自定义QML类型

3.11 深入了解QML的开发

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

#  #

**注意：文中带链接的文字表示可以在QT的官方文档中搜索到对应的内容。**

# 1.编程环境 #

我电脑上安装的是VS2015和QT5.9，并且在VS2015上安装了插件“Qt Visual Studio Tools”，这样就可以用VS来开发QT的应用程序了。关于如何搭建开发环境的问题，我有空再专门介绍一下。

![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][]

# 2.创建QML应用程序 #

![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][]

# 3.编写QML应用程序 #

## 3.1 main.cpp ##

main.cpp的内容在本文不是重点，这里只是展示出来看一下。

#include <QGuiApplication>
    #include <QQmlApplicationEngine>
    
    int main(int argc, char *argv[])
    {
    #if defined(Q_OS_WIN)
        QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    #endif
    
        QGuiApplication app(argc, argv);
    
        QQmlApplicationEngine engine;
        engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
        if (engine.rootObjects().isEmpty())
            return -1;
    
        return app.exec();
    }

## 3.2 main.qml ##

这个qml文件里面放的是用QML语言编写的代码，这段代码的用途是在屏幕上显示一个矩形框。

import QtQuick 2.9
    import QtQuick.Window 2.2
    
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
    }

来看一下运行的效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 7][]

## 3.3 定义QML文件对象层次结构 ##

QML文档中的对象声明定义了将在可视场景中显示的内容。Qt Quick为所有用户界面提供了基本的构建块，例如用于显示图像和文本的对象以及用于处理用户输入的对象。下面是一个简单的对象声明，定义了一个有颜色的矩形，中间有一些文本:

Rectangle {
          width: 200
          height: 100
          color: "red"
    
          Text {
              anchors.centerIn: parent
              text: "Hello, World!"
          }
      }

![20210812191156479.png][]

这定义了一个具有根矩形对象的对象层次结构，根矩形对象有一个子文本对象。Text对象的父对象自动设置为Rectangle，类似地，通过QML将Text对象添加到Rectangle对象的子属性。

##    3.4 完整的QML文档构成 ##

上面示例中使用的矩形和文本类型都是由QtQuick导入(import)的。将import和对象声明放在一起，我们就得到了一个完整的QML文档:

import QtQuick 2.3
    
      Rectangle {
          width: 200
          height: 100
          color: "red"
    
          Text {
              anchors.centerIn: parent
              text: "Hello, World!"
          }
      }

如果我们将该文档保存为"HelloWorld.qml"，我们可以加载和显示它。

##    3.5 创建和运行QML项目   ##

VS直接编译运行就OK了，这里介绍一下Qt Creator的方法。

要显示由QML文档定义的图形场景，可以使用Qt Creator加载它。 对于简单的UI文件，比如这个，在Qt Creator中选择File > New File或Project > Applications > Qt Quick UI。    
按下绿色的Run按钮运行应用程序。 您应该看到文本Hello, World! 在一个红色矩形的中心。    
有关在Qt Creator中创建和运行项目的更多信息，请访问以下页面:

*  [Creating Qt Quick Projects][](创建Qt Quick项目)
 *  [Building and Running an Example][Creating Qt Quick Projects](构建和运行示例)

##    3.6 使用控件创建QML应用程序 ##

Qt Quick提供了基本的图形元素，Qt Quick Controls提供了在应用程序中使用的现成的QML类型。  
插入ApplicationWindow类型是创建应用程序的一个很好的起点。一个应用的UI有这样的基本布局:

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 8][]

在每个区域内，可以添加并连接不同的控件以形成一个应用程序。例如，下面的代码片段是使用前面布局的基本应用程序:

//import related modules
      import QtQuick 2.3
      import QtQuick.Controls 1.2
      import QtQuick.Window 2.2
    
      //window containing the application
      ApplicationWindow {
    
          //title of the application
          title: qsTr("Hello World")
          width: 640
          height: 480
    
          //menu containing two menu items
          menuBar: MenuBar {
              Menu {
                  title: qsTr("File")
                  MenuItem {
                      text: qsTr("&Open")
                      onTriggered: console.log("Open action triggered");
                  }
                  MenuItem {
                      text: qsTr("Exit")
                      onTriggered: Qt.quit();
                  }
              }
          }
    
          //Content Area
    
          //a button in the middle of the content area
          Button {
              text: qsTr("Hello World")
              anchors.horizontalCenter: parent.horizontalCenter
              anchors.verticalCenter: parent.verticalCenter
          }
      }

该应用程序有两个菜单项和中间的一个按钮。单击Exit菜单项将关闭应用程序。  
也有不同的导航方法和不同的控件，如按钮和滑块可用。以下示例可从Qt Creator中获得，演示了不同的控件和布局。  
[Basic Layouts][Creating Qt Quick Projects](基本布局)  
[Touch Gallery][Creating Qt Quick Projects](联系画廊)

您可以随意将这些片段复制并粘贴到这个简单的Hellow World应用程序中，以了解QML是如何工作的。

##    3.7 处理用户输入 ##

使用QML定义用户界面的最大优点之一是，它允许用户界面设计人员使用简单的JavaScript表达式定义应用程序应该如何对事件作出反应。在QML中，我们将这些事件称为信号，这些信号由信号处理程序处理。  
例如，考虑以下例子:

Rectangle {
          width: 200
          height: 100
          color: "red"
    
          Text {
              anchors.centerIn: parent
              text: "Hello, World!"
          }
    
          MouseArea {
              anchors.fill: parent
              onClicked: parent.color = "blue"
          }
      }

这个例子可以保存为“ClickableHelloWorld”。并使用qmlscene运行。当用户点击窗口中的任何位置时，矩形将从红色变为蓝色。注意，MouseArea类型也会为触摸事件发出点击信号，所以这段代码也可以在移动设备上工作。  
键盘用户输入也可以用一个简单的表达式来处理:

Rectangle {
          width: 200
          height: 100
          color: "red"
    
          Text {
              anchors.centerIn: parent
              text: "Hello, World!"
          }
    
          focus: true
          Keys.onPressed: {
              if (event.key == Qt.Key_Return) {
                  color = "blue";
                  event.accepted = true;
              }
          }
      }

通过接受焦点，只要按下返回键，颜色就会变成蓝色。

## 3.8 属性绑定 ##

对象及其属性构成了在QML文档中定义的图形界面的基础。QML语言允许属性以各种方式相互绑定，从而支持高度动态的用户界面。  
在下面的例子中，每个子矩形的几何图形都被绑定到父矩形的几何图形上。如果父矩形的几何形状发生变化，每个子矩形的几何形状将由于属性绑定而自动更新。

Rectangle {
          width: 400
          height: 200
    
          Rectangle {
              width: parent.width / 2
              height: parent.height
          }
    
          Rectangle {
              width: parent.width / 2
              height: parent.height
              x: parent.width / 2
          }
      }

##    3.9 动画 ##

属性也可以通过动画动态更新。QtQuick导入提供了各种动画类型，可用于对属性值进行动画更改。在下面的例子中，一个属性被动画化，然后显示在文本区域中:

Rectangle {
          color: "lightgray"
          width: 200
          height: 200
    
          property int animatedValue: 0
          SequentialAnimation on animatedValue {
              loops: Animation.Infinite
              PropertyAnimation { to: 150; duration: 1000 }
              PropertyAnimation { to: 0; duration: 1000 }
          }
    
          Text {
              anchors.centerIn: parent
              text: parent.animatedValue
          }
      }

显示的值定期在0 ~ 150之间变化。

## 3.10 为重用定义自定义QML类型 ##

QML中最重要的概念之一是类型重用。应用程序可能有多个相似的可视类型(例如，多个按钮)，QML允许将这类东西定义为可重用的自定义类型，以最小化代码重复并最大化可读性。  
例如，假设开发人员在Button中定义了一个新的Button类型。qml文件:

// Button.qml
      import QtQuick 2.3
    
      Rectangle {
          width: 100; height: 100
          color: "red"
    
          MouseArea {
              anchors.fill: parent
              onClicked: console.log("Button clicked!")
          }
      }

该类型现在可以在应用程序中重复使用多次，如下所示:

// application.qml
      import QtQuick 2.3
    
      Column {
          Button { width: 50; height: 50 }
          Button { x: 50; width: 100; height: 50; color: "blue" }
          Button { width: 50; height: 50; radius: 8 }
      }

![20210812192247360.png][]  
    
通过这种方式，模块化用户界面类型可以在应用程序中组装和重用。  
有关如何开发自己的可重用组件的更多细节，请参阅QML对象属性。

##     3.11 深入了解QML的开发 ##

现在您已经看到了QML的作用，可以开始下一步了。下面的页面将带领您踏上QML之旅。

*  [QML Applications][Creating Qt Quick Projects](QML应用程序)
 *  [Qt Examples and Tutorials][Creating Qt Quick Projects](Qt示例和教程 )

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70]: /images/20220829/f8a440b6d0554753b34883c89d6c9e15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 1]: /images/20220829/f5fd4b3606194915b377be74a47d146f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 2]: /images/20220829/81d4dc3ccab94a3ebf09f7629bd71ac0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 3]: /images/20220829/f258d22d5a54459ba6fefdff3f3a21d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 4]: /images/20220829/de1db411a6314ba89f91ee67f0c3588c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 5]: /images/20220829/9020938d3698416b86516f63bcdb7d97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 6]: /images/20220829/509f4d3951a24f42a0230830e1bf7d65.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 7]: /images/20220829/70d7c04ec9e44ac09d0c32b36185724a.png
[20210812191156479.png]: /images/20220829/785f65dd29bc42f392b87766c4997c3e.png
[Creating Qt Quick Projects]: http://123
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pvbGluNjc4_size_16_color_FFFFFF_t_70 8]: /images/20220829/150d22b4286644f6bd2fc05ecb5f4344.png
[20210812192247360.png]: /images/20220829/0a7bd279e8f2447f8c39eee3f0cf3498.png