|
所以本章主要来讲解Rectangle的父类元素Item 1.Item介绍 如下图所示,我们可以看到Item是Qt中所有视觉项元素的父类, Qt中所有的视觉项目都从Item继承下来的,比如:Image(图像显示元素)、Rectangle(矩形元素)、Text(文本元素)、TextEdit(文本框元素)等等。 而且Item为所有视觉项提供了常见的属性,如x和y位置、宽度和高度、锚和key事件处理支持。 2. Item-常用属性介绍Item提供的常用属性如下所示:
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子元素成员
所以我们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中相当重要,通过它来指定每个元素与其它元素之间的位置方向,从而可以实现相对布局。
示例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来实现左右偏移.
提示: 在后面我们学习Item的子元素时候,就用Row、Column来实现布局. 4. Item-key事件处理 其中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深入讲解
组合按键检测示例如下所示: 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 |
|
|
