Qt Quick入门教程(12): Item介绍
Item的定义
Qt助手的解释
The Item type is the base type for all visual items in Qt Quick.
All visual items in Qt Quick inherit from Item. Although an Item object has no visual appearance, it defines all the attributes that are common across visual items, such as x and y position, width and height, anchoring and key handling support.
The Item type can be useful for grouping several items under a single root visual item
根据Qt官方解释可知，Item是Qt Quick中所有可视项目的基类，就像QWidget是Qt所有控件的父类。
Qt Quick中的所有可视化项目都继承自Item，尽管Item对象没有可视外观，但它定义了可视项中常见的所有属性，如x和y位置、宽度和高度、anchor和键处理支持。
Item的属性
下面的是Item的属性，其它控件也都有这些属性
Properties
-
activeFocus : bool
-
activeFocusOnTab : bool
-
- anchors.top : AnchorLine
- anchors.bottom : AnchorLine
- anchors.left : AnchorLine
- anchors.right : AnchorLine
- anchors.horizontalCenter : AnchorLine
- anchors.verticalCenter : AnchorLine
- anchors.baseline : AnchorLine
- anchors.fill : Item
- anchors.centerIn : Item
- 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
-
antialiasing : bool
-
baselineOffset : int
-
children : list
-
- childrenRect.x : real
- childrenRect.y : real
- childrenRect.width : real
- childrenRect.height : real
-
clip : bool
-
containmentMask : QObject*
-
data : list
-
enabled : bool
-
focus : bool
-
height : real
-
implicitHeight : real
-
implicitWidth : real
-
layer.effect : Component
-
layer.enabled : bool
-
layer.format : enumeration
-
layer.mipmap : bool
-
layer.samplerName : string
-
layer.samples : enumeration
-
layer.smooth : bool
-
layer.sourceRect : rect
-
layer.textureMirroring : enumeration
-
layer.textureSize : size
-
layer.wrapMode : enumeration
-
opacity : real
-
parent : Item
-
resources : list
-
rotation : real
-
scale : real
-
smooth : bool
-
state : string
-
states : list
-
transform : list
-
transformOrigin : enumeration
-
transitions : list
-
visible : bool
-
visibleChildren : list
-
width : real
-
x : real
-
y : real
-
z : real
下面介绍几个陌生的属性
（1）z 设置图元顺序
Qt助手的解释如下：
设置兄弟项的堆叠顺序。默认情况下，堆叠顺序为0。
具有较高堆叠值的项被绘制在具有较低堆叠顺序的兄弟项上。具有相同堆叠值的项目将按照它们出现的顺序从下往上绘制。具有负叠加值的项被绘制在其父元素的内容下。
例如下面的代码
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Item {
Rectangle {
color: "red"
width: 100; height: 100
}
Rectangle {
color: "blue"
x: 50; y: 50; width: 100; height: 100
}
}
}
默认是按照代码顺序，先写的矩形在下方，后写的在下方，如下图：
如果设置z属性值，那么，就可以手动设置图元的叠加顺序
Item {
Rectangle {
color: "red"
width: 100; height: 100
z:0.5
}
Rectangle {
color: "blue"
x: 50; y: 50; width: 100; height: 100
}
}
如下图，此时红色矩形的叠加在蓝色矩形上面
opacity是透明度，合理的设置z和opacity属性值，可以做到意想不到的效果。
（2）focus
是否获得焦点， 默认是false. 在处理窗口键盘事件时，需要将该属性设为true，例如下面的代码是键盘事件的处理：
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle
{
width: parent.width;
height: parent.height;
color: "#c0c0c0";
focus: true;
Keys.enabled: true;
Keys.onEscapePressed: Qt.quit();
Keys.onBackPressed: Qt.quit();
Keys.onPressed: {
switch(event.key){
case Qt.Key_0:
case Qt.Key_1:
case Qt.Key_2:
case Qt.Key_3:
case Qt.Key_4:
case Qt.Key_5:
case Qt.Key_6:
case Qt.Key_7:
case Qt.Key_8:
case Qt.Key_9:
keyView.text = event.key - Qt.Key_0;
break;
}
}
Text
{
id: keyView;
font.bold: true;
font.pixelSize: 24;
text: qsTr("text");
anchors.centerIn: parent;
}
}
}
因为Item自己是不可见的，我们需要添加到窗口Window中, 把整个Rectangle设置窗口一样大，在Rectangle中处理键盘事件，比如按下esc或backspace就退出窗口，按下数字就在text显示出来。
其它属性可以在开发时对照Qt文档学习。