【专业技术】还有人在用Qt开发app嘛?

编者按:

这个世界不缺工程师,但是缺大师。如果在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

原文发布于微信公众号 - 程序员互动联盟(coder_online)

原文发表时间:2015-09-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员宝库

Chrome 调试技巧

想必大家都在用console.log在控制台输出点东西,其实console还有其它的方法:

802
来自专栏葡萄城控件技术团队

前端代码标准最佳实践:CSS篇

上一篇《前端代码标准最佳实践:javascript》发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高。这些最佳标准实践并不是那...

18210
来自专栏mySoul

微信小程序继续入坑指南

上方完成了一次列表渲染,其中index为默认的遍历到的数组的小标,从0开始,item为当前遍历到的数组对应下标的元素。

738
来自专栏前端侠2.0

bootstrap-datetimepicker的功能优化

引用:bootstrap 和 bootstrap-datetimepicker CSS文件

931
来自专栏liuchengxu

Spark GraphX 对图进行可视化

Spark 和 GraphX 对并不提供对数据可视化的支持, 它们所关注的是数据处理. 但是, 一图胜千言, 尤其是在数据分析时. 接下来, 我们构建一个可视化...

961
来自专栏jojo的技术小屋

原 八、BOM

作者:汪娇娇 时间:2017年11月18日 BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。 一、window 对象 BOM的核心对象是...

2045
来自专栏DannyHoo的专栏

问题——持续更新

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

672
来自专栏有趣的django

微信小程序入门(四)

WXSS(WeiXin Style Sheets)是一套样式语言,用于WXML的组件样式

952
来自专栏前端说吧

JS-鼠标经过显示二级菜单

32210
来自专栏大史住在大前端

javascript基础修炼(5)—Event Loop

如果没有详细钻研过异步队列,答对的可能性很低。题目的考察点很明确,就是javascript中最核心的特点之一的【异步】,了解了原理以后,你就会明白javascr...

732

扫码关注云+社区