【QML之·QML的介绍】

系列文章目录

---

---

前言

---

一、体验QML之美

1.1 概述

• QML是一种声明性的语言 (Qt Meta-Object Language)，用于创建用户界面。它是Qt框架的一部分，主要用于开发跨平台的桌面、移动和嵌入式应用程序。

• QML基于JavaScript和CSS的概念，并增加了一些独特的功能来支持Qt框架的特性。它允许开发者以声明性的方式描述用户界面的结构、外观和行为。

• QML使用一种层次化的结构来组织界面元素，可以通过使用属性和信号来控制元素的样式和行为。它允许开发者创建可重用的组件，并将它们组合在一起以构建复杂的用户界面。

• QML还提供了与C++等其他编程语言的良好集成，开发者可以使用QML来定义界面，然后通过Qt的信号槽机制与后端代码进行通信和交互。

注意： QML 和 Qt Quick的关系相当于 C++ 和 标准库的关系

• 绑定和赋值在QML中是两种不同的概念

绑定：

绑定是一种动态的机制，它允许属性之间建立关联，当一个属性的值发生变化时，与之绑定的其他属性也会相应地更新。绑定使用bind关键字，可以将一个属性绑定到另一个属性、JavaScript表达式、函数或信号。当绑定的源属性的值发生变化时，目标属性会自动更新。

赋值：

赋值是将一个值直接赋给一个属性，使其具有固定的值。例如，可以将一个字符串赋给一个文本属性或将一个数字赋给一个宽度属性。赋值是静态的，一旦赋值完成，属性的值将保持不变，除非再次进行赋值。

• 命令式UI和声明式UI是两种不同的UI设计和开发风格

命令式 Ui：

命令式UI是通过编写一系列命令来构建UI界面。开发者需要手动指定每个UI元素的位置、大小、样式和交互行为，以及处理用户输入和状态变化。常见的命令式UI开发框架包括原生的iOS和Android开发工具，以及诸如Qt Widgets等桌面应用开发框架。命令式UI开发方式灵活，可以实现非常复杂的UI交互，但也需要更多的代码和开发工作量。

声明式Ui：

声明式UI是通过描述UI的结构和外观来构建UI界面。开发者使用一种类似于标记语言的描述语言，将UI元素的结构和样式定义为一系列声明。开发者只需要指定UI元素的属性和关系，而无需关注具体的实现细节。常见的声明式UI开发框架包括Web前端开发中的HTML/CSS和JavaScript框架（如React、Vue、Angular），以及移动应用开发中的Flutter和React Native等跨平台框架。声明式UI开发方式简洁、可维护性高，并且可以快速迭代开发，但在处理复杂的UI交互时可能会受限。

声明式Ui → 自动更新→绑定

1.2 QML的优势

• 声明性语法： QML使用类似于JavaScript的语法，通过描述界面的结构和行为，而不是编写繁琐的代码。这使得界面的开发更加直观和易于理解。

• 跨平台支持： QML可以用于开发跨平台的应用程序，它可以在多种操作系统上运行，如Windows、macOS、Linux和嵌入式系统等。

• 与C++集成： QML可以与C++代码无缝集成，这使得开发人员可以使用C++的强大功能来处理底层逻辑和性能密集的任务，同时使用QML来创建用户界面。

• 动画和视觉效果： QML提供了丰富的动画和视觉效果，可以轻松地创建各种各样的过渡效果、动态效果和交互效果，增加应用程序的吸引力和交互性。

• 可扩展性： QML支持组件化开发，可以将界面分成多个可重用的组件，使得开发过程更加高效和灵活。同时，QML还支持自定义的组件和插件，可以根据项目需求进行定制和扩展。

1.3 QML的适用场景

• 移动应用程序： QML适用于开发移动应用程序，它可以轻松地创建出具有 流畅动画和吸引人界面的应用程序。

• 嵌入式应用程序： QML适用于嵌入式系统开发，它具有较低的资源占用和较高的性能，在嵌入式设备上能够提供快速的用户界面。

• 桌面应用程序： QML也适用于开发桌面应用程序，它可以为桌面应用程序带来更好的用户体验和交互性。

2. 实例演示

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 1200
    height: 800
    title: qsTr("大风车")

    Image {
        anchors.fill: parent //用当前元素填充parent
        id: background
        source: "./images/background.png"

        Image {
            id: pole
            width: 100
            height: 400
            anchors.bottom: parent.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            source: "./images/pole.png"
        }

        Image {
            id: wheel
            width: 400
            height: 400
//            anchors.centerIn: parent
            anchors.verticalCenter: pole.top
            anchors.horizontalCenter: pole.horizontalCenter
            source: "./images/pinwheel.png"

            Behavior on rotation {  //为特定的属性修改行为--提供动画
                NumberAnimation {
                    duration: 500
                }
            }
        }

        MouseArea {
            anchors.fill: parent
            onClicked: wheel.rotation += 360
        }
    }
}

运行结果：

二、Qt Quick

2.1 概述

QML和Qt Quick的关系就像C++与C++标准库
QML（语言）
Qt Quick（标准库）

• Qt QML模块：
  • 为QML应用程序提供了基础框架。
    • Qt QML模块提供QML API和C++API

Qt Quick模块：

• 提供了许多可视化组件、模型视图支持、动画框架，以及更多用于构建用户界 面的功能。
  • Qt Quick模块提供QML API和C++API

Qt Quick是Qt 6中用户界面技术的总称,在Qt 4
入。是几种技术的集合:

• QML：用户界面的标记语言
• JavaScript：动态脚本语言
• Qt C++：高度可移植的增强型C++库

---

总结