QML入门

本文介绍了使用QML进行UI开发的基本步骤,包括HelloWorld程序的创建,如何处理用户交互(如点击事件),以及属性绑定、动画和自定义QML类型的使用。
摘要由CSDN通过智能技术生成

First Step with QML

每个QML文件都包含两部分:一个import部分和一个对象声明部分。对用户界面来说,最常用的类型和函数都定义在QtQuick 这个模块里。

编写HelloWorld

先从编程世界起点HelloWorld开始,这里,我们先不建立Qt Project,从最简单的文本文件开始,避免复杂的项目结构带来的困惑。直接新建一个HolloWorld.qml文件,编写如下代码:

import QtQuick

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }
}

代码中,第一行import QtQuick 导入了QtQuick模块,这样,我们就可以用下面的RectangleText等常用的界面组件了。

在上面的代码中,Rectangle部分,我们定义了一个宽200像素,高100像素的红色矩形框,同时,在矩形框中放置了一段Hello, World!文本,该段文本的中心,与矩形框的中心对齐,类似excel单元格的居中对齐。

运行HelloWorld

怎么运行这段代码,如果建立Qt Project直接将这段代码放进Main.qml中能运行吗?很不幸,不能,这样会崩溃。这里我们直接在命令行使用qml命令运行HelloWorld.qml文件就可以。

qml HelloWorld.qml

我们做好的界面长这样:

请添加图片描述

更进一步,处理用户输入

新建一个ClickableHelloWorld.qml,内容如下:

import QtQuick

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }

    TapHandler {
        onTapped: parent.color = "blue"
    }
}

同样用qml命令运行此文件,显示的还是上面的红色HelloWorld界面,用鼠标点击之后,界面编程蓝色的,如下图:

请添加图片描述

代码中,增加了TapHandler对象。QML中,将事件称为signals,将处理信号的对象称为signal handlers。点击时tapped信号会被发射,该信号被onTapped处理,处理结果是将父元素(也就是Rectangle对象)的颜色变为蓝色。这段代码在触屏设备也生效(触屏时间也会发射tapped信号)。

属性绑定

QML文件中,对象及他们的属性组成了最基本的图形界面,QML语言允许属性之间以多种方式相互绑定,先看下面的例子(PropertyBindings.qml):

import QtQuick

Rectangle {
    width: 400
    height: 200

    Rectangle {
        width: parent.width / 2
        height: parent.height
        color: "blue"
    }

    Rectangle {
        width: parent.width / 2
        height: parent.height
        x: parent.width / 2
        color: "green"
    }
}

这个例子中,每个子矩形的长宽都与父矩形的长宽进行了对应的绑定,如果改变父矩形的尺寸,子矩形的尺寸也会自动跟着改变。类似下面这样:

请添加图片描述

动画

属性同样可以通过动画(animations)来动态地更新,看下面的例子(Animations.qml

import QtQuick

Rectangle {
    color: "lightgray"
    width: 200
    height: 200

    property int animatedValue: 0
    SequentialAnimation on animatedValue {
        loops: Animation.Infinite
        PropertyAnimation { to: 150; duration: 1000 }
        PropertyAnimation { to: 0; duration: 1000 }
    }

    Text {
        anchors.centerIn: parent
        text: parent.animatedValue
    }
}

在这个示例中,我们用property定义了一个animatedValue的属性,属性初值为0,然后在使用Animation on Property语句指定将SequentialAnimation动画用于animatedValue属性,SequentialAnimation作用是顺序运行下面指定的两个PropertyAnimation动画,循环次数loopsAnimation.Infinite无限循环,第一个PropertyAnimation动画,用1000ms的时间,将animatedValue变为150,第二个PropertyAnimation动画,用1000ms的时间,将animatedValue变为0。Text则将animatedValue显示出来。效果如下:

请添加图片描述

用于重用的用户自定义QML类型

QML允许用户自定义类型,下面的例子(MessageLabel.qml)展示了一个自定义的MessageLable类型。

import QtQuick

Rectangle {
    height: 50
    property string message: "debug message"
    property var msgType: ["debug", "warning" , "critical"]
    color: "black"

    Column {
        anchors.fill: parent
        padding: 5.0
        spacing: 2
        Text {
            text: msgType.toString().toUpperCase() + ":"
            font.bold: msgType == "critical"
            font.family: "Terminal Regular"
            color: msgType === "warning" || msgType === "critical" ? "red" : "yellow"
            ColorAnimation on color {
                running: msgType == "critical"
                from: "red"
                to: "black"
                duration: 1000
                loops: msgType == "critical" ? Animation.Infinite : 1
            }
        }
        Text {
            text: message
            color: msgType === "warning" || msgType === "critical" ? "red" : "yellow"
            font.family: "Terminal Regular"
        }
    }

}

这个类型使用Rectangle作为父组件,定义了messagemsgType两个属性,Column则将下面的两个Text对象放在同一列中展示,第一个Text对象用于展示msgType,将msgType转化为全大写并加上:,以Terminal Regular字体,显示msgType,如果msgTypecritical还会加粗显示,同时,如果msgTypecriticalwarning,则用红色字体,否则用黄色字体,当msgTypecritical时,还会对字体颜色color使用动画,在1000ms内,将字体颜色从红色变为黑色,并且无限循环进行。第二个Text对象则用对应颜色和字体显示message

使用此类型的代码如下(application.qml):

import QtQuick

Column {
    width: 180
    height: 180
    padding: 1.5
    topPadding: 10.0
    bottomPadding: 10.0
    spacing: 5

    MessageLabel{
        width: parent.width - 2
        msgType: "debug"
    }
    MessageLabel {
        width: parent.width - 2
        message: "This is a warning!"
        msgType: "warning"
    }
    MessageLabel {
        width: parent.width - 2
        message: "A critical warning!"
        msgType: "critical"
    }
}

运行qml application.qml,效果如下图:

请添加图片描述
最新文章和代码都放在github QML-Applications上,期待star。

  • 19
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QML入门教程是一本关于QML编程语言的指导手册,主要旨在帮助初学者快速上手和了解该语言的基本概念和特性。QMLQt Quick框架的一部分,在开发用户界面时常常用到。下面将简要说明这本教程所涵盖的内容。 教程首先介绍了QML的基本概念和语法,包括如何定义对象、属性和信号等。它详细解释了QML的层次结构,以及如何通过编写QML文件来组织和布局用户界面。同时,教程还教授了如何使用QML中的基本元素和组件,例如文本框、按钮和图像等,以及如何处理用户输入和交互。 接下来,教程讲解了QML的动态性和可定制性。它说明了如何使用动画和过渡效果来增强用户体验,以及如何创建自定义组件和样式来实现个性化的界面设计。此外,教程还介绍了QML中的状态和过渡,帮助开发者实现复杂的场景切换和界面更新。 最后,教程还提供了一些实例和案例研究,以帮助读者理解QML的实际应用。这些案例涵盖了不同领域的应用,例如移动应用程序、游戏界面和嵌入式系统等。通过这些实例,读者可以更好地掌握QML的技巧和技巧,并将其应用到实际项目中。 总而言之,QML入门教程是一本全面介绍QML编程语言和Qt Quick框架的指导手册。它适合那些想要学习和掌握QML的初学者,无论是作为职业开发者还是个人爱好者。通过学习这本教程,读者可以快速获得QML编程的基础知识,并能够开始开发自己的QML应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值