智库网站建设方案,手机php网站开发,公众号如何推广产品,企业年金查询个人账户查询Qt5开发及实例V2.0-第十九章-Qt.QML编程基础 第19章 QML编程基础19.1 QML概述19.1.1 第一个QML程序19.1.2 QML文档构成19.1.3 QML基本语法 19.2 QML可视元素19.2.1 Rectangle#xff08;矩形#xff09;元素19.2.2 Image#xff08;图像#xff09;元素19.2.3 Text#xf… Qt5开发及实例V2.0-第十九章-Qt.QML编程基础 第19章 QML编程基础19.1 QML概述19.1.1 第一个QML程序19.1.2 QML文档构成19.1.3 QML基本语法 19.2 QML可视元素19.2.1 Rectangle矩形元素19.2.2 Image图像元素19.2.3 Text文本元素19.2.4 自定义元素组件 19.3 QML元素布局19.3.1 Positioner定位器19.3.2 Anchor锚 19.4 QML事件处理19.4.1 鼠标事件19.4.2 键盘事件19.4.3 输入控件与焦点 19.5 QML集成JavaScript19.5.1 调用JavaScript函数19.5.2 导入JS文件 本章相关例程源码下载1.Qt5开发及实例_CH1901.rar 下载2.Qt5开发及实例_CH1902.rar 下载3.Qt5开发及实例_CH1903.rar 下载4.Qt5开发及实例_CH1904.rar 下载5.Qt5开发及实例_CH1905.rar 下载6.Qt5开发及实例_CH1906.rar 下载7.Qt5开发及实例_CH1907.rar 下载8.Qt5开发及实例_CH1908.rar 下载9.Qt5开发及实例_CH1909.rar 下载10.Qt5开发及实例_CH1910.rar 下载11.Qt5开发及实例_CH1911.rar 下载12.Qt5开发及实例_CH1912.rar 下载13.Qt5开发及实例_CH1913.rar 下载 第19章 QML编程基础
19.1 QML概述
19.1.1 第一个QML程序
【例】简单CH1901这里先由一个最简单的QML程序入手介绍QML的基本概念。创建QML应用程序步骤如下。 1启动Qt Creator单击主菜单“文件”→“新建文件或项目…”项弹出“New File or Project”对话框如图19.1所示选择项目“Application”下的“Qt Quick Application”模板。 2单击“Choose…”按钮在“Qt Quick Application”对话框的“Project Location”页输入项目名称“QmlDemo”并选择保存项目的路径如图19.2所示。
3单击“下一步”按钮在“Define Project Details”页选择“Qt 5.7”如图19.3所示。
4单击“下一步”按钮在“Kit Selection”页系统默认已指定程序的编译器和调试器如图19.4所示。
5在“Project Management”页上自动汇总出要添加到该项目的文件如图19.5所示。
此时系统自动将这些文件组织起来生成项目工程并预生成了一个QML代码的框架其中main.qml为项目启动的主程序文件代码如下
import QtQuick 2.7
import QtQuick.Window 2.2
Window {visible: truewidth: 640height: 480title: qsTr(Hello World)MainForm {anchors.fill: parentmouseArea.onClicked: {console.log(qsTr(Clicked on background. Text: textEdit.text ))}}
}单击 运行程序弹出“Hello World”窗口窗口的上部有一文本输入框默认显示“Enter some text…”在其中输入“Hello World!”后用鼠标单击文本框外窗口内的任意位置可以看到开发环境底部“应用程序输出”子窗口中输出一行文本“qml: Clicked on background. Text: “Hello World!””整个过程如图19.6所示。
19.1.2 QML文档构成
import部分 此部分导入需要使用的Qt Quick库这些库由Qt 5提供包含了用户界面最通用的类和功能如本程序main.qml文件开头的两句
import QtQuick 2.7 //导入Qt Quick 2.7库
import QtQuick.Window 2.2 //导入Qt Quick窗体库导入这些库后用户就可以在自己编写的程序中访问Qt Quick所有的QML类型、接口和功能。
对象声明 这是一个QML程序代码的主体部分它以层次化的结构定义了可视场景中将要显示的诸元素如矩形、图像、文本以及获取用户输入的对象……它们都是Qt Quick为用户界面开发提供的基本构件。例如main.qml的对象声明部分
Window { //对象visible: true //属性width: 640height: 480title: qsTr(Hello World)MainForm { //子对象…}
}其中包含了两个对象一个Window对象和它的子对象MainForm。
19.1.3 QML基本语法
在项目视图中双击MainForm.ui.qml文件与main.qml位于同一目录打开切换到编辑模式可以看到其代码为便于讲解加了注释。 1对象和属性 每个QML文档有且只有一个根对象在本例中就是一个Rectangle矩形对象。对象可以嵌套即一个QML对象可以没有、可以有一个或多个子对象如在这个矩形中系统默认还定义了两个子对象MouseArea和TextEdit而子对象TextEdit本身又拥有一个子对象Rectangle。
对象由它们的类型指定以大写字母开头后面跟一对大括号{}{}之中是该对象的属性属性以键值对“属性名:值”的形式给出比如代码中
Rectangle { …width: 360 //属性宽度height: 360 //属性高度…
}定义了一个宽度和高度都是360像素的矩形。QML允许将多个属性写在一行但它们之间必须用分号隔开所以以上代码也可以写为
Rectangle { …width: 360;height: 360 //属性宽度和高度…
}对象MouseArea是可以响应鼠标事件的区域作为子对象它可以使用parent关键字访问其父对象Rectangle。
2对象标识符 每个对象都可以指定一个唯一的id值这样便可以在其他对象中识别并引用该对象。如本例代码中
MouseArea { id: mouseArea …
}就给MouseArea指定了id为mouseArea。可以在一个对象所在的QML文档中的任何地方通过使用该对象的id来引用该对象。
3属性别名 属性也可以有别名QML使用alias关键字声明属性的别名“property alias 别名属性名”如本例中
Rectangle { property alias mouseArea: mouseArea //MouseArea的属性别名property alias textEdit: textEdit //TextEdit的属性别名…MouseArea { id: mouseArea…}TextEdit {id: textEdit…}
}这里把MouseArea看成Rectangle的一个属性QML中的子对象也可视为其父对象的属性取其idmouseArea为属性名并给它定义一个别名“mouseArea”这么做的目的是为了在外部QML文档main.qml中也能访问到MouseArea。因为MouseArea内置有一个onClicked属性它是一个回调鼠标单击事件定义了别名后就可在main.qml代码中访问这个属性
mouseArea.onClicked: {console.log(qsTr(Clicked on background. Text: textEdit.text ))
}当单击事件发出时就会执行onClicked中的代码在开发环境底部的“应用程序输出”子窗口中输出文本“qml: Clicked on background. Text: “Hello World!””。同理TextEdit也可看成Rectangle的一个属性并为其定义别名和引用。
4注释 QML文档的注释同C/C、JavaScript代码的注释一样 1单行注释使用“//”开始在行的末尾结束。 2多行注释使用“/”开始使用“/”结尾。
19.2 QML可视元素
19.2.1 Rectangle矩形元素
【例】简单CH1902在窗口中绘制矩形运行效果如图19.7所示。 实现步骤如下。 1新建QML应用程序项目名称为“Rectangle”。 2双击项目视图打开MainForm.ui.qml文件修改代码如下
3双击打开main.qml文件修改代码如下
import QtQuick 2.7
import QtQuick.Window 2.2
Window {visible: truewidth: 250height: 220title: qsTr(Rectangle)MainForm {anchors.fill: parentmouseArea.onClicked: {topRect.visible !topRect.visible //控制矩形对象的可见性}}
}19.2.2 Image图像元素
【例】简单CH1903将一张较大的风景照适当地缩小后显示在窗体中运行效果如图19.8所示。 实现步骤如下。 1新建QML应用程序项目名称为“Image”。 2在项目工程目录中建一个images文件夹其中放入一张照片照片用数码相机拍摄尺寸980×751文件名为“栖霞山枫叶.jpg”。 3右击项目视图“资源”→“qml.qrc”下的“/”节点选择“添加现有文件…”项从弹出对话框中选择事先准备的“栖霞山枫叶.jpg”打开如图19.9所示将其加载到项目中。 4打开MainForm.ui.qml文件修改代码如下
…
Rectangle {…Image {//图像在窗口的位置坐标x: 20y: 20//宽和高均为原图的1/4width: 980/4;height: 751/4 //(a)source: images/栖霞山枫叶.jpg //图片路径URLfillMode: Image.PreserveAspectCrop //(b)clip: true //避免所要渲染的图片超出元素范围}
}19.2.3 Text文本元素
【例】简单CH1904各种典型文字效果的演示如图19.10所示。 实现步骤如下。 1新建QML应用程序项目名称为“Text”。 2打开MainForm.ui.qml文件修改代码。
19.2.4 自定义元素组件
【例】难度一般CH1905自定义创建一个Button组件并在主窗口中使用它运行效果如图19.11所示。 实现步骤如下。 1新建QML应用程序项目名称为“Custom”。 2右击项目视图“资源”→“qml.qrc”下的“/”节点选择“添加新文件…”项弹出“新建文件”对话框如图19.12所示选择文件和类“Qt”下的“QML File(Qt Quick 2)”模板。
3单击“Choose…”按钮在“Location”页输入文件名“Button”并选择保存路径本项目文件夹下如图19.13所示。
4打开Button.qml文件编写代码。 5打开MainForm.ui.qml文件修改代码如下
…
Rectangle {…MouseArea {id: mouseAreaanchors.fill: parent}Button { //复用Button组件x: 25; y: 25}
}19.3 QML元素布局
19.3.1 Positioner定位器
1行列、网格定位 【例】简单CH1906行列和网格定位分别使用Row、Column和Grid元素运行效果如图19.14所示。 实现步骤如下。 1新建QML应用程序项目名称为“Positioner”。 2按19.2.4节所讲的方法定义红、绿、蓝三个矩形组件代码分别。 3打开MainForm.ui.qml文件修改代码。
2流定位Flow 【例】简单CH1906续流定位使用Flow元素运行效果如图19.15所示。 实现步骤如下。 1仍然使用上例的项目“Positioner”在其基础上修改。 2打开MainForm.ui.qml文件修改代码。
3重复器Repeater 【例】简单CH1907Repeater结合Grid来排列一组矩形元素运行效果如图19.16所示。 实现步骤如下。 1新建QML应用程序项目名称为“Repeater”。 2打开MainForm.ui.qml文件修改代码。
19.3.2 Anchor锚
每一个元素都可以认为有一组无形的“锚线”left、horizontalCenter、right、top、verticalCenter和bottom如图19.17所示Text元素还有一个baseline锚线对于没有文本的元素它与top相同。 锚系统还允许为一个元素的锚指定边距margin和偏移offset。边距指定了元素锚到外边界的空间量而偏移允许使用中心锚线来定位。一个元素可以通过leftMargin、rightMargin、topMargin和bottomMargin来独立地指定锚边距如图19.18所示也可以使用anchor.margins来为所有的4个锚指定相同的边距。 【例】难度一般CH1908使用Anchor布局一组矩形元素并测试锚的特性运行效果如图19.19所示。
实现步骤如下。 1新建QML应用程序项目名称为“Anchor”。 2将前面实例CH1905和CH1906中的源文件Button.qml、RedRectangle.qml、GreenRectangle.qml以及BlueRectangle.qml复制到本项目目录下。右击项目视图“资源”→“qml.qrc”下的“/”节点选择“添加现有文件…”项弹出“添加现有文件”对话框如图19.20所示。 3打开MainForm.ui.qml文件修改代码。 4打开Button.qml文件修改代码。
19.4 QML事件处理
19.4.1 鼠标事件
【例】难度一般CH1909使用MouseArea接受和响应鼠标单击、拖曳等事件运行效果如图19.21所示。 实现步骤如下。 1新建QML应用程序项目名称为“MouseArea”。 2右击项目视图“资源”→“qml.qrc”下的“/”节点选择“添加新文件…”项新建Rect.qml文件编写代码。 3打开MainForm.ui.qml文件修改代码如下
…
Rectangle {…MouseArea {id: mouseAreaanchors.fill: parent}…Rect { //复用定义好的矩形元素x:25;y:25 //初始坐标opacity:(360.0 - x)/360 //透明度设置}
}19.4.2 键盘事件
【例】难度一般 CH1910利用键盘事件处理制作一个模拟桌面应用图标选择程序运行效果如图19.22所示按【Tab】键切换选项当前选中的图标以彩色放大显示还可以用【←】【↑】【↓】【→】方向键移动图标位置。 具体实现步骤如下。 1新建QML应用程序项目名称为“Keyboard”。 2打开MainForm.ui.qml文件修改代码。
19.4.3 输入控件与焦点
【例】难度中等CH1911用QML输入元素定制文本框可用【Tab】键控制其焦点转移运行效果如图19.23所示。 实现步骤如下。 1新建QML应用程序项目名称为“TextInput”。 2右击项目视图“资源”→“qml.qrc”下的“/”节点选择“添加新文件…”项新建TextBox.qml文件编写代码。 3打开MainForm.ui.qml文件修改代码。
19.5 QML集成JavaScript
19.5.1 调用JavaScript函数
【例】难度一般CH1912编写JavaScript函数实现图形的旋转鼠标每单击一次矩形就转动一个随机的角度运行效果如图19.24所示。 2右击项目视图“资源”→“qml.qrc”下的“/”节点选择“添加新文件…”项新建RotateRect.qml文件编写代码。
3打开MainForm.ui.qml文件修改代码如下
…
Rectangle {…MouseArea {id: mouseAreaanchors.fill: parent}TextEdit {id: textEditvisible: false}RotateRect { //直接使用RotateRect组件x:50;y:50}
}
19.5.2 导入JS文件
【例】难度一般CH1913往QML源文件中导入使用外部JS文件来实现图形旋转运行效果同前图19.24。 实现步骤如下。 1新建QML应用程序项目名称为“JSFile”。 2右击项目视图“资源”→“qml.qrc”下的“/”节点选择“添加新文件…”项弹出“新建文件”对话框如图19.25所示选择文件和类“Qt”下的“JS File”模板。 3单击“Choose…”按钮在“Location”页输入文件名“myscript”并选择保存路径本项目文件夹下。连续单击“下一步”按钮最后单击“完成”按钮就在项目中添加了一个.js文件。 4在myscript.js中编写代码如下
function getRandomNumber() { //定义JavaScript函数return Math.random() * 360; //随机旋转的角度值
}5右击项目视图“资源”→“qml.qrc”下的“/”节点选择“添加新文件…”项新建RotateRect.qml文件编写代码如下
import QtQuick 2.0
import myscript.js as Logic //导入JS文件
Rectangle {id: rectwidth: 60height: 60gradient: Gradient { //渐变色增强旋转的视觉效果GradientStop { position: 0.0; color: yellow }GradientStop { position: 0.33; color: blue }GradientStop { position: 1.0; color: aqua }}Behavior on rotation { //行为动画RotationAnimation {direction: RotationAnimation.Clockwise}}MouseArea {anchors.fill: parentonClicked: rect.rotation Logic.getRandomNumber();
//使用导入JS文件中定义的JavaScript函数}
}6打开MainForm.ui.qml文件修改代码如下
…
Rectangle {…MouseArea {id: mouseAreaanchors.fill: parent}TextEdit {id: textEditvisible: false}RotateRect { //使用RotateRect组件x:50;y:50}
}本章相关例程源码下载
1.Qt5开发及实例_CH1901.rar 下载
Qt5开发及实例_CH1901.rar
2.Qt5开发及实例_CH1902.rar 下载
Qt5开发及实例_CH1902.rar
3.Qt5开发及实例_CH1903.rar 下载
Qt5开发及实例_CH1903.rar
4.Qt5开发及实例_CH1904.rar 下载
Qt5开发及实例_CH1904.rar
5.Qt5开发及实例_CH1905.rar 下载
Qt5开发及实例_CH1905.rar
6.Qt5开发及实例_CH1906.rar 下载
Qt5开发及实例_CH1906.rar
7.Qt5开发及实例_CH1907.rar 下载
Qt5开发及实例_CH1907.rar
8.Qt5开发及实例_CH1908.rar 下载
Qt5开发及实例_CH1908.rar
9.Qt5开发及实例_CH1909.rar 下载
Qt5开发及实例_CH1909.rar
10.Qt5开发及实例_CH1910.rar 下载
Qt5开发及实例_CH1910.rar
11.Qt5开发及实例_CH1911.rar 下载
Qt5开发及实例_CH1911.rar
12.Qt5开发及实例_CH1912.rar 下载
Qt5开发及实例_CH1912.rar
13.Qt5开发及实例_CH1913.rar 下载
Qt5开发及实例_CH1913.rar
