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

根據(jù)Qt官方解釋可知，Item是Qt Quick中所有可視項(xiàng)目的基類，就像QWidget是Qt所有控件的父類。

Qt Quick中的所有可視化項(xiàng)目都繼承自Item，盡管Item對(duì)象沒(méi)有可視外觀，但它定義了可視項(xiàng)中常見(jiàn)的所有屬性，如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

下面介紹幾個(gè)陌生的屬性

（1）z 設(shè)置圖元順序

Qt助手的解釋如下：

設(shè)置兄弟項(xiàng)的堆疊順序。默認(rèn)情況下，堆疊順序?yàn)?。

具有較高堆疊值的項(xiàng)被繪制在具有較低堆疊順序的兄弟項(xiàng)上。具有相同堆疊值的項(xiàng)目將按照它們出現(xiàn)的順序從下往上繪制。具有負(fù)疊加值的項(xiàng)被繪制在其父元素的內(nèi)容下。

例如下面的代碼

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

默認(rèn)是按照代碼順序，先寫的矩形在下方，后寫的在下方，如下圖：

如果設(shè)置z屬性值，那么，就可以手動(dòng)設(shè)置圖元的疊加順序

Item {Rectangle {color: "red"width: 100; height: 100z:0.5}Rectangle {color: "blue"x: 50; y: 50; width: 100; height: 100}}

如下圖，此時(shí)紅色矩形的疊加在藍(lán)色矩形上面

opacity是透明度，合理的設(shè)置z和opacity屬性值，可以做到意想不到的效果。

（2）focus

是否獲得焦點(diǎn)， 默認(rèn)是false. 在處理窗口鍵盤事件時(shí)，需要將該屬性設(shè)為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;}} }

因?yàn)镮tem自己是不可見(jiàn)的，我們需要添加到窗口Window中, 把整個(gè)Rectangle設(shè)置窗口一樣大，在Rectangle中處理鍵盤事件，比如按下esc或backspace就退出窗口，按下數(shù)字就在text顯示出來(lái)。

其它屬性可以在開(kāi)發(fā)時(shí)對(duì)照Qt文檔學(xué)習(xí)。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。