【Qt】QML元素：Item

Qt Quick所有的可见的组件都是继承自Item，但Item对象是不可见的，但是它可以像其他可见组件一样定义x、y、width和 height等属性。

一、功能

1 容器

Item元素可以起到容器的作用，将多个元素放到一个元素内。

import QtQuick 2.0

Item {
    Image {
        source: "tile.png"
    }
    Image {
        x: 80
        width: 100
        height: 100
        source: "tile.png"
    }
    Image {
        x: 190
        width: 100
        height: 100
        fillMode: Image.Tile
        source: "tile.png"
    }
}

2 事件处理

对输入信号进行事件处理，例如鼠标、触摸板和按键等。

对于鼠标，如：鼠标移动、鼠标按下、鼠标释放等。

对于键盘，如：按键按下、按键释放等。

import QtQuick 2.0

Item {
    focus: true
    Keys.onPressed: {
        if (event.key == Qt.Key_Left) {
            console.log("move left");
            event.accepted = true;
        }
    }
    Keys.onReturnPressed: console.log("Pressed return");
}

3 水平镜像

可通过LayoutMirroring属性对所包含的元素进行。

LayoutMirroring.enabled: true：开启镜像
LayoutMirroring.childrenInherit: true：子元素镜像

import QtQuick 2.0

Rectangle {
    LayoutMirroring.enabled: true
    LayoutMirroring.childrenInherit: true

    width: 300; height: 50
    color: "yellow"
    border.width: 1

    Row {
        anchors { left: parent.left; margins: 5 }
        y: 5; spacing: 5

        Repeater {
            model: 5

            Rectangle {
                color: "red"
                opacity: (5 - index) / 5
                width: 40; height: 40

                Text {
                    text: index + 1
                    anchors.centerIn: parent
                }
            }
        }
    }
}

4 透明度

Item {
    id: nonLayered

    opacity: 0.5    

	layer.enabled: false

    width: 100
    height: 100

    Rectangle { width: 80; height: 80; border.width: 1 }
    Rectangle { x: 20; y: 20; width: 80; height: 80; border.width: 1 }
}

Item {
    id: layered

    opacity: 0.5

    layer.enabled: true

    width: 100
    height: 100

    Rectangle { width: 80; height: 80; border.width: 1 }
    Rectangle { x: 20; y: 20; width: 80; height: 80; border.width: 1 }
}

二、属性

• activeFocus : bool
• activeFocusOnTab : bool
• anchors
  • anchors.alignWhenCentered : bool
  • anchors.baseline : AnchorLine
  • anchors.baselineOffset : real
  • anchors.bottom : AnchorLine
  • anchors.bottomMargin : real
  • anchors.centerIn : Item
  • anchors.fill : Item
  • anchors.horizontalCenter : AnchorLine
  • anchors.horizontalCenterOffset : real
  • anchors.left : AnchorLine
  • anchors.leftMargin : real
  • anchors.margins : real
  • anchors.right : AnchorLine
  • anchors.rightMargin : real
  • anchors.top : AnchorLine
  • anchors.topMargin : real
  • anchors.verticalCenter : AnchorLine
  • anchors.verticalCenterOffset : real
• antialiasing : bool
• baselineOffset : int
• children : list
• childrenRect
  • childrenRect.height : real
  • childrenRect.width : real
  • childrenRect.x : real
  • childrenRect.y : 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

参考：https://doc.qt.io/qt-5/qml-qtquick-item.html#layout-mirroring