qml学习笔记

目录

• 简言
  • 1. 基础语法
  • 2. 类型
    • 2.1 enumeration
  • 3. 属性
    • • 1. id属性
      • 2. 属性（Property Attributes）
      • 3. 信号（Signal Attributes）
      • 4. 信号处理程序（Signal Handler Attributes）
      • 5. 方法（Method 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: 300color: "lightblue"Component.onCompleted: { // 组件创建完成时show(); // 正常情况下运行不需要手动调用显示窗口，会自动打开，写上是因为有些时候不会自动显示窗口}Rectangle { // rootWindow的子组件id: rectanglewidth: 100height: 100anchors.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" }
enumeration	表示枚举值，不能表示类型。	enum Direction { Left, Right, Up, Down }
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

2.1 enumeration

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

使用示例：

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

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.ControlsRectangle {id: button// 需使用QCButton者，必须指定name属性required property string name// 点击次数 readonly只能初始化一次，通过让它绑定一次其他可更改的属性达到更改它的值效果readonly property int count: area.clickedCountwidth: 100height: 100anchors.centerIn: parentText { // 文本组件id: textanchors.centerIn: parenttext: qsTr(name) + count}MouseArea {id: areaproperty int clickedCount: 0anchors.fill: parent // 填充父组件onClicked: { // 每点击一次+1clickedCount++;}}
  }

  // main.qml
  import QtQuick 2.15Window { // 根组件id: rootWindow// 默认属性 default 可写可不写因为默认就是"默认属性"default property string defaultProperty: "默认属性"// 这里就没写property string buttonText: "点击次数: "width: 400height: 300color: "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）

• 枚举用于定义一组常量。

• 示例：

  enum { Red, Green, Blue }