qml元素详解

1 说明

QML是一种描述用户界面的声明式语言，它将用户界面分解成一些更小的元素，或者说是由一个个元素堆积、结合成一个组件。QML语言不仅需要描述了用户界面每个元素的的形状、位置、大小、颜色等ui相关内容，还需要描述其行为及相应。

在qml中，元素可以被分为可视化元素与非可视化元素两大类。

• 可视元素（例如矩形框Rectangle）有着几何形状并且可以在屏幕上显示。
• 非可视元素（例如计时器Timer）提供了常用的功能，通常用于操作可视化元素。
  除了以上外，本文新增一些归类：
• ui交互元素
• 自定义元素，在其他几种元素的基础上实现。
• 画布元素

下文将对这些元素分别做一些统计与说明。

2 可视元素集合

可视化元素提供了构建各种用户界面的基础，你可以根据项目需求选择合适的元素，并组合它们来创建丰富、交互性强的应用程序。

元素	说明
Rectangle	绘制矩形区域
Text	显示文本
Image	显示图像。
BorderImage	用于显示带有边框的图像。
TextInput	接受用户输入的文本框。
Button	响应用户点击的按钮。
CheckBox	处理用户选择的复选框。
RadioButton	处理用户选择的单选按钮。
ProgressBar	显示进度条。
SpinBox	接受数字输入的微调框。
Slider	接受滑块输入的滑块。
Dial	用于调整值的旋钮。
Switch	显示开关状态的开关按钮。
ActivityIndicator	显示活动指示器，表示某个操作正在进行。
SwipeView	支持滑动切换页面的视图。
PathView	根据路径排列元素的视图。
Flickable	可以在其中滚动内容的可滚动区域。
Flow	在水平或垂直方向上自动排列子项的容器。
GridView	根据网格排列元素的视图。
ColumnLayout、RowLayout	在垂直和水平方向上排列子项的布局。
Layout、LayoutItem	用于控制布局的元素。
Menu、MenuBar、MenuItem	创建菜单和菜单项的元素。
Popup、ToolTip	弹出式窗口和工具提示。
ScrollView	创建滚动视图。
WebView	嵌入 Web 内容的视图。

可视化元素简单例子：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 200
    title: "Simple QML Example"

    Rectangle {
        width: 200
        height: 100
        color: rectangleColor
        anchors.centerIn: parent
    }

    Button {
        text: "Change Color"
        anchors.centerIn: parent
    }

    // 初始颜色
    property color rectangleColor: "lightblue"
}

3 不可视元素集合

不可视元素在 QML 中扮演着重要的角色，它们不显示在用户界面上，但用于实现各种逻辑、数据存储、动画等任务等功能。在项目中，可依据需求选择适当的元素，并结合它们来构建功能强大的应用程序。

元素	说明
Item	所有可视元素的基类，但它本身不显示任何内容。
Loader	异步加载其他 QML 文件或元素。
Connections	用于连接信号和槽。
Timer	定时器，用于定期执行代码。
State、StateGroup、Transition	处理状态和状态之间的过渡效果。
Binding	创建属性绑定，使属性的值保持同步。
ListModel	存储模型数据的不可视模型。
ListElement	在 ListModel 中定义一个元素。
Component	定义可复用的 QML 元素。
Repeater	重复创建多个相似元素。
QtObject	不可视对象，用于存储属性和方法。
SequentialAnimation、ParallelAnimation	用于组织动画效果。
ShaderEffectSource	在 ShaderEffect 中使用的纹理源。
PropertyChanges	在状态转换时更改属性值。
ParentChange、ChildChange	在元素的父级或子级发生变化时触发的信号。
Behavior	定义属性动画的行为。
RotationAnimation、NumberAnimation、PropertyAnimation 等	用于处理旋转、数字和属性动画的元素。由于内容过多，最后专门写一个小节
SystemPalette	用于获取系统调色板的信息。

不可视元素例子：
使用Timer 元素和 QtObject 来创建一个定时器，实现周期性的任务。

import QtQuick 2.15

// 定义一个不可视的QtObject，用于存储数据和逻辑
QtObject {
    id: timerData

    // 定义一个计数器
    property int counter: 0

    // 定义定时器，每1000毫秒触发一次
    Timer {
        interval: 1000
        running: true // 启动定时器
        repeat: true  // 重复执行

        onTriggered: {
            // 定时器触发时的逻辑
            counter++
            console.log("Counter:", counter)
        }
    }
}

4 交互元素集合

交互元素用于创建不同类型的用户交互，涵盖了点击、拖拽、缩放、滑动等多种手势。可以根据具体需求选择适当的元素来实现交互式的用户界面。

MouseArea	用于处理鼠标和触摸输入，捕捉鼠标点击、移动等事件。
PinchArea	处理捏合手势，通常用于缩放操作。
SwipeView	创建一个视图，支持滑动切换不同的子项。
FocusScope 和 FocusScopeContainer	用于管理焦点，处理键盘输入焦点。
TapHandler	用于捕捉简单的点击或轻敲手势。
SwipeDelegate	在 SwipeView 中用于定义每个子项的交互。
Drag、Draggable 和 DropArea	Drag 用于启用元素的拖拽行为，Draggable 表示可拖拽的区域，DropArea 用于处理拖拽释放的区域。
MultiPointTouchArea	处理多点触摸输入。
PathView	通过路径浏览子项，支持用户通过滑动选择不同的项。
PathViewDelegate	在 PathView 中定义每个子项的交互。
PinchHandler	用于处理捏合手势的专用元素。
PinchDelegate	在 PinchHandler 中定义每个子项的交互。

举例：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300
    title: "Simple Interactive Example"
    
    Rectangle {
        color: "lightblue"
	    width: 200
	    height: 200
	    MouseArea {
	        anchors.fill: parent
	        onClicked: {
	            console.log("Mouse clicked")
	        }
	    }
	}
}

在这个例子中，MouseArea 是 Rectangle 元素的子元素，定义了整个矩形区域作为可点击区域。当用户点击矩形区域时，onClicked 中的代码将执行。

5 自定义元素

在 QML 中，你可以通过使用 Item 元素以及 property、signal、function 等关键字来创建自定义元素。以下是一个简单的例子，展示如何创建一个自定义的矩形元素：

import QtQuick 2.15

// 定义自定义元素 MyRectangle
Item {
    width: 200
    height: 100
    
    // 自定义属性
    property color myColor: "blue"
    
    // 自定义信号
    signal clicked()
    
    // 自定义函数
    function changeColor() {
        myColor = "red"
    }
    
    Rectangle {
        anchors.fill: parent
        color: myColor
        // 响应点击事件
        MouseArea {
            anchors.fill: parent
            onClicked: {
                // 触发自定义信号
                parent.clicked()
            }
        }
    }
}

6 动画元素

每一种动画，在特定情况下都有最佳的效果，下面列出了一些常用的动画元素：

元素	说明
PropertyAnimation（属性动画）	使用属性值改变播放的动画
NumberAnimation（数字动画）	使用数字改变播放的动画
ColorAnimation（颜色动画）	使用颜色改变播放的动画
RotationAnimation（旋转动画）	使用旋转改变播放的动画

除了上面这些基本和通常使用的动画元素，QtQuick还提供了一切特殊场景下使用的动画：

元素	说明
PauseAnimation（停止动画）	运行暂停一个动画
SequentialAnimation（顺序动画）	允许动画有序播放
ParallelAnimation（并行动画）	允许动画同时播放
AnchorAnimation（锚定动画）	使用锚定改变播放的动画
ParentAnimation（父元素动画）	使用父对象改变播放的动画
SmotthedAnimation（平滑动画）	跟踪一个平滑值播放的动画
SpringAnimation（弹簧动画）	跟踪一个弹簧变换的值播放的动画
PathAnimation（路径动画）	跟踪一个元素对象的路径的动画
Vector3dAnimation（3D容器动画）	使用QVector3d值改变播放的动画

在使用更加复杂的动画时，我们可能需要在播放一个动画时中改变一个属性或者运行一个脚本。对于这个问题，QtQuick提供了一个动作元素：

元素	说明
PropertyAction（属性动作）	在播放动画时改变属性
ScriptAction（脚本动作）	在播放动画时运行脚本

7 画布元素（canvas element）

在以前使用Qt4的QML时，无法在QtQuick中绘制一个圆形、椭圆或者其他自定义的形状，因为在QtQuick中没有圆形，只有矩形，所以在以前，你如果需要一个除了矩形外的形状，需要使用图片或者使用C++绘制圆形元素。
后来QtQuick在Qt5中引进了画布元素，允许进行脚本绘制自己想要的形状。

画布元素提供了一个依赖于分辨率的位图画布，你可以使用JavaScript脚本来绘制图形，画布元素是基于HTML5的画布元素来完成的。

画布元素的基本思想是使用一个2D对象来渲染路径。这个2D对象包括了必要的绘图函数，画布元素充当绘制画布，2D对象支持画笔，填充，渐变，文本和绘制路径创建命令。

下面是一个简单的路径绘制的例子：

import QtQuick 2.15

Canvas {
    id: root
    // canvas size
    width: 200; height: 200
    // handler to override for drawing
    onPaint: {
        // get context to draw with
        var ctx = getContext("2d")
        // setup the stroke
        ctx.lineWidth = 4
        ctx.strokeStyle = "blue"
        // setup the fill
        ctx.fillStyle = "steelblue"
        // begin a new path to draw
        ctx.beginPath()
        // top-left start point
        ctx.moveTo(50,50)
        // upper line
        ctx.lineTo(150,50)
        // right line
        ctx.lineTo(150,150)
        // bottom line
        ctx.lineTo(50,150)
        // left line through path closing
        ctx.closePath()
        // fill using fill style
        ctx.fill()
        // stroke using line width and stroke style
        ctx.stroke()
    }
}