QML对元素进行移动、旋转、缩放

微软技术分享微软全球最有价值专家

全栈领域优质创作者

博客专家认证

2024-02-22 14:37:31

一 QML介绍

二 QML的使用场合

三实例演示

一 QML介绍

QML是Qt Quick的缩写，它是一种新型的、面向对象的、跨平台的脚本语言，可以用来描述用户界面或应用程序的交互逻辑。QML可以在Qt应用程序中使用，也可以在其他JavaScript应用程序中使用。

QML使用XML语法来描述应用程序的用户界面，其中包括各种组件、布局、控件和事件处理程序等。这种语言非常易于学习和使用，因为它具有简单的语法、清晰的结构和易于理解的类型系统。此外，QML还支持自定义组件和自定义控件，使开发人员能够根据需要灵活地设计和重构用户界面。

QML可以帮助开发人员快速构建原生桌面应用程序、移动应用程序和Web应用程序等。由于它是Qt框架的一部分，因此可以利用Qt提供的丰富功能和工具，如Qt Creator、Qt Widgets等。因此，使用QML可以大大提高开发效率和应用程序的质量。

二 QML的使用场合

QML是一种用于描述应用程序用户界面的声明式编程语言，主要应用于移动应用程序、桌面应用程序和Web应用程序等领域。以下是QML主要应用场景：

移动应用程序：QML可以帮助开发人员快速构建原生移动应用程序，如游戏、音乐播放器、地图应用等。由于QML可以将用户界面分解为一个个小的元素，并且可以对这些元素进行美化和自定义，因此非常适合构建移动应用程序。
桌面应用程序：QML可以用于开发桌面应用程序，如窗口管理器、文本编辑器、数据分析工具等。QML可以将界面分解为各个小的部件，并且可以使用Qt提供的各种组件和工具来构建高效的桌面应用程序。
Web应用程序：QML可以用于开发Web应用程序，如网页浏览器、表单验证器、媒体播放器等。由于QML可以将界面分解为小的元素，并且可以使用JavaScript来操作这些元素，因此非常适合构建Web应用程序。

QML是一种非常灵活和易于使用的编程语言，可以帮助开发人员快速构建高效的用户界面，并且可以在不同的应用程序领域中使用。

三实例演示

所谓转换就是指QML元素的平移，旋转，缩放。

移动：通过改变x,y坐标来完成；

旋转：改变rotation（旋转）属性来完成，其值的范围为0~360 ；

缩放：通过改变scale（比例）的属性来完成的，小于1意味着缩小，大于1意味着放大。旋转与缩放不会改变对象的几何形状，对象的x,y（坐标）与width/height（宽/高）也类似。只有绘制指令是被转换的对象。

简单代码示范：

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")

    //基本转换： 移动、旋转、缩放
    Rectangle{
        id:  root
        color: "chartreuse"
        width: 100
        height: 100
        x:100; y:100
    }


    Text {
        id: text1
        text: qsTr("移动")
        color: "black"
        width: 60
        height: 60
        x:0; y:330

        //平移
        MouseArea{
            anchors.fill: parent
            //点击鼠标后，写响应逻辑,让矩形框平移
            onClicked: {
                root.x+=10

            }
        }

    }

    Text {
        id: text2
        text: qsTr("旋转")
        color: "black"
        width: 60
        height: 60
        x:100; y:330

        //旋转
        MouseArea{
            anchors.fill: parent
            //点击鼠标后，写响应逻辑,让矩形框旋转
            onClicked: {
                root.rotation += 10

            }
        }

    }


    Text {
        id: text3
        text: qsTr("缩放")
        color: "black"
        width: 60
        height: 60
        x:200; y:330

        //旋转
        MouseArea{
            anchors.fill: parent
            //点击鼠标后，写响应逻辑,让矩形框平移
            onClicked: {
                root.scale += 0.1

            }
        }

    }
}