qmlqml入门


备注

QML是Q t M eta-object L anguage的首字母缩写词。它是一种声明性编程语言,是Qt框架的一部分。 QML的主要目的是快速轻松地为桌面,移动和嵌入式系统创建用户界面。 QML允许JavaScript直接在QML代码中或通过包含JavaScript文件无缝集成。

版本

Qt版本 QtQuick版本发布日期
4.7 1.0 2010-09-21
4.8 1.1 2011-12-15
5 2.0 2012年12月19日
5.1 2.1 2013年6月3日
5.2 2.2 二零一三年十二月十二日
5.3 2.3 二零一四年五月二十零日
5.4 2.4 情节中字
5.5 2.5 2015年7月1日
5.6 2.6 2016年3月15日
5.7 2.7 2016年6月16日
5.8 2.7 2017年1月23日

创建一个简单的按钮

您可以使用MouseArea组件轻松转换可单击按钮中的每个组件。下面的代码显示一个360x360窗口,中间有一个按钮和一个文本;按下按钮将改变文字:

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Rectangle {
        id: button

        width: 100
        height: 30
        color: "red"
        radius: 5     // Let's round the rectangle's corner a bit, so it resembles more a button
        anchors.centerIn: parent

        Text {
            id: buttonText
            text: qsTr("Button")
            color: "white"
            anchors.centerIn: parent
        }

        MouseArea {
            // We make the MouseArea as big as its parent, i.e. the rectangle. So pressing anywhere on the button will trigger the event
            anchors.fill: parent

            // Exploit the built-in "clicked" signal of the MouseArea component to do something when the MouseArea is clicked.
            // Note that the code associated to the signal is plain JavaScript. We can reference any QML objects by using their IDs
            onClicked: {
                buttonText.text = qsTr("Clicked");
                buttonText.color = "black";
            }
        }
    }
}
 

显示图像

此示例显示了Image组件用于显示图像的最简单用法。

Image source 属性是一个url类型 ,可以是具有绝对或相对路径的文件,Internet URL( http:// )或Qt资源qrc:/

import QtQuick 2.3

Rectangle {
    width: 640
    height: 480

    Image {
         source: "image.png"
    }
}
 

你好,世界

一个简单的应用程序,在窗口中央显示文本“Hello World”。

import QtQuick 2.3
import QtQuick.Window 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World") //The method qsTr() is used for translations from one language to other.

    Text {
        text: qsTr("Hello World")
        anchors.centerIn: parent
    }
}
 

安装

QML附带了更新版本的跨平台应用程序框架Qt 。您可以在下载部分找到最新版本的Qt。

要在Qt Creator IDE中创建新的QML项目,请选择“文件 - >新建...”,然后在“应用程序”下选择“Qt快速应用程序”。单击“选择”后,您现在可以命名并设置此项目的路径。点击“下一步”后,您可以选择要使用的组件,如果不确定,请保留默认值并单击“下一步”。如果您愿意,接下来的两个步骤将允许您设置Kit和Source Control,否则保留默认设置。

您现在已经创建了一个简单且随时可用的QML应用程序。

鼠标事件

此示例显示了如何在QML中使用鼠标事件。

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    Rectangle {
        anchors.fill: parent
        width: 120; height: 240
        color: "#4B7A4A"

        MouseArea {
            anchors.fill: parent // set mouse area (i.e. covering the entire rectangle.)
            acceptedButtons:  Qt.AllButtons
            onClicked: {
                // print to console mouse location
                console.log("Mouse Clicked.")
                console.log("Mouse Location: <",mouseX,",",mouseY,">")

                //change Rectangle color
                if ( mouse.button === Qt.RightButton )
                    parent.color = 'blue'
                if ( mouse.button === Qt.LeftButton )
                    parent.color = 'red'
                if ( mouse.button === Qt.MiddleButton )
                    parent.color = 'yellow'
            }
            onReleased: {
                // print to console
                console.log("Mouse Released.")
            }
            onDoubleClicked: {
                // print to console
                console.log("Mouse Double Clicked.")
            }

        }
    }


}