【专业技术】还有人在用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 条评论
登录 后参与评论

相关文章

来自专栏Android群英传

Gradle函数复用的一点实践

661
来自专栏Linux驱动

24.Linux-Nand Flash驱动(分析MTD层并制作NAND驱动)

1.本节使用的nand flash型号为K9F2G08U0M,它的命令如下: ? 1.1我们以上图的read id(读ID)为例,它的时序图如下: ? 首先需要...

23310
来自专栏阮一峰的网络日志

Firebug控制台详解

Firebug是网页开发的利器,能够极大地提升工作效率。 但是,它不太容易上手。我曾经翻译过一篇《Firebug入门指南》,介绍了一些基本用法。今天,继续介绍它...

34012
来自专栏琦小虾的Binary

HTML 表单 (form) 的作用解释

参考网址: 《HTML中form表单作用解释》 表单在网页中主要负责的是数据采集功能,一个表单基本由三部分组成: 表单标签:这里面包含了处理表...

2087
来自专栏cloudskyme

shiro(2)-架构与配置

认证就是用户确认身份的过程,确认登录的用户身份能够操作的内容。 使用shiro认证分为以下几个步骤: 1,得到主体的认证和凭据。 // let's login ...

34511
来自专栏我叫刘半仙

原 荐 简单又灵活的安全框架--Shiro构架和身份认证流程

       Apache Shiro是一款强大易用的安全框架,它可以在任何应用环境中使用,能够跟第三方框架良好的耦合,它的设计目标就是简化应用程序的安全工作管...

2768
来自专栏性能与架构

Redis3 对集群进行重新分片

image.png 重新分片就是在集群各个节点间移动slot,这个操作是向集群中添加节点和删除节点的基础 步骤 (1)执行 redis-trib 命令,用 re...

3115
来自专栏我的安全视界观

【一起玩蛇】那些漏洞扫描器中的资产处理

1333
来自专栏信安之路

RedTiger 通关学习总结

学习 SQL 注入有两套必刷题,一个是 sqli-labs,这个已经有了成套的 wp 讲解,在上面的网盘里。

550
来自专栏Janti

springboot学习笔记-thymeleaf

简单说, Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它可以完全替代 JSP 。相较与其他的模板引擎,它有如下三个极吸...

522

扫描关注云+社区