QML初识

目录

一、关于QML

二、布局定位和锚点

1.布局定位

2.锚点详解

三、数据绑定

1.基本概念

2.绑定方法

3.数据模型绑定

四、附加属性及信号

1.附加属性

2.信号

---

一、关于QML

QML是Qt框架中的一种声明式编程语言，用于描述用户界面的外观和行为；Quick是Qt框架中的一个模块，允许开发者使用QML来创建用户界面。

特点：

• 声明式语法：QML采用声明式语法，开发者只需描述界面的外观和行为，而无需关注具体的绘制和布局细节。
• 与JavaScript的无缝集成：QML可以与JavaScript无缝集成，利用JavaScript的强大功能进行应用程序逻辑的处理。
• 高效的开发流程：QML将界面设计与应用程序逻辑分离，提高了开发效率。设计师可以专注于界面的设计，而开发者可以专注于应用程序的逻辑实现。
• 丰富的组件库：Qt Quick提供了丰富的可视化组件、交互类型、动画、模型和视图等，如按钮、文本框、滑块、菜单等，方便开发者快速构建用户界面。
• 高效的动画和图形处理能力：支持各种图形渲染技术，如OpenGL、WebGL等，可以创建流畅的动画和视觉吸引人的应用程序。
• 响应式设计：控件可以自动适应不同的屏幕尺寸和设备，确保应用程序在各种设备上都能有良好的用户体验。

      

二、布局定位和锚点

1.布局定位

• 手动布局：通过设置元素的x和y属性，可以将元素放置在特定的坐标位置。这种方式适用于需要精确控制元素位置的场景，但在处理复杂布局时不够灵活。
• 定位器布局：Qt Quick提供了几种定位器类型，如Row、Column、Grid和Flow，用于自动定位元素。这些定位器可以根据元素的添加顺序和属性设置，将元素排列成一行、一列、网格或流式布局。
• 锚点布局：锚点布局是QML中最灵活的布局方式，通过指定元素的锚点属性，可以将元素相对于其父元素或其他元素进行定位。

    

2.锚点详解

每个元素都有七条锚线：左、水平中心、右、上、垂直中心、下和基线。通过设置这些锚线的属性，可以实现元素的对齐、填充和偏移等效果。

基本锚点属性：

• anchors.left：将元素的左边与指定元素的左边对齐。
• anchors.right：将元素的右边与指定元素的右边对齐。
• anchors.top：将元素的上边与指定元素的上边对齐。
• anchors.bottom：将元素的下边与指定元素的下边对齐。
• anchors.horizontalCenter：将元素的水平中心与指定元素的水平中心对齐。
• anchors.verticalCenter：将元素的垂直中心与指定元素的垂直中心对齐。
• anchors.baseline：将元素的基线与指定元素的基线对齐。

特殊锚点属性：

• anchors.fill：将元素的左边、右边、上边和下边都与指定元素的对应边对齐，实现元素的填充效果。
• anchors.centerIn：将元素的水平中心和垂直中心都与指定元素的水平中心和垂直中心对齐，实现元素的居中效果。

锚点边距和偏移：

• 可以通过leftMargin、rightMargin、topMargin和bottomMargin属性设置元素的锚点边距，以指定元素与锚点之间的空白空间量。
• 还可以使用horizontalCenterOffset和verticalCenterOffset属性设置元素的锚点偏移，以实现更精细的定位控制。

注意事项：

• 锚点布局的优先级大于绝对定位（即设置x和y属性）。
• 元素的锚点只能设置为其父元素或兄弟元素，不能设置为其他无关元素。

   

示例：

import QtQuickWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Item {id: mItemanchors.fill: parentRectangle {id: bkanchors.fill: mItemcolor: "aliceblue"}Rectangle {width: 50height: 50color: "red"}Rectangle {x: 50y: 50width: 50height: 50color: "blue"}Rectangle {id: rect_centeranchors.centerIn: parentwidth: 50height: 50color: "red"}Rectangle {id: rect_rightanchors.right: parent.rightanchors.verticalCenter: parent.verticalCenteranchors.rightMargin: 20width: 50height: 50color: "green"}Rectangle {id: rect_bottomanchors.bottom: parent.bottomanchors.horizontalCenter: parent.horizontalCenteranchors.bottomMargin: 20width: 50height: 50color: "green"}Rectangle {id: rect_1anchors.right: rect_center.leftanchors.verticalCenter: parent.verticalCenteranchors.bottomMargin: 20width: 50height: 50color: "pink"}Rectangle {id: rect_2anchors.bottom: rect_center.topanchors.horizontalCenter: parent.horizontalCenterwidth: 50height: 50color: "pink"}}
}

运行结果：

    

三、数据绑定

1.基本概念

• 属性绑定：QML中的属性绑定允许将一个属性的值与另一个属性或表达式进行关联。当关联的属性或表达式的值发生变化时，绑定的属性会自动更新。
• 单向绑定：QML中的属性绑定通常是单向的，即从数据源到目标属性。这意味着当数据源属性发生变化时，目标属性会自动更新，但反之不然。
• 动态绑定：QML支持动态绑定，这意味着绑定关系可以在运行时更改。这允许根据应用程序的状态或用户交互来动态更新界面。

ps：在使用属性绑定时，应避免创建循环绑定，这可能导致无限循环和性能问题。

      

2.绑定方法

• 冒号绑定：这是最常见的绑定方法，使用冒号操作符“:”在属性定义时进行绑定。
• 使用Binding对象：QML提供了Binding类型来实现更灵活的属性绑定。可以通过创建Binding对象并设置其target、property和value属性来定义绑定。
• 使用Qt.binding()函数：可以在JavaScript代码中使用Qt.binding()函数来创建绑定，这种方法允许在运行时动态创建绑定关系。

   

3.数据模型绑定

• ListView和GridView：在Qt Quick中，可以使用ListView和GridView等组件来显示数据模型中的数据。通过将组件的model属性绑定到一个数据模型，可以实现数据的动态显示和更新。
• 数据模型的创建：可以使用ListModel或XmlListModel等类型在QML中创建数据模型。这些模型可以存储和管理数据，并通过绑定与UI组件进行交互。

  

示例：

import QtQuick
import QtQuick.ControlsWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Item {id: mItemanchors.fill: parentproperty int number: Math.ceil(slider_num.value)Label {id: label_numanchors.centerIn: parent//方式1text: "value: " + Math.ceil(slider_num.value)//方式2//text: "value: " + parent.number}Slider {id: slider_numanchors.top: label_num.bottomanchors.horizontalCenter: parent.horizontalCenteranchors.topMargin: 20width: 300from: 0to: 100value: 25}//方式3// Binding {//     when: slider_num.value > 50//     target: label_num//     property: "text"//     value: "value: " + Math.ceil(slider_num.value)// }//方式4// Component.onCompleted: {//     //js数据绑定//     label_num.text = Qt.binding(function(){//         return "value: " + Math.ceil(slider_num.value);//     })// }}}

运行结果：

   

四、附加属性及信号

1.属性

• 基本属性：直接赋值（静态值或绑定表达式）。
• 自定义属性：使用 property 关键字声明。

    

2.附加属性

• 概念：附加属性是一种可以附加到QML对象的额外属性，用于在不破坏对象类型定义的情况下扩展对象的功能。
• 使用场景：例如在处理用户界面中的键盘事件时，可以使用附加属性来启用或禁用特定对象的键盘输入。
• 语法：通过在属性名前加上附加类型的名称来访问附加属性，例如Keys.enabled。
• 自定义附加属性：可以通过在C++中创建具有特定属性和信号的附加类型，并在运行时将其附加到特定对象来实现自定义附加属性。

    

3.信号

• 概念：信号是QML对象发出的事件通知，用于在对象状态发生变化时通知其他对象。
• 信号处理程序：信号处理程序是在信号发出时被调用的JavaScript函数，用于响应信号事件。
• 语法：信号处理程序的命名格式为on<SignalName>，例如onClicked。
• 自定义信号：可以在QML中使用signal关键字自定义信号，并在信号发出时调用相关的信号处理程序。
• 信号连接：可以使用connect方法将信号连接到其他信号或方法，以便在信号发出时执行特定的操作。

   

示例：

import QtQuick
import QtQuick.ControlsWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Component.onCompleted: console.log("Window");Item {id: mItemanchors.fill: parentComponent.onCompleted: console.log("Item");}Rectangle {anchors.fill: parentcolor: "aliceblue"Component.onCompleted: console.log("Rectangle");}SwipeView {anchors.fill: parentRectangle {color: SwipeView.index === 0 ? "blue" : "black"}Rectangle {color: SwipeView.index === 0 ? "black" : "green"}Rectangle {color: SwipeView.index === 0 ? "black" : "red"}}
}

• ===：比较两个值是否严格相等（值和类型都相等）。
• ==：进行隐式类型转换后比较这两个值。

输出：
qml: Window
qml: Rectangle
qml: Item

QML引擎初始化组件的顺序是 "从下到上"，同一层级的子组件会按照它们在代码中的声明顺序反向触发onCompleted，父组件的onCompleted会先于子组件的onCompleted触发。