QML基础以及Qt Quick应用
QML基础以及Qt Quick应用
- 一 QML文档构成
- 1．import部分
- 2．对象声明
- 3．属性别名
- 二 QML可视元素
- 1.Rectangle
- 2.Image
- 3.Text
- 4.自定义元素（组件）
- 三 QML元素布局
- 1.Positioner（定位器）
- 2.Anchor（锚）
- 四 QML事件处理
- 1.鼠标事件
- 2.键盘事件
- 3.输入控件与焦点
- 五 QML集成JavaScript
- 1.调用JavaScript函数
- 2.导入JS文件
一 QML文档构成
1．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类型、接口和功能。
2．对象声明
这是一个QML程序代码的主体部分，它以层次化的结构定义了可视场景中将要显示的元素，如矩形、图像、文本及获取用户输入的对象……它们都是Qt Quick为用户界面开发提供的基本构件。例如，main.qml的对象声明部分：
Window { //对象visible: true //属性width: 640height: 480title: qsTr("Hello World")MainForm { //子对象anchors.fill: parentmouseArea.onClicked: {console.log(qsTr('Clicked on background. Text: "' + textEdit.text + '"'))}}}
}
Eg：MainForm.ui.qml
import QtQuick 2.0Rectangle{property alias mouseArea: mouseArea //属性别名property alias textEdit:textEditwidth: 360height: 360// color: "blue"MouseArea{ //响应鼠标事件的区域，可以使用parent访问父对象RecTangleid:mouseAreaanchors.fill: parent //anchors.fill布局作用，会使MouseArea充满一个对象的内部} //此处parent表示MouseArea充满矩形，即整个窗口内部都是鼠标响应区TextEdit{id:textEdittext:qsTr("enter some text ...")verticalAlignment: Text.AlignVCenteranchors.top: parent.top //位于矩形窗口上部anchors.horizontalCenter: parent.horizontalCenter //位于矩形窗口上部居中anchors.topMargin: 50 //位于矩形窗口上部居中 距离 20Rectangle{anchors.fill: parentanchors.margins: -10color: "transparent"border.width: 1}}
}
注意：每个对象都可以指定一个唯一的id值，这样便可以在其他对象中识别并引用该对象。例如在本例代码中：
MouseArea {
id: mouseArea
…
}
就给MouseArea指定了id为mouseArea。可以在一个对象所在的QML文档中的任何地方，通过使用该对象的id来引用该对象。因此，id值在一个QML文档中必须是唯一的。对于一个QML对象而言，id值是一个特殊的值，不要把它看成一个普通的属性，例如，无法使用mouseArea.id来进行访问。一旦一个对象被创建，它的id就无法被改变了。
Id值必须使用小写字母或以下划线开头，不能使用除字母，数字，下划线以外的字符
3．属性别名
属性也可以有别名，QML使用alias关键字声明属性的别名：“property alias 别名:属性名”
property alias mouseArea: mouseArea //MouseArea的属性别名
property alias textEdit: textEdit //TextEdit的属性别名
这里把MouseArea看成Rectangle的一个属性（QML中的子对象也可视为其父对象的属性），取其id（mouseArea）为属性名，并给它定义一个别名“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的一个属性，并为其定义别名和引用。
属性别名对于允许外部对象直接修改和访问另一个Qml文档中的子对象很有用
子对象也可以看做根对象的一个属性。一个Qml文档只能有一个根对象
二 QML可视元素
1.Rectangle
Rectangle{id:topRectrotation: 45 //旋转45opacity: 0.6 //透明度scale: 0.8 //缩小为原尺寸的80%x:135 //x方向坐标y:60width: 100height: 100color: "#00ffff"radius: 8 //绘制圆角矩形border{width: 3;color: "blue"}//为矩形添加一个3像素的蓝色边框}
mouseArea.onClicked: { //矩形对象可见性topRect.visible = !topRect.visible}gradient: Gradient{GradientStop{position: 0.0;color: "aqua"}GradientStop{position: 1.0;color: "teal"}}
以垂直方向的渐变色填充矩形，gradient属性要求一个Gradient对象，该对象需要一个GradientStop列表。（在某个位置上必须是某种颜色，期间的过度色由计算得到）GradientStop需要两个属性：position 在0~1中间 color 是说这个位置的颜色值
GradientStop{position: 1.0;color: “teal”}从上往下到矩形底部的位置范围内都是蓝绿色
2.Image
Image类型显示图片，类型有个source属性，该属性可以是远程或本地的URL，也可以是嵌入已编译的资源文件中的图像文件url
main.qml
Window {visible: truewidth: 640height: 480title: qsTr("Hello World")MainForm {anchors.fill: parent}
}
//main.ui.qml
import QtQuick 2.0Rectangle {Image {x:20y:20width: 1920/5height:1080/5id: imgesource: "qrc:/image/timg.jpg"fillMode: Image.PreserveAspectCrop //设置图片的填充模式clip: true //避免所渲染的图片超出元素范围}}
fillMode: Image.Stretch //拉伸
fillMode: Image.PreserveAspectCrop //等比缩放 最大化填充Image，必要时裁剪图片
fillMode: Image.PreserveAspectFit//等比缩放
fillMode: Image.Tile //在水平方向和垂直方向平铺像贴瓷砖一样
fillMode: Image.TileHorizontally //水平平铺
fillMode: Image.TileVertically //垂直平铺
fillMode: Image.Pad //保持原图片原样不做变换
3.Text
Rectangle {Text { //普通纯文本x:60y:100color: "green"font.family:"Helvetica" //设置字体font.pointSize: 24 //设置字号id: texttext: qsTr("hello qt quick !") //}Text { //富文本x:60y:140color: "green"font.family:"Helvetica" //设置字体font.pointSize: 24 //设置字号text: "<b>Hello</b> <i>Qt Quick!</i>"//Text元素支持用HTML类型标记定义富文本，它有一个textFormat属性，默认值为Text.RichText（输出富文本）；若显式地指定为Text.PlainText，则会输出纯文本（连同HTML标记一起作为字符输出）。}Text { //带样式文本x:60y:180color: "green"font.family:"Helvetica" //设置字体font.pointSize: 24 //设置字号style: Text.OutlinestyleColor:"blue"text: "hello qt quick !"
//style: Text.Outline;styleColor:"blue"：style属性设置文本的样式，支持的文本样式有Text.Normal、Text.Outline、Text.Raised和Text.Sunken；styleColor属性设置样式的颜色，这里是蓝色。}Text { //带省略的文本width:200color: "green"font.family:"Helvetica" //设置字体font.pointSize: 24 //设置字号horizontalAlignment: Text.AlignLeft //在窗口中左对齐verticalAlignment: Text.AlignTop //在窗口中左对齐elide:Text.ElideRight //设置省略文本的部分内容来适合Text的宽度，若没有对Text明确设置width值，//则elide属性将不起作用。elide可取的值有Text.ElideNone（默认，不省略）、// Text.ElideLeft（从左边省略）、Text.ElideMiddle（从中间省略）//Text.ElideRight（从右边省略）。text: "hello qt quick !"}Text { //换行的文本width: 200y:30color: "green"font.family:"Helvetica" //设置字体font.pointSize: 24 //设置字号horizontalAlignment: Text.AlignLeftwrapMode: Text.WrapAnywheretext: "hello qt quick !"}
}
//wrapMode:Text.WrapAnywhere：如果不希望使用elide省略显示方式，还可以通过wrapMode属性指定换行模式，本例中设为Text.WrapAnywhere，即只要达到边界（哪怕在一个单词的中间）都会进行换行；若不想这么做，可设为Text.WordWrap只在单词边界换行。
4.自定义元素（组件）
新建qml文件，代码如下。将普通的矩形元素改造成按钮，并封装了按钮的文本，颜色。边界等属性，同时定义了他在相应用户单击时的行为
import QtQuick 2.0Rectangle { //将Rectangle自定义成按钮id:btnwidth: 100;height: 62 //按钮的尺寸color: "teal" //按钮颜色border.color: "aqua" //按钮边界色border.width: 3 //按钮边界宽度Text { //Text元素作为按钮文本id: labelanchors.centerIn: parentfont.pointSize: 16text: "开始"}MouseArea { //MouseArea对象作为按钮单击事件响应区anchors.fill: parentonClicked: { //响应单击事件代码label.text = "按钮已按下！"label.font.pointSize = 11 //改变按钮文本和字号btn.color = "aqua" //改变按钮颜色btn.border.color = "teal" //改变按钮边界色}}
}
三 QML元素布局
1.Positioner（定位器）
行列网格定位
/* 红色矩形，源文件RedRectangle.qml */
import QtQuick 2.0
Rectangle {width: 64 //宽度height: 32 //高度color: "red" //颜色border.color: Qt.lighter(color) //边框色设置比填充色浅（默认是50%）
}
/* 绿色矩形，源文件GreenRectangle.qml */
import QtQuick 2.0
Rectangle {width: 48height: 62color: "green"border.color: Qt.lighter(color)
}
/* 蓝色矩形，源文件BlueRectangle.qml */
import QtQuick 2.0
Rectangle {width: 80height: 50color: "blue"border.color: Qt.lighter(color)
}
///========================================
```cpp
import QtQuick 2.12
import QtQuick.Window 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")MouseArea{id:mouseAreaanchors.fill: parent}Row{x:25y:25spacing: 10 //元素间距为10像素layoutDirection: Qt.RightToLeft //元素从右向左排列//以下添加被Row定位的元素成员RedRectangle{}BlueRectangle{}GreenRectangle{}}//Row {…}：Row将被其定位的元素成员都放置在一行的位置，所有元素之间的间距相等（由spacing属性设置），顶端保持对齐。layoutDirection属性设置元素的排列顺序，可取值为Qt.LeftToRight（默认，从左向右）、Qt.RightToLeft（从右向左）。Column{x:25y:120spacing: 2 //元素间距为10像素//以下添加被Column定位的元素成员RedRectangle{}BlueRectangle{}GreenRectangle{}}//Column {…}：Column将元素成员按照加入的顺序从上到下在同一列排列出来，同样由spacing属性指定元素间距，所有元素靠左对齐。Grid{x:140y:120columns: 3 //每行3个元素spacing: 5//以下添加被Grid定位的元素成员BlueRectangle{}BlueRectangle{}BlueRectangle{}BlueRectangle{}BlueRectangle{}}
//Grid {…}：Grid将其元素成员排列为一个网格，默认从左向右排列，每行4个元素。可通过设置rows和columns属性来自定义行和列的数值，如果二者有一个不显式设置，则另一个会根据元素成员的总数计算出来。例如，本例中的columns设置为3，一共放入5个蓝色矩形，行数就会自动计算为2。
}
```cpp
Flow（流）Flow{anchors.fill:parentanchors.margins: 15 //元素与窗口左上角边距15像素spacing: 5RedRectangle{}BlueRectangle{}GreenRectangle{}
}
// //Flow会将元素成员以流的形式显示出来，它既可以从左向右横向布局也可以从上向下纵向布局，或反之。与Column和Row不同的是，添加到Flow中的元素 会根据显示区（窗体）尺寸动态的调整其布局。
重复器(Repeater)
重复器用于创建大量相似的元素成员，常与其它定位器结合使用
Grid{x:25y:25spacing: 4//用重复器为Grid添加元素成员Repeater{model: 16 //要创建的元素成员个数Rectangle{ //成员皆为矩形元素width: 48;height: 48color: "aqua"Text{anchors.fill:parentverticalAlignment: Text.AlignVCenterhorizontalAlignment: Text.AlignHCentercolor: "black"font.pointSize: 20text:index//text: index：Repeater会为每个子元素注入一个index属性，作为当前的循环索引（本例中是0～15）。因可以在子元素定义中直接使用这个属性，故这里用它给Text的text属性赋值。}}}}
//Repeater {…}：重复器，作为Grid的数据提供者，它可以创建任何QML基本的可视元素。因Repeater会按照其model属性定义的个数循环生成子元素，故上面代码重复生成16个Rectangle。
2.Anchor（锚）
QML还提供了一种使用Anchor（锚）来进行元素布局的方法。每个元素都可被认为有一组无形的“锚线”：left、horizontalCenter、right、top、verticalCenter和bottom，如图所示，Text元素还有一个baseline锚线（对于没有文本的元素，它与top相同）。
锚系统允许为一个元素的锚指定边距（margin）和偏移（offset）。
边距指定了元素锚到外边界的空间量，而偏移允许使用中心锚线来定位。一个元素可以通过leftMargin、rightMargin、topMargin和bottomMargin来独立地指定锚边距，也可以使用anchor.margins来为所有的4个锚指定相同的边距。
锚偏移使用horizontalCentorOffset,verticalCentorOffset 和baselineOffset来指定。Anchor.fill将一个元素充满另一个元素等价适用于四个锚。注意只能在父子或者兄弟元素之间使用锚，而且基于锚的布局不能与有绝对位置的定义混和使用（直接设置x y），会出现不确定的后果
//main.qml
Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Rectangle {property alias mouseArea: mouseArea/* 定义属性别名 *///定义属性别名以便在外部QMl文档（Button组件）中可以访问这几个元素property alias chgRect1: changingRect1 //矩形changingRect1属性别名property alias chgRect2: changingRect2 //矩形changingRect2属性别名property alias rRect: redRect //红矩形redRect属性别名width: 360height: 360MouseArea {id: mouseAreaanchors.fill: parent}/* 使用Anchor对三个矩形元素进行横向布局 *///这段代码使用已定义的三个现成矩形元素，通过分别设置anchors.left、anchors.top、anchors.leftMargin、anchors.topMargin等锚属性，对它们进行从左到右的布局BlueRectangle { //蓝矩形id:blueRectanchors.left: parent.left //与窗口左锚线锚定anchors.top: parent.top //与窗口顶锚线锚定anchors.leftMargin: 25 //左锚边距（与窗口的左边距）anchors.topMargin: 25 //顶锚边距（与窗口的顶边距）}GreenRectangle { //绿矩形id:greenRectanchors.left: blueRect.right //绿矩形左锚线与蓝矩形右锚线锚定anchors.top: blueRect.top //绿矩形顶锚线与蓝矩形顶锚线锚定anchors.leftMargin: 40 //左锚边距（与蓝矩形的间距）}RedRectangle { //红矩形id:redRectanchors.left: greenRect.right //红矩形左锚线与绿矩形右锚线锚定anchors.top: greenRect.top //红矩形顶锚线与绿矩形顶锚线锚定anchors.leftMargin: 40 //左锚边距（与绿矩形的间距）}/* 对比测试Anchor的性质 *///锚属性还可以在程序运行中通过代码设置来动态地改变，为了对比，本例设计使用两个相同的红矩形，初始它们都与窗体左锚线锚定（对齐），然后改变右锚属性来观察它们的行为。RedRectangle {id:changingRect1anchors.left: parent.left //矩形changingRect1初始与窗体左锚线锚定anchors.top: blueRect.bottomanchors.leftMargin: 25anchors.topMargin: 25}RedRectangle {id:changingRect2anchors.left: parent.left //changingRect2与changingRect1左对齐anchors.top: changingRect1.bottomanchors.leftMargin: 25anchors.topMargin: 20}/* 复用按钮 */Button {width:95;height:35//按钮组件原定义尺寸为“width: 100;height: 62”，复用时可以重新定义它的尺寸属性以使程序界面更美观。新属性值会“覆盖”原来的属性值，就像面向对象的“继承”一样提高了灵活性anchors.right: redRect.rightanchors.top: changingRect2.bottomanchors.topMargin: 10}}
}
/
/红绿蓝矩形与之前一样
//Button.qml 只修改onclick
onClicked: { //响应单击事件代码label.text = "按钮已按下！"label.font.pointSize = 11 //改变按钮文本和字号btn.color = "aqua" //改变按钮颜色btn.border.color = "teal" //改变按钮边界色//改变changingRect1右锚属性changingRect1.anchors.left = undefinedchangingRect1.anchors.right = redRect.right//这里用“chgRect1.anchors.left = undefined”先解除其左锚属性的定义，然后再定义右锚属性，执行后，该矩形便会移动到与redRect（第一行最右边的红矩形）右对齐。//改变changingRect2右锚属性changingRect2.anchors.right = redRect.rightchangingRect2.anchors.left = undefined//这里先用“chgRect2.anchors.right = rRect.right”指定右锚属性，由于此时元素的左锚属性尚未解除，执行后，矩形位置并不会移动，而是宽度自动“拉长”到与redRect右对齐，之后即使再解除左锚属性也无济于事，故用户在编程改变布局时，一定要先将元素的旧锚解除，新设置的锚才能生效！}
四 QML事件处理
1.鼠标事件
在QML中如果一个元素想要处理鼠标事件，则要在其上放置一个Mouse Area元素，即用户只能在MouseArea确定的范围内进行鼠标操作
//Rect.qml
import QtQuick 2.0
Rectangle {width: 50;height: 50color:"teal" //蓝绿色MouseArea{anchors.fill: parent //事件响应区充满矩形//拖拽属性设置//MouseArea中的drag分组属性提供了一个使元素可被拖曳的简便方法。drag.target属性用来指定被拖曳的元素的id（这里为parent表示被拖曳的就是所在元素本身）；drag.active属性获取元素当前是否正在被拖曳的信息；drag.axis属性用来指定拖曳的方向，可以是水平方向（Drag.XAxis）、垂直方向（Drag.YAxis）或者两个方向都可以（Drag.XandYAxis）；drag.minimumX和drag.maximumX限制了元素在指定方向上被拖曳的范围。drag.target: parentdrag.axis: Drag.XAxisdrag.minimumX: 0drag.maximumX: 360 -parent.widthacceptedButtons: Qt.LeftButton|Qt.RightButton//MouseArea所能接受的鼠标按键，可取的值有Qt.LeftButton（鼠标左键）、Qt.RightButton（鼠标右键）和Qt.MiddleButton（鼠标中键）。onClicked: {if(mouse.button == Qt.RightButton){//mouse.button：为MouseArea信号中所包含的鼠标事件参数，其中mouse为鼠标事件对象，可以通过它的x和y属性获取鼠标当前的位置；通过button属性获取按下的按键。//设置矩形蓝色并缩小尺寸parent.color = "blue"parent.width -=5parent.height -=5}else if((mouse.button == Qt.LeftButton)&&(mouse.modifiers == Qt.ShiftModifier)){//mouse.modifiers & Qt.ShiftModifier：通过modifiers属性可以获取按下的键盘修饰符，modifiers的值由多个按键进行位组合而成，在使用时需要将modifiers与这些特殊的按键进行按位与来判断按键，常用的按键有Qt. NoModifier（没有修饰键）、Qt.ShiftModifier（一个Shift键）、Qt.ControlModifier（一个Ctrl键）、Qt.AltModifier（一个Alt键）。//设置矩形为蓝绿色 恢复原来大小parent.color = "teal"parent.width =50parent.height =50}else{//设置矩形绿色并放大尺寸parent.color = "green"parent.width +=5parent.height +=5}}}
}
//main.qml
import QtQuick 2.12
import QtQuick.Window 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Rect{x:25y:25opacity: (360.0-x)/360 //透明度设置}
}s
2.键盘事件
当一个按键被按下或释放时，会产生一个键盘事件，并将其传递给或的焦点的QML元素，在QML中，Keys属性提供了基本的键盘事件处理器，所有可视元素都可以通过它来进行按键处理
import QtQuick 2.12
import QtQuick.Window 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")MouseArea {id: mouseAreaanchors.fill: parent}Row { //所有图标成一行横向排列x:50;y:50spacing:30Rectangle { //第一个矩形元素（“音乐”图标）id: musicwidth: 100; height: 100radius: 6color: focus ? "red" : "lightgray"//被选中（获得焦点）时显示红色，否则变灰scale: focus ? 1 : 0.8 //被选中（获得焦点）时图标变大focus: true //初始时选中“音乐”图标KeyNavigation.tab: play//KeyNavigation.tab: play：QML中的KeyNavigation元素是一个附加属性，可以用来实现使用方向键或Tab键来进行元素的导航。它的子属性有backtab、down、left、priority、right、tab和up等，本例用其tab属性设置焦点转移次序，“KeyNavigation.tab: play”表示按下Tab键焦点转移到id为“play”的元素（“游戏”图标）。/* 移动图标位置 */ //(b)Keys.onUpPressed: music.y -= 10 //上移Keys.onDownPressed: music.y += 10 //下移Keys.onLeftPressed: music.x -= 10 //左移Keys.onRightPressed: music.x += 10 //右移Text { //图标上显示的文本anchors.centerIn: parentcolor: parent.focus ? "black" : "gray"//被选中（获得焦点）时显示黑字，否则变灰font.pointSize: 20 //字体大小text: "音乐" //文字内容为“音乐”}}Rectangle { //第二个矩形元素（“游戏”图标）id: playwidth: 100; height: 100radius: 6color: focus ? "green" : "lightgray"scale: focus ? 1 : 0.8KeyNavigation.tab: movie //焦点转移到“影视”图标Keys.onUpPressed: play.y -= 10Keys.onDownPressed: play.y += 10Keys.onLeftPressed: play.x -= 10Keys.onRightPressed: play.x += 10Text {anchors.centerIn: parentcolor: parent.focus ? "black" : "gray"font.pointSize: 20text: "游戏"}}Rectangle { //第三个矩形元素（“影视”图标）id: moviewidth: 100; height: 100radius: 6color: focus ? "blue" : "lightgray"scale: focus ? 1 : 0.8KeyNavigation.tab: music //焦点转移到“音乐”图标Keys.onUpPressed: movie.y -= 10Keys.onDownPressed: movie.y += 10Keys.onLeftPressed: movie.x -= 10Keys.onRightPressed: movie.x += 10//这里使用Keys属性来进行按下方向键后的事件处理，它也是一个附加属性，对QML所有的基本可视元素均有效。Keys属性一般与focus属性配合使用，只有当focus值为true时，它才起作用，由Keys属性获取相应键盘事件的类型，进而决定所要执行的操作。Text {anchors.centerIn: parentcolor: parent.focus ? "black" : "gray"font.pointSize: 20text: "影视"}}}
}
3.输入控件与焦点
QML专门用于接收键盘输入的有两个元素：TextInput和TextEdit
TextInput是单行文本输入框，支持验证器，输入掩码和显示模式等，与QLineEdit不同，QML的文本输入元素只有一个闪动的光标和用户输入的文本，没有边框等可视元素。即创建一个组件，组将被定义好后可在编程中作为输入控件直接使用，效果与可视化设计的文本框一样
TextEdit与TextInput非常类似，唯一区别是TextEdit是多行的文本编辑组件
//TextBox
import QtQuick 2.0
//FocusScope {…}：将自定义的组件置于FocusScope元素中是为了能有效地控制焦点。因TextInput是作为Rectangle的子元素定义的，在程序运行时，Rectangle不会主动将焦点转发给TextInput，故输入框无法自动获得焦点。
//为解决这一问题，QML专门提供了FouseScope，因为它在接收到焦点时，会将焦点交给最后一个设置了fouse：true的子对象，故应用中将TextInput的fouse属性设为true以捕捉焦点，这样文本框的焦点就不会再被其父元素Rectangle夺去了
FocusScope {property alias label: label.text//定义Text元素的text属性的别名，是为了在编程时引用该别名修改文本框前的提示文本，定制出“学号”“姓名”等对应不同输入项的文本框，增强通用性。property alias text: input.text//为了让外界可以直接设置TextInput的text属性，给这个属性也声明了一个别名。//从封装的角度将这是一个很好的设计，巧妙的将TextInput的其它属性设置的细节全部封装与组件中，只暴露出允许//用户修改的Text属性，通过它获取用户界面上输入的内容，提高了安全性Row {//用Row定位器设计出这个复合组件的外观，它由Text和Rectangle两个元素行布局排列组合而成，两者顶端对齐，相距spacing为5。spacing: 5Text { //输入提示文本id: labeltext: "标签"}Rectangle{//矩形元素作为TextInput的父元素，是专为呈现输入框可视外观的，QML本身提供的TextInput只有光标和文本内容而无边框，将矩形设为白色灰边框，对TextInput进行可视化修饰。width: 100height: 20color: "white" //白底色border.color: "gray" //灰色边框TextInput {//这才是真正实现该组件核心功能的元素，将其定义为矩形的子元素并且充满整个Rectangle，就可以呈现出与文本框一样的可视效果。id: inputanchors.fill: parent //充满矩形anchors.margins: 4focus: true //捕捉焦点text: "请输入内容..." //初始文本}}}
}
//main.qml
import QtQuick 2.12
import QtQuick.Window 2.12Window {visible: truewidth: 360height: 360color: "lightgray" //背景设为亮灰色以突出文本框效果title: qsTr("Hello World")property alias mouseArea: mouseAreaMouseArea {id: mouseAreaanchors.fill: parent}/* 以下直接使用定义好的复合组件，生成所需文本框控件 */TextBox { //“学号”文本框id: tBx1x:25; y:25focus: true //初始焦点之所在label: "学号" //设置提示标签文本为“学号”text: focus ? "" : "请输入内容..."//获得焦点则清空提示文字，由用户输入内容KeyNavigation.tab: tBx2 //按Tab键，焦点转移至“姓名”文本框}TextBox { //“姓名”文本框id: tBx2x:25; y:60label: "姓名"text: focus ? "" : "请输入内容..."KeyNavigation.tab: tBx1 //按Tab键，焦点又回到“学号”文本框}
}
五 QML集成JavaScript
QML集成JavaScript方式有两种：一是直接在QML代码中写JavaScript函数，然后直接调用；
二是把JavaScript代码写在外部文件中，需要时用import语句导入.qml源文件中使用。
//main.qml
import QtQuick 2.12
import QtQuick.Window 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")MouseArea {id: mouseAreaanchors.fill: parent}TextEdit{id:textEditvisible: false}RotateRect{ //方法1 x:50;y:50 }RotateRect2{ //方法2x:150;y:50}
}
1.调用JavaScript函数
//RotateRect.qml
import QtQuick 2.0Rectangle {id: rectwidth: 60height: 60gradient: Gradient { //以黄蓝青渐变色填充，增强旋转视觉效果GradientStop { position: 0.0; color: "yellow" }GradientStop { position: 0.5; color: "blue" }GradientStop { position: 1.0; color: "aqua" }}function getRandomNumber() { //定义JavaScript函数return Math.random() * 360; //随机旋转的角度值}Behavior on rotation { //行为动画RotationAnimation {direction: RotationAnimation.Clockwise}}MouseArea {anchors.fill: parent //矩形内部区域都接受鼠标单击onClicked: rect.rotation = getRandomNumber();//在单击事件代码中调用JavaScript函数}
}
2.导入JS文件
新建js文件加入工程中，添加代码如下
//myJavaScript.js
function getRandomNumber() { //定义JavaScript函数return Math.random()*360; //随机旋转的角度值
}
//function getRandomNumber() { //定义JavaScript函数return Math.random()*360; //随机旋转的角度值
}
//RotateRect2.qml
import QtQuick 2.0
import "myJavaScript.js" as Logic
Rectangle {id: rectwidth: 60height: 60gradient: Gradient { //以黄蓝青渐变色填充，增强旋转视觉效果GradientStop { position: 0.0; color: "yellow" }GradientStop { position: 0.5; color: "blue" }GradientStop { position: 1.0; color: "aqua" }}Behavior on rotation { //行为动画RotationAnimation {direction: RotationAnimation.Clockwise}}MouseArea {anchors.fill: parent //矩形内部区域都接受鼠标单击onClicked: rect.rotation = Logic.getRandomNumber()//使用导入JS文件中定义的js函数}
}
当编写好一个JS文件后，其中定义的函数就可以在任何.qml文件中使用，只需要在开头用import导入该文件即可。而在qml文档中无需使用JavaScript函数，这样就将QML代码与JavaScript代码隔离开来
在开发界面复杂，规模较大的QML程序时，一般会将JavaScript函数写在独立的JS文件中，再在组件的QML源文件中import使用这些函数以完成特定的功能逻辑，最后直接在主窗体的ui界面布置这些组件即可。这样才能开发出结构清晰易于维护的QML应用程序
参考书籍:qt5开发及实例 陆文周版本
相关源码：https://download.csdn.net/download/weixin_45492457/13115509
QML基础以及Qt Quick应用相关推荐
- Qt Widgets、QML、Qt Quick的概念与区别
1 QML 和 Qt Quick 是什么关系? 从概念上区分 QML 是一种用户界面规范和标记语言,它允许开发/设计人员创建高性能.流畅的动画和具有视觉吸引力的应用程序. 这里,主要涉及两点: 用户界 ...
- Qt Quick 和qml介绍
Qt Quick和qml Qt Quick是QtSDK4.7中引入的一种新的界面开发框架,使用QtQuick,你可以快速. 轻松地创建供移动和嵌入式设备使用的动态触摸式界面和轻最级应用程序,这也是它被 ...
- Qt Widgets、QML、Qt Quick 的区别
作者: 一去.二三里 个人微信号: iwaleon 微信公众号: 高效程序员 在接触 Qt 之后,很多人难免会有一些疑惑: Q1:QML 和 Qt Quick 之间有什么区别? Q2:QtQuick ...
- QML和Qt Quick
什么是 QML? Qt Meta-Object Language,Qt元对象语言,是一种用于描述应用程序用户界面的声明式编程语言,使用一些可视组件以及这些组件之间的交互来描述用户界面.QML是一种高可 ...
- QML官方系列教程——Using Qt Quick Designer
附网址:http://qt-project.org/doc/qtcreator-3.1/creator-using-qt-quick-designer.html Using Qt Quick Desi ...
- Qt 5.12 LTS(长期维护版本)中Qt Quick的性能改进
我们一直致力于提高Qt的性能和优化其内存消耗.Qt 5.12的一个重点关注是在于减少QML引擎的内存消耗和优化JavaScript性能. 与上一个长期支持版Qt 5.6 LTS相比,Qt 5.9 LT ...
- 《Qt5 Cadaques》学习笔记（六）：QT QUICK Controls 2
6.1 控件简介 从头开始使用 Qt Quick 为您提供了基本的图形和交互元素,您可以从中构建用户界面.使用 Qt Quick Controls 2,您可以从一组稍微结构化的控件开始构建.控件范围从 ...
- Qt Quick实现的涂鸦程序
之前一直以为 Qt Quick 里 Canvas 才可以自绘,后来发觉不是,原来还有好几种方式都可以绘图!可以使用原始的 OpenGL(Qt Quick 使用 OpenGL 渲染),可以构造QSGNo ...
- 二选一的时候到了，Qt Widgets 还是 Qt Quick ? 致Qt开发伙伴
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.Qt QWidgets 和 Qt Quick 各自有什么特性.特点? 1.Qt QWidgets 2.Qt Qui ...
最新文章
- python如何处理异常_python如何进行异常处理
- Java项目:在线蛋糕商城系统(java+jsp+jdbc+mysql)
- SQLServer 2008 ：error 40 出现连接错误
- VUE 动态给对象增加属性，并触发视图更新。
- 智慧树omg期末测试答案_智慧树答案广告文案写作单元期末见面课知到章节测试答案...
- 奖金15万！全球首届“AI球球大作战：Go-Bigger多智能体决策智能挑战赛”开启
- lsb_release -a 查询Linux系统版本
- C#中使用MongoDb
- 网易公司首席执行官 丁磊
- 前端下载文件方式之：创建a标签下载文件
- Vivado里程序固化详细教程
- 什么是JavaSE，写给第一次接触Java的人
- 【网络安全专栏目录】--企鹅专栏导航
- 如何做到3个月吸粉10多万
- web前端期末大作业 HTML+CSS+JavaScript仿唯品会购物商城网页设计实例 企业网站制作
- 2D转换+动画+3D转换
- 精彩回顾 | Dev.Together 2022 开发者生态峰会圆满落幕
- 已更新或删除的行值要么不能使该行成为唯一行
- Go 语言的设计反思
- 2021襄阳五中学高考成绩查询,高考快讯|襄阳五中2021名考生参加2021年高考