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

• • 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

• • 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.12Window {visible: truewidth: 640height: 480title: 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: 100z: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.12Window {visible: truewidth: 640height: 480title: 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文檔學習。

總結

以上是生活随笔為你收集整理的QML入门教程(12): Item介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。