现在的位置: 首页 > 综合 > 正文

Qt Quick 学习札记(1)

2013年06月22日 ⁄ 综合 ⁄ 共 2074字 ⁄ 字号 评论关闭

QT Quick 这玩意制作UI界面的确很方便,融合了CSS和Javascript,介绍说还有HTML元素,但是我实际使用下来一点HTML的痕迹都没有看到,不过会HTML也是对学习QT Quick有帮助的。

想学习QT Quick目前是比较麻烦的,首先QT Quick的参考资料不多,而且极其的分散,光是QML的基本使用就有NOKIA,QT团队,ICS团队,Ubuntu团队等一系列的组织在教授,本来NOKIA作为QT的持有公司,而且是QT Quick的开发公司上面的资料应该是很权威的,但是NOKIA的没落以及对QT的抛弃使得我无法根据NOKIA的学习资料来学习,因为NOKIA的学习资料都是2011年的,之后再也没有更新过了,而现在QT Quick已经发展到了2.0,虽然基础上没有什么大的变化,但是还是害怕NOKIA的资料太过时了,现在的话只能以QT社区的资料来学习,不过这样也不方便,社区的信息更新慢,而且还不专业,很多资料都无法集中学习,有些高级使用方法又藏的很深很深,要好好的学习看来只能依靠自己的学习能力了,所以再次记录我对QT
Quick的学习历程,希望对自己对大家都有所帮助。本人不喜欢理论一大片,然后实际一点点,所以资料都是直接从实例开始,然后在整理理论,想深入学习的朋友还是自己上官网找资料吧,我也是官网看来的。

第一节 QT Quick的基础实例

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360
    Text {
        anchors.centerIn: parent
        text: "Hello World"
    }
    MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
}

上面的掩饰效果就是以上代码实现的,可以看到QML(QT Quick的语言名称)的语法和CSS很相似,结构上又与HTML相似,为什么会如此杂糅在一起,不直接使用HTML+CSS方法呢?本人觉得首先可能是HTML语言太冗长了,随便写一个标签都要有一个闭合标签,手工写起来很麻烦,而且文件又大,最后结果是人读起来还是不舒服,而CSS的语法就简单多了花括号一包围就好了,简单明了,当然了这种方式是好是坏因人而异了,反正你不喜欢的话,也没办法,QML就是这样一种语言了。

接下来我们来看看这段代码的含义吧,别看这么简单一个示例,QML的大部分精髓都包含在了里面,能够读懂这个示例基本上你已经入门了

import QtQuick 2.0

这行语句是导入QtQuick这个库,这个库就是Qt Quick最简单最基础的东西了,反正只要导入就行了,没这个就是语法错误的,所以较真的童鞋,请你不要深究了。

Rectangle {
    width: 360
    height: 360

这行定义了一个矩形组建,width和height是这个组建的属性,看起来和CSS很像吧,就当CSS好了,这个组建是Qt Quick最简单也是用途最多的组建,以后会看到更多的。

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

Text是一个不可编辑的文字组件,属性anchros.centerIn是一个属性组合,意义是江组件的铆点中心对其到父级组件,简单来时就是水平和垂直居中,即使窗口大小变化,Qt Quick都会自动的计算,不需要担心位置不对了,属性text是要显示的文本信息,可以是HTML的富文本格式。

MouseArea {
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }

MouseArea是鼠标区域组件,左右就是捕获鼠标行为,通常都是用anchors.fill: parent来覆盖整个父级组件,这样就能捕获在父级组建上发生的所有鼠标事件了,Qt Quick在这方面是比较独特的单独弄出一个MouseArea组件来,所以这个东西在刚开始学的时候是比较别扭的,但是习惯了就好了;

onClick是MouseArea的事件属性,基本定义是这样的signal clicked,但是实际使用的时候就是onClicked了,前面的on是系统自己加上去的,这样就能区别出这个是信号方法了,onClicked后面的是javascript语句了,没错Qt Quick中javascript是可以直接使用的,而且用起来也跟真的javascript没多大区别,之所以说真的,是因为Qt Quick中javascript的限制还是蛮多的,具体有哪些感兴趣的朋友先去看看官网的资料吧。这里Qt是一个系统变量,它不包含在QtQuick
2.0这个库里面,简单来说Qt这个对象是直接调用Qt的C++环境中的属性和方法,因此可以直接实现窗口的关闭,Qt.quit()就是QT的C++环境来实现关闭窗口,这种方法我们自己也能写,之后会介绍,这个概念千万别搞混了,别以为Qt这个对象也是Qt Quick的一部分。

好了,第一篇的入门就讲到这里了,能把这部分看懂了,基本上你已经掌握Qt Quick的50%了,剩下的就需要之后慢慢学,一口是吃不成胖纸的,慢慢来吧

抱歉!评论已关闭.