Item {
    Rectangle {
        width: 100;
        height: 100;
        color: "red";
        rotation: 15
    }
    Rectangle {
        x: 120;
        width: 100;
        height: 100;
        color: "red";
        antialiasing: true;
        rotation: 15
    }
}

图片.png

baselineOffset : int [可读写][baseline基线偏移，baseline是文本所在的bottom]
children : list<Item> [只读][获取某个元素的所有可视的子元素]
childrenRect :子元素位置排列组件的子组件的集体的位置和尺寸。如果我们为了组件正确的尺寸，需要访问组件的子组件的集体几何时，这个属性是有用的。

Item {
    Rectangle {
        width: 100;
        height: 100;
        color: "gray";
        Rectangle {
            x: 5;
            y: 5;
            id: rec1;
            width: 90;
            height: 90;
            color: "blue";
            Rectangle {
                id: child1;
                x:0; y:0; width:40; height:40;
            }
            Rectangle {
                id: child2;
                x:50; y:0; width:40; height:40;
            }
            Rectangle {
                id: child3
                x:0; y:50; width:40; height:40;
            }
            Rectangle {
                id: child4;
                x:50; y:50; width:40; height:40;
            }
        }
        Component.onCompleted: {
            console.log("rec1.childrenRect.x      = " + rec1.childrenRect.x);
            console.log("rec1.childrenRect.y      = " + rec1.childrenRect.y);
            console.log("rec1.childrenRect.width  = " + rec1.childrenRect.width);
            console.log("rec1.childrenRect.height = " + rec1.childrenRect.height);
        }
    }
}

图片.png

childrenRect.x : real [只读][子元素的集体x坐标，同上childrenRect]
childrenRect.y : real [只读][子元素的集体y坐标，同上childrenRect]
childrenRect.width : real [只读][子元素的集体宽度，同上childrenRect]
childrenRect.height : real [只读][子元素的集体高度，同上childrenRect]
clip : bool [只写][其子元素是否包含在父元素内，当其为true时相当于QWdiget内部控件只能显示在内部一样]

Item {
    Rectangle {
        width: 100;
        height: 100;
        color: "gray";
        Rectangle {
            x: 5;
            y: 5;
            id: rec1;
            width: 90;
            height: 90;
            color: "blue";
            clip: true;
            Rectangle {
                id: child1;
                x:0; y:0; width:40; height:120;
                color: "black";
            }
        }
    }
}

图片.png

data : list<Object> [default][允许在某个项目中将可见的子元素和不可见的资源自由混合]
enabled : bool [只写][元素能否收到鼠标和键盘的时间，缺省认为true]
focus : bool [只写][元素能否控制FocusScope的焦点，这个属性保存项目是否在封闭FocusScope具有焦点]

Rectangle {
    width: 100; height: 100
    TextInput {
          id: input
          focus: true
    }
}

图片.png

Rectangle {
    width: 100; height: 100
    FocusScope {
        id: scope
//        focus: true // 去掉则不能获取焦点
        TextInput {
            id: input
            focus: true
        }
    }
}

图片.png

height : real [读写][元素高度]
implicitHeight : real [读写][如果没有指定宽度或高度，则定义项目的自然宽度或高度，暂未理解]
implicitWidth : real[读写][如果没有指定宽度或高度，则定义项目的自然宽度或高度，暂未理解]

Item {
    property alias icon: image.source
    property alias label: text.text
    implicitWidth: text.implicitWidth + image.implicitWidth
    implicitHeight: Math.max(text.implicitHeight, image.implicitHeight)
    Image { id: image }
    Text {
        id: text
        wrapMode: Text.Wrap
        anchors.left: image.right; anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
    }
}

layer.effect : Component [组件:控制本层的效果，涉及到组件component，后续章节进一步讲解]
layer.enabled : bool [可读写][保存项目是否分层。默认情况下禁用分层]
layer.format : enumeration [可读写][此属性定义纹理的内部OpenGL格式。修改该属性最有意义时，layer.effect也指定。根据OpenGL实现，这个属性可能允许您保存一些纹理内存]
layer.mipmap : bool [可读写][如果此属性为true，mipmap生成纹理]
layer.samplerName : string [可读写][保存效果源纹理属性的名称]
layer.smooth : bool [可读写][是否平滑变化过渡]
layer.sourceRect : rect [可读写][此属性定义应呈现到纹理中的项的矩形区域。源矩形可以大于项本身。如果矩形为NULL，这是默认值，那么整个项目将呈现给纹理]
layer.textureSize : size [可读写][此属性保存层纹理的请求像素大小。如果为空，这是默认值，则使用该项的大小。注：有些平台限制多少帧缓冲对象可以，这意味着实际的纹理大小可能大于要求尺寸]
layer.wrapMode : enumeration此属性定义与纹理相关联的OpenGL包装模式。当layer.effect指定时，修改该属性有意义。

ShaderEffectSource.ClampToEdge        - GL_CLAMP_TO_EDGE both horizontally and vertically
ShaderEffectSource.RepeatHorizontally - GL_REPEAT horizontally, GL_CLAMP_TO_EDGE vertically
ShaderEffectSource.RepeatVertically   - GL_CLAMP_TO_EDGE horizontally, GL_REPEAT vertically
ShaderEffectSource.Repeat             - GL_REPEAT both horizontally and vertically

opacity : real [可读写][透明度，完全透明0—>>1.0完全不透明]
parent : Item [可读写][读取时获取父对象，设置时指定父对象]
resources : list<Object> [可读写][获取某个元素的所有不可视的子元素]
rotation : real [可读写][旋转度，本元素中心瞬时钟旋转角度]
scale : real [可读写]

Rectangle {
    color: "blue"
    width: 100; height: 100
    Rectangle {
        color: "green"
        width: 25; height: 25
        scale: 1.5
    }
    Rectangle {
        color: "red"
        width: 25; height: 25;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.verticalCenter: parent.verticalCenter;
    }
    Rectangle {
        color: "yellow"
        x: 60; y: 60; width: 25; height: 25
        scale: 0.5
    }
}

图片.png

smooth : bool [可读写][主要用于基于图像的项，以决定项是否应该使用平滑采样。使用线性插值进行平滑采样，而使用最近邻进行非光滑采样，在Qt quick 2中，此属性对性能的影响最小]
state : string [可读写][此属性保存项的当前状态的名称，缺省为无状态名称]
states : list<State> [可写]此属性包含此项的可能状态列表。若要更改此项的状态，请将状态属性设置为其中的一个状态，或将状态属性设置为空字符串，以将该项恢复为默认状态,此属性指定为状态对象列表]

Rectangle {
    id: root;
    width: 100; height: 100;
    state: "red_color"; // state缺省无状态
    states: [
        State {
            name: "red_color";
            PropertyChanges { target: root; color: "red" }
        },
        State {
            name: "blue_color"
            PropertyChanges { target: root; color: "blue" }
        }
    ]
    MouseArea {
        anchors.fill: parent;
        onClicked: {
            if(parent.state == "blue_color") {
                parent.state = "red_color";
            }else{
                parent.state = "blue_color";
            }
        }
    }
}

图片.png

transform : list<Transform> [可读写][此属性保存要应用的转换列表]

Rectangle {
    Rectangle {
        id: rect
        width: 200; height: 200
        color: "red"
        MouseArea {
            id: mouseArea
            anchors.fill: parent
        }
        states: State {
            name: "moved"; when: mouseArea.pressed // 当鼠标按下时，x,y移动到50，50；松开鼠标会自动回去
            PropertyChanges { target: rect; x: 50; y: 50 }
        }
        transitions: Transition {
            NumberAnimation { properties: "x,y"; easing.type: Easing.InOutQuad }
        }
    }
}

图片.png

transformOrigin : enumeration [可读写][这个属性持有刻度和旋转变换的原点。九个转换源可用。默认的变换原点是Item.Center]

变换原点如下图：

图片.png

Rectangle{
    Image {
        source: "1.png";
        opacity: 0.5;
    }
    Image {
        source: "1.png";
        transformOrigin: Item.BottomRight; // 本元素的右下角作为变化原点
        rotation: 45;
        opacity: 0.6;
    }
}

图片.png

transitions : list<Transition> [可读写][此属性包含此项的转换列表。这些定义了每当改变其状态时应用到该项的转换。此属性指定为一个转换对象列表]，格式如下：

Item {
    transitions: [
        Transition {
            //...
        },
        Transition {
            //...
        }
    ]
}

visible : bool [可读写][控制该元素是否可见]
visibleChildren : list<Item> [只读][此只读属性列出当前可见的所有项的子元素。注意，一个孩子的可视性可能发生了明显的改变，或者是因为这个（它的父母）项目或另一个祖父母的可见性改变了]
width : real [读写][元素宽度，缺省为0]
x : real [读写][元素x坐标，相对于父元素的右上角，缺省为0]
y : real [读写][元素y坐标，相对于父元素的右上角，缺省为0]
z : real [读写][元素z轴堆叠，z越大越显示在屏幕前方，缺省为0]

Methods

childAt(real x, real y)

返回该项坐标系统中在点（x，y）处找到的第一个可见子项。如果没有这样的项，则返回null。

object contains(point point)

如果该项包含在本地坐标中的该点，则返回true；否则返回false。

forceActiveFocus(Qt::FocusReason reason)

用给的理由强制锁定焦点在该元素，该方法设置重点项目，确保在对象层次结构中的所有祖先FocusScope对象也给予重点关注。

此方法在Qt 5.1引入。

forceActiveFocus()

这是一个重载函数。

强制活动焦点在该元素上。

该方法设置焦点在元素上，确保在对象层次结构中的所有祖先FocusScope对象也给予焦点。焦点的改变的原因是：Qt::OtherFocusReason。使用重载方法指定焦点以便更好地处理焦点更改。

object mapFromItem(Item item, real x, real y, real width, real height)

映射参数item的坐标系统点（x,y）到本元素坐标系统，并返回一个对象的x和y匹配映射坐标属性。

如果参数item是一个空值，这个映射后得到的是从根QML视图坐标系的点或矩形。

object mapFromItem(Item item, real x, real y)

映射参数item的坐标系统矩形（x, y, width,height）到本元素坐标系统，并返回一个对象的(x,y,width和height）匹配映射坐标属性。

如果参数item是一个空值，这个映射后得到的是从根QML视图坐标系的点或矩形。

object mapToItem(Item item, real x, real y, real width, real height)

映射本元素项目的坐标系统矩形（x, y, width,height）到参数item的坐标系统，并返回一个对象的(x,y,width和height）匹配映射坐标属性。

如果项目是一个空值，这个地图的点或直接到根QML视图坐标系统。

object mapToItem(Item item, real x, real y)

映射本元素项目的坐标系统矩形（x, y, width,height）到参数item的坐标系统，并返回一个对象的(x,y,width和height）匹配映射坐标属性。

如果项目是一个空值，这个地图的点或直接到根QML视图坐标系统。

nextItemInFocusChain(bool forward)

返回位于该项旁边的焦点链中的项。如果转发是true，或者不提供，则它是转发方向的下一项。如果前向是false，则它是向后方向的下一项。

此方法在Qt 5.1引入。

原博主博客地址：https://blog.csdn.net/qq21497936

原博主博客导航：https://blog.csdn.net/qq21497936/article/details/102478062

本文章博客地址：http://blog.csdn.net/qq21497936/article/details/78522816

qml开发笔记(三)：可视化元素基类Item详解（下半场）

Qt开发专栏：qml开发（点击传送门）

qml开发笔记(三)：可视化元素基类Item详解（下半场）

前话

基类Item介绍

紧接上半场

Methods

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

qml开发笔记(三)：可视化元素基类Item详解（下半场）

qml开发笔记(三)：可视化元素基类Item详解（下半场）

前话

基类Item介绍

紧接上半场

Methods

热门文章

最新文章

相关电子书

相关实验场景