qml学习笔记

目录

• 简言
  • [1. 基础语法](#1. 基础语法)
  • [2. 类型](#2. 类型)
  • [3. 属性](#3. 属性)
    *
    • [1. id属性](#1. id属性)
    • [2. 属性（Property Attributes）](#2. 属性（Property Attributes）)
    • [3. 信号（Signal Attributes）](#3. 信号（Signal Attributes）)
    • [4. 信号处理程序（Signal Handler Attributes）](#4. 信号处理程序（Signal Handler Attributes）)
    • [5. 方法（Method Attributes）](#5. 方法（Method Attributes）)
    • [6. 枚举属性（Enumeration Attributes）](#6. 枚举属性（Enumeration Attributes）)

简言

本文的编写环境为：

版本: Qt 6.5.3

IDE: Qt creator

简单总结一些去年学习QML的总结吧，看此文章需要一定的语法基础，至少能写出hello World这种，简单划分为语法基础 ，特性基础 ，组件的类型 ，常用的组件 ，qml与C++的交互。

1. 基础语法

QML是一种描述用户界面的声明式语言。它将用户界面分解成一些更小的元素，这些元素能够结合成一个组件。

QML语言描述了用户界面元素的形状和行为。用户界面能够使用JavaScript来提供修饰，或者增加更加复杂的逻辑。从这个角度来看它遵循HTML-JavaScript模式，但QML是被设计用来描述用户界面的，而不是文本文档。

从QML元素的层次结构来理解是最简单的学习方式。子元素从父元素上继承了坐标系统，它的x,y坐标总是相对应于它的父元素坐标系统。

所以学习它还需要一些JavaScript的基础，如果学过C，C++之类的语言可以到后面学习JavaScript。这里笔者就不赘述了

• QML文件以.qml为扩展名。

• 由一个根组件管理所属它下的所有组件

• 示例之后，笔者会解释大部分语句的含义

• 示例：

  import QtQuick 2.15 // 导入 QtQuick 2.15版本的模块
  
  Window { // 根组件
      id: rootWindow // id名 一个"文件"里组件的唯一标识符
      width: 400 // <属性名>: <值>
      height: 300
      color: "lightblue"
      Component.onCompleted: { // 组件创建完成时
          show(); // 正常情况下运行不需要手动调用显示窗口，会自动打开，写上是因为有些时候不会自动显示窗口
      }
  
      Rectangle { // rootWindow的子组件
          id: rectangle
          width: 100
          height: 100
          anchors.centerIn: rootWindow // 让组件保持在rootWindow的中间
      }
  }

• import 导入声明一直指定的模块版本，结构为 import 模块名 [版本号]，在Qt6之后版本号可写可不写，会自动导入最新的版本。

• Window,Rectangle是由QtQuick 模块提供的组件，一个组件的构成规范与常见的语言一样由字母下，划线，数字构成 但组件有一点特殊需要以大写字母开头表示它是一个组件 ，笔者喜欢纯字母构成。

• 这里以width : 400 举例，对应的width为属性名，:是绑定的含义(稍后在属性小节解释 )，400为属性值

2. 类型

property是注册属性的含义，笔者稍后会在属性小节解释。

类型名称	描述	示例
bool	表示布尔值（true/false）。	property bool isActive: true
date	表示日期和时间。	property date lastUpdated: new Date()
double	表示双精度浮点数。	property double value: 3.1415
int	表示整数。	property int count: 100
string	表示文本字符串。	property string greeting: "Hello, QML!"
url	表示资源路径。	Image { source: "asset:///images/logo.png" }
list	表示对象列表，结构为list<类型名>.	list<type> myList = [obj1, obj2, obj3]
real	表示实数（与 double 类似）。	property real coordinate: 123.456
var	表示通用类型，可以容纳任何类型的值。	property var dynamicValue: "Hello"
variant	表示变体类型，用于存储多种数据类型的值。	property variant settings: { name: "John", age: 30 }
void	表示空值类型。	property void emptyValue

3. 属性

属性有点特殊接下来笔者会依次解释。

1. id属性

• 每个QML对象都有一个唯一的id属性。
• id用于标识对象，并允许其他对象引用它。
• id必须以小写字母或下划线开头，且不能包含特殊字符。
• id在对象实例化后不可更改。

示例：

TextInput { id: myTextInput; text: "Hello World" }
Text { text: myTextInput.text  }

---

2. 属性（Property Attributes）

• 属性用于存储对象的状态或值。

• 属性可以是静态值或动态绑定表达式。

• 定义属性时可使用修饰关键字：default（默认属性）、required（必填属性）、readonly（只读属性）;

• 结构: 修饰符 property 类型名 属性名 : 属性值

• readonly修饰符，笔者常用需要组件内部维护的属性 或者一个常量值 ，如下面的举例QCButton内部维护了一个记录的点击次数属性，我并不想组件外的对象更改它，详情如下。

• required修饰符，需要由组件的使用者提供值，笔者这里举例为使用时需要给一个按钮指定按钮的作用。

• 示例：

  // QCButton.qml
  import QtQuick 2.15
  import QtQuick.Controls
  
  Rectangle {
      id: button
      // 需使用QCButton者，必须指定name属性
      required property string name
      // 点击次数 readonly只能初始化一次，通过让它绑定一次其他可更改的属性达到更改它的值效果
      readonly property int count: area.clickedCount
      width: 100
      height: 100
      anchors.centerIn: parent
  
      Text { // 文本组件
          id: text
          anchors.centerIn: parent
          text: qsTr(name) + count
      }
  
      MouseArea {
          id: area
          property int clickedCount: 0
          anchors.fill: parent // 填充父组件
          onClicked: { // 每点击一次+1
              clickedCount++;
          }
      }
  }

  // main.qml
  import QtQuick 2.15
  
  Window { // 根组件
      id: rootWindow
      // 默认属性 default 可写可不写因为默认就是"默认属性"
      default property string defaultProperty: "默认属性"
      // 这里就没写
      property string buttonText: "点击次数: "
  
      width: 400
      height: 300
      color: "lightblue"
      Component.onCompleted: {
          show();
      }
  
      // QCButton 自定义组件
      QCButton {
          name: rootWindow.buttonText
  //        count: 0 // 这里是错误的，因为readonly修饰的属性只能初始化一次
          anchors.centerIn: parent
      }
  }

---

3. 信号（Signal Attributes）

• 信号用于在特定事件发生时通知其他对象。

• 信号由QML类型提供，例如onTextChanged表示文本变化。

• 示例：

  onNextColorChanged: console.log("The  next color will be: " + nextColor.toString()) 

---

4. 信号处理程序（Signal Handler Attributes）

• 信号处理程序是响应信号的代码块，其实就是槽函数。

• 示例：

  onNextColorChanged: console.log("The  next color will be: " + nextColor.toString()) 

---

5. 方法（Method Attributes）

• 方法是定义在对象上的JavaScript函数。

• 示例：

  function setInternalColor() {
      color = "#111111"
  }

---

6. 枚举属性（Enumeration Attributes）

• 枚举类型有点特殊我给个示例，我个人不推荐使用QML注册的枚举，Qt creator支持的并不好，没有智能提示，笔者一般都是由C++注册枚举类型到QML。

• 示例：

      enum Direction { // 注册枚举
          Left, Right, Up, Down
      }
      // list列表
      property list<int> listInt: [rootWindow.Direction.Left,2,3,4]