4.qml-Item元素学习

所以本章主要来讲解Rectangle的父类元素Item


1.Item介绍

如下图所示,我们可以看到Item是Qt中所有视觉项元素的父类, Qt中所有的视觉项目都从Item继承下来的,比如:Image(图像显示元素)、Rectangle(矩形元素)、Text(文本元素)、TextEdit(文本框元素)等等。

而且Item为所有视觉项提供了常见的属性,如x和y位置、宽度和高度、锚和key事件处理支持。

2. Item-常用属性介绍

Item提供的常用属性如下所示:

  • x : real,指定元素的X坐标

  • y : real,指定元素的Y坐标

  • z : real,指定元素的堆叠顺序,

  • width : real,指定元素的宽度

  • height : real,指定元素的高度

  • implicitHeight : real,指定元素的隐式高度

  • implicitWidth : real, 指定元素的隐式宽度

  • [default] data : list<Object>,data属性, 它是个默认属性,所有的子项都被自动分配给这个属性,所以不需要被赋值

  • clip : bool,指定裁剪属性,默认为false,如果设置为true,那么超出Item自身边框的绘图或者子项目,都会被裁减掉.

  • visible : bool,设置元素是否可见,默认为true.如果在Item自身元素下设置该属性,会直接影响到子项目的可见值。使用该属性时,最好不要使用apacity属性.

  • visibleChildren : list<Item>,保存当前可见的所有子项目

  • children : list<Item>,保存所有子项目

  • opacity : real,透明度,默认值为1.0,如果设置为0.0则表示全透明, 如果在Item自身元素下设置该属性,会直接影响到子项目的透明值。

  • rotation : real,设置元素的顺时针旋转度数

  • scale : real,缩放值,值小于1缩小显示;大于1放大显示;负值则是镜像效果

  • transformOrigin : scale缩放时的基点位置,默认值为Center

2.1  z属性

z用来设置每个子项目的堆叠显示顺序,默认值为0,如果相同Z值的子项目要在同一片空间显示的话,默认是以它们初始化的顺序来显示,如下图所示(蓝色显示在红色的上面):

如果是值不同,那么Z值越大,则显示在最上方.

2.2  clip属性

默认为false,那么如果子项目超出Item自身边框范围,也会被绘制.如果为true,那么将会被裁减.

代码如下所示:

Rectangle {        width: 100height: 100border.width: 3border.color: "#000000"clip: trueRectangle {            width: 70height: 70color: "red"}        Rectangle {            x: 50y: 50width: 70height: 70color: "yellow"}}

设置clip为false时:

设置clip为true时:

2.3  打印children子元素成员

  • 在QML中,如果属性值是list类型的,都可以使用[]方括号来访问列表成员.

  • 并且list提供了一个length 属性,可以让我们获取列表中的数量

  • 还可以使用push方法将值添加到列表中,就像它是JavaScript数组一样

  • 并且列表只能存储QML对象,并且不能包含任何基本类型值(int,string等)。

  • 如果要在列表中存储基本类型,则需要使用var类型

所以我们for循环打印的写法有两种:

for(var i = 0; i < data.length; i++) { ... ...}  // 正常写法for(var i in data) { ... ... }                   // javascript写法
示例如下所示:
Rectangle {        id: group        width: 100height: 100border.width: 3border.color: "#000000"clip: trueRectangle {            id: rect1            width: 70height: 70color: "red"}        Rectangle {            id: rect2            x: 50y: 50width: 70height: 70color: "yellow"visible: false  // 不显示        }         Component.onCompleted: {for(var i in data) {                console.log("data[" + i + "]: ", data[i])            }            console.log("children length: ", children.length)       // 由于只有两个成员,所以打印2for(i = 0; i < children.length; i++) {                console.log("children[" + i + "] 坐标:", children[i].x, children[i].y, children[i].width, children[i].height)            }            console.log("children length: ", visibleChildren.length)  // 由于有个成员不显示,所以打印1for(i = 0; i < visibleChildren.length; i++) {                console.log("visibleChildren[" + i + "] 坐标:", visibleChildren[i].x, visibleChildren[i].y, visibleChildren[i].width, visibleChildren[i].height)            }        }    }
运行打印:

其中Component.onCompleted是个槽函数,当我们实例化完成后, Component就会发出completed信号,然后触发onCompleted槽函数

3.Item-Anchors锚

Anchors锚在Item中相当重要,通过它来指定每个元素与其它元素之间的位置方向,从而可以实现相对布局。
Anchors提供向Item下面几种属性:

  • anchors.top : AnchorLine,指定元素的顶部与哪个瞄线对齐

  • anchors.bottom : AnchorLine,指定元素的底部与哪个瞄线对齐

  • anchors.left : AnchorLine,指定元素的左侧与哪个瞄线对齐

  • anchors.right : AnchorLine,指定元素右侧与哪个瞄线对齐

  • anchors.horizontalCenter : AnchorLine,指定元素与哪个瞄线进行水平居中

  • anchors.verticalCenter : AnchorLine,指定元素与哪个瞄线进行垂直居中

  • anchors.baseline : AnchorLine,指定元素里的文本基线与哪个瞄线对齐(实际就是文本的顶部)

  • anchors.fill : Item,指定元素填满在哪个Item下面,但是使用该属性后,再设置自身元素width和height是无效果的

  • anchors.centerIn : Item,指定元素的中心点放在哪个Item下面进行居中对齐,也可以填anchors.top之类的描线,比如anchors.centerIn : rect1.right

  • anchors.margins : real,设置元素的所有外边框的宽度

  • anchors.topMargin : real

  • anchors.bottomMargin : real

  • anchors.leftMargin : real

  • anchors.rightMargin : real

  • anchors.horizontalCenterOffset : real,设置元素的水平居中的左右偏移值

  • anchors.verticalCenterOffset : real,设置元素的垂直居中的上下偏移值

  • anchors.baselineOffset : real,设置文本基线的偏移值

  • anchors.alignWhenCentered : bool,强制居中,默认为true, 假如宽或者高为奇数时,如果中心对齐, 就可以保证绝对对齐。

示例1-实现3个子元素水平布局
Rectangle {        color: "blue"width: 240height: 80         Rectangle {            id: rect1            color: "red"anchors.alignWhenCentered: falseanchors.centerIn : parent            anchors.horizontalCenterOffset: -parent.width/3anchors.margins: 10width: 50height: 50}        Rectangle {            id: rect2            color: "yellow"anchors.alignWhenCentered: falseanchors.centerIn : parent            anchors.margins: 10width: 50height: 50}        Rectangle {            id: rect3            color: "lightsteelblue"anchors.centerIn : parent            anchors.horizontalCenterOffset: parent.width/3anchors.margins: 10width: 50height: 50}}
效果如下所示:

在上例中,我们通过anchors.centerIn : parent,让3个元素都居中,然后通过anchors.horizontalCenterOffset来实现左右偏移.
注意 - anchors.centerIn : parent 本质上就是垂直水平居中,等价于:

  • anchors.horizontalCenter: parent.horizontalCenter

  • anchors.verticalCenter: parent.verticalCenter

提示: 在后面我们学习Item的子元素时候,就用Row、Column来实现布局.

4. Item-key事件处理
Item通过“key”附加属性可以让所有基于Item的元素都可以使用键处理。Keys附加属性提供了:基本信号,如pressed(event) 和released(event),以及特定按键的信号,比如spacePressed(event)等,如下图所示:

其中event参数包含了按键的详细信息.该参数类型是KeyEvent.如果我们检测到按键是我们所需要的,则需要将accepted设置为true防止该按键事件传播到父级。从而让父级不会对同一事件做出响应。

4.1 Keys属性使用示例
下面我们演示如何检测空格键按下:

Item {          anchors.fill: parent          focus: true  Keys.onPressed: {              if (event.key == Qt.Key_Space) {                  console.log("空格键按下");                  event.accepted = true;              }          }   }

其实我们还可以写的更加简洁,使用特定键信号来接收,这里它会自动将event.accepted设置为true:

Item {        anchors.fill: parent        focus: trueKeys.onSpacePressed: console.log("空格键按下")}

4.2 KeyEvent深入讲解
在上节,我们只是简单学习了如何获取key事件,本节,我们来深入学习如何使用组合按键(比如:ctrl+a).
event的参数类型是KeyEvent,它的属性有:

  • accepted : bool, 按键是否被接受,如果设置为true,则表示已经接受该事件处理,那么该事件就不会再传播到父级。从而让父级不会对同一事件做出响应。

  • text : string, 返回按键按下的字符串名字,比如按下1键,那么text="1",也有可能是空白字符串.

  • count : int, 返回text字符串的长度。

  • isAutoRepeat : bool, 用来检测一直按下未松开的按键事件.如果为true则表示为松开.

  • key : int,键盘码的标识,参考Qt::Key枚举值,比如Qt::Key_Tab

  • modifiers : int, 此属性保存键盘的修饰符标志,比如Qt::ShiftModifier(shift按键被按下)

  • nativeScanCode : quint32,键盘扫描码,区分不同的相同key名按键,比如左侧shift键和右侧shift键,它们的key值是一样,但是nativeScanCode是不一样的.

组合按键检测示例如下所示:

Item {        anchors.fill: parent        focus: trueKeys.onPressed: {if ((event.key == Qt.Key_Space) && (event.modifiers & Qt.ShiftModifier))                console.log("shift + space 被按下")event.accepted = true}}

注意-附加属性的槽函数(信号处理器)

刚刚我们学习了Item的"Key"附加属性,并使用它的信号处理器处理按键,其实都是按照<附加属性>.on<Signal>语法实现的.必须得严格遵守,因为附加属性不属于该元素自身的属性.

如果是使用普通的信号处理器(基类或者自身的信号发射的),则直接用on<Signal>语法实现.

在后面,我们会学习自定义信号,以及信号与槽的连接.END

(0)

相关推荐