qml元素详解

发布时间:2024年01月03日

1 说明

QML是一种描述用户界面的声明式语言,它将用户界面分解成一些更小的元素,或者说是由一个个元素堆积、结合成一个组件。QML语言不仅需要描述了用户界面的形状,还需要描述其行为。

在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 和 DropAreaDrag 用于启用元素的拖拽行为,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(脚本动作)在播放动画时运行脚本
文章来源:https://blog.csdn.net/weixin_42887343/article/details/135356964
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。