作者：程序员互动联盟  编者按： 这个世界不缺工程师，但是缺大师。如果在Qt里写个app，传统做法，需要熟悉API，熟悉C++，熟悉Qt本身的实现，同时还要熟悉编程环境。 现在出现了一种类似于脚本Javascript的语言，利用它，我们可以少编写一些程序逻辑。可不，最近我就利用它开发出了个浏览器。大家都没有。 欢迎来到声明式UI语言QML的世界.在本入门教程中,我们使用QML创建一个简单的文本编辑器.阅读这个教程后,就可以使用QML和Qt C++开发应用程序了. 安装 首先需要安装包含Qt Quick的Qt最新版本,现在是Qt4.7.安装教程包括安装说明书和不同平台的需求. Qt Quick包含一个叫做QML的声明式语言,Qt Declarative Module,和 QML Viewer. QML构造用户界面 我们要构造的应用程序是一个简单的文本编辑器,可以加载,保存,以及执行一些文本处理.本教程包括两个部分.第一个部分使用QML设计应用程序布局和行为.第二个部分中使用Qt C++实现加载和保存文本.应用Qt元对象系统(Qt's Meta-Object System)可以将C++中的函数导入作为QML元素的属性进行访问.利用QML和Qt C++,可高效的将界面逻辑与应用程序逻辑解耦.  最终代码见 examples/tutorials/gettingStarted/gsQml目录.首先需要在examples/tutorials/gettingStarted/gsQml/编译C++插件.将C++插件生成到QML文件可访问的目录中. 要启动文本编辑器,仅需要使用qmlviewer工具,并包含一个QML文件名称为参数.本教程的C++部分假设读者了解基本的Qt编译过程. 教程章节: 1.定义按钮和菜单Defining a Button and a Menu 2.实现菜单栏Implementing a Menu Bar 3.创建文本编辑器Building a Text Editor 4.美化文本编辑器Decorating the Text Editor 5.使用Qt C++扩展QMLExtending QML using Qt C++ 定义按钮和菜单 基本组件—按钮 我们构建一个按钮作为文本编辑器程序的开始.功能上,按钮具有鼠标敏感区域和一个标签(label).用户点击按钮后执行一个动作. 在QML中,基本的可视项是Rectangle 元素. Rectangle 元素拥有控制外观和位置的属性. import QtQuick 1.0 Rectangle { id: simplebutton color: "grey" width: 150; height: 75 Text{ id: buttonLabel anchors.centerIn: parent text: "button label" } } 首先, import QtQuick 1.0使qmlviewer工具导入我们稍后需要的QML元素.这行代码在每个QML文件中都是必须的.注意导入语句中包含Qt模块的版本号. 这个矩形包含一个唯一标识simplebutton,绑定到id属性上. Rectangle 元素设置属性值的方式为:属性名称,后跟冒号,而后是值.本例中,颜色grey赋给了矩形的color属性.同样设置了矩形的width和height属性. Text元素为不可编辑的文本框.将Text元素命名为buttonLabel.要给Text元素设置字符串内容需要给其text属性赋值.标签包含在Rectangle中,为了让其居中,设置Text元素的相对于父元素(simplebutton)的描点属性.为了让布局更加简单,描点可与其他项的描点绑定. 将上面的代码保存为SimpleButton.qml. 使用这个文件名做参数启动qmlviewer将看到带有文本标签的灰色矩形.  为了实现按钮的点击功能,我们可以处理QML的事件.QML事件与Qt的信号槽机制类似.触发信号时会调用与其连接的槽. Rectangle{ id:simplebutton ... MouseArea{ id: buttonMouseArea anchors.fill: parent //在矩形区域内描定Mouse Area的所有边 //onClicked处理按钮点击事件 onClicked: console.log(buttonLabel.text + " clicked" ) } } 在simplebutton中包含一个MouseArea元素.MouseArea元素描述一个可检测鼠标移动的交互区域.在按钮中我们将MouseArea完全平铺到其父对象simplebutton上.anchors.fill语法用来访问叫做anchors的组合属性中的fill属性.QMl使用基于描点的布局(anchor-based layouts)可将项描定到其他项上,创建出强健的布局. 当鼠标在MouseArea区域内移动时会触发很多信号.其中当用户点击被许可的鼠标按钮(默认是左按钮)时会调用onClicked信号.可以设置onClicked的处理事件.本例中,当在MouseArea中点击鼠标时会调用console.log()输出文本.这个函数可用于在调试时输出文本信息. SimpleButton.qml中的代码实现在屏幕上显示一个按钮,并在鼠标点击时输出文本. Rectangle { id: button ... property color buttonColor: "lightblue" property color onHoverColor: "gold" property color borderColor: "white" signal buttonClick() onButtonClick: { console.log(buttonLabel.text + " clicked" ) } MouseArea{ onClicked: buttonClick() hoverEnabled: true onEntered: parent.border.color = onHoverColor onExited: parent.border.color = borderColor } //determines the color of the button by using the conditional operator color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor } 完整功能的按钮代码在Button.qml中.上述的代码片段有些被省略,因为有些已经在上节中介绍过或与当前讨论无关. 使用带有属性类型名的语法来自定义属性.代码中,buttonColor属性,是color类型的,声明并赋值为"lightblue".buttonColor稍后用在确定按钮填充颜色的条件操作中.注意属性赋值可能使用等号(=)操作符,而属性绑定使用冒号(:)操作符.自定义属性使内部项可与外部交互.QML基本类型(QML types)包括int,string,real,以及variant类型. 绑定onEntered和onExisted信号处理按钮边框颜色,鼠标悬停在按钮上时为黄色,鼠标移出时恢复颜色. Button.qml中定义了一个buttonClick()信号,将signal关键字放在信号名称前面.所有信号的事件处理器会被自动创建,名称前以on做前缀.例如,onButtonClick是buttonClick的处理器.onButtonClick被赋予一个可执行的动作.在这个按钮范例中,onClick按钮事件中调用了onButtonClick,简单的输出一行文本.onButtonClick信号使外部对象可处理按钮的鼠标区域事件.例如,如果项中含有多个MouseArea声明,buttonClick信号可以更好的区分多个MouseArea的信号处理代码. 现在我们了解了如何定义一个可处理鼠标移动的QML元素.在Rectangle中定义了一个文本标签,自定义其属性,处理鼠标的移动.在元素内部创建子元素的概念会贯穿整个文本编辑器应用程序. 按钮必须作为组件来执行动作才有使用价值.下节中将创建一个包含这种按钮的菜单.  创建菜单页 上节中阐述了如何创建元素并在单独的QML文件中设置行为.本节将说明如何导入QML元素,如何重用已有组件构建其他组件. 菜单显示一列内容,其中的每个项都可以执行一个动作.在QML中,有很多种方式创建菜单.首先,我们创建包含可执行不同动作按钮的菜单.菜单代码在FileMenu.qml中. import QtQuick 1.0 \\import the main Qt QML module import "folderName" \\import the contents of the folder import "script.js" as Script \\import a Javascript file and name it as Script 上述语法展示如何使用import关键字.这里需要使用不在同一目录中的JavaScript文件或QML文件.由于Button.qml与FileMenu.qml在同一目录中,不必导入Button.qml就可直接使用.可直接使用Button{}声明一个按钮元素,与Rectangle{}的声明一样. FileMenu.qml: Row{ anchors.centerIn: parent spacing: parent.width/6 Button{ id: loadButton buttonColor: "lightgrey" label: "Load" } Button{ buttonColor: "grey" id: saveButton label: "Save" } Button{ id: exitButton label: "Exit" buttonColor: "darkgrey" onButtonClick: Qt.quit() } } 在FileMenu.qml中,声明了三个按钮元素.他们都在一个Row元素中声明的,这是一个定位器,将其子元素按行定位.Button声明在Button.qml中,与上节定义的Button.qml一致.新创建的按钮可设置属性绑定,在exitButton上增加了onButtonClick处理函数,由Button.qml中定义的onButtonClick来触发调用.  Row定义在Rectangle中,创建了包含一行按钮的矩形容器.这个额外的矩形采用间接的方式在菜。 转自： http://blog.csdn.net/henreash/article/details/7935787 ----------------------我是不严谨的分割线----------------------- 你在学习编程的时候是不是遇到很多困难无从下手？ 你在学习编程的时候是不是觉得很枯燥没有小伙伴一起？ 你是不是想快速成长成为一名真正的程序员？ 你是不是想找一名导师来指导一下职业规划？ 你是不是想知道BAT这样的公司是什么样的？ ......... 所有的这些疑问都不是事，加入下面的QQ群或者微信号coderonline，让我们的导师来给你一一解答。 小编也欢迎有情怀的小伙伴加入联盟和高手们一起为大家奉献更多的编程趣事。 关注微信公众号：程序员互动联盟(coder_online)
更有(java/C/C++/Linux/Android)高手帮你解决难题，和你互动，讨论编程未来。 长按二维码识别关注程序员互动联盟  关注后和技术大牛做朋友，还不赶快来！ 声明:本文使用的图片部分来自网络 点击"阅读原文"进入专业技术通道 ------------------------------------------------------------------------- 我们尊重原创，也注重分享，如若侵权请联系qter@qter.org。 ------------------------------------------------------------------------- |
Copyright © 2001-2019 Comsenz Inc. Powered by Discuz! X3.4 ICP证: 冀ICP备10016221号-2
