【Qt】QML元素：Item

深藏阁楼爱情的钟 2022-11-05 13:51 158阅读 0赞

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

![在这里插入图片描述][20210306203737420.png]

## 4 透明度 ##

![在这里插入图片描述][20210306204915829.png]

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

![在这里插入图片描述][20210306204922259.png]

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][https_doc.qt.io_qt-5_qml-qtquick-item.html_layout-mirroring]

[20210306203737420.png]: /images/20221023/94ff14200798451e9ff309005758c3d6.png
[20210306204915829.png]: /images/20221023/df61c04f51654899b18a018bcbeddbda.png
[20210306204922259.png]: /images/20221023/8dc58187d8eb4eb492d5c73ef6ac2fa9.png
[https_doc.qt.io_qt-5_qml-qtquick-item.html_layout-mirroring]: https://doc.qt.io/qt-5/qml-qtquick-item.html#layout-mirroring