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

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

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

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

前话

    本学章节笔记主要详解Item元素（上半场主要涉及anchors锚，本篇章是讲解剩下的item属性和methods），因为所有可视化的界面元素都继承于Item，熟悉Item后，不同的继承子类，有其定制的属性（从几个到几十个不等）。

qml如何嵌入式qt（qt5以后），请查看博客

《Qt实用技巧：在Qt Gui程序中嵌入qml界面（可动态覆盖整个窗口）》：

http://blog.csdn.net/qq21497936/article/details/78486552

《qml学习笔记(一)：界面元素初探》：

http://blog.csdn.net/qq21497936/article/details/78498575

《qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）》

http://blog.csdn.net/qq21497936/article/details/78516201

基类Item介绍

    基类Item是所有可视化子类的父类，它不是可见的，但是它定义了所有通用元素通用的属性，比如x、y、width、height、anchoring和handingsuppourt。

紧接上半场

antialiasing : bool [可读写][抗锯齿，主要用于Rectange和基于图像的元素的抗锯齿功能，缺省为false，开启会增加内存和可能较慢的渲染]

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

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

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

data : list<Object> [default][允许在某个项目中将可见的子元素和不可见的资源自由混合]

enabled : bool [只写][元素能否收到鼠标和键盘的时间，缺省认为true]

focus : bool [只写][元素能否控制FocusScope的焦点，这个属性保存项目是否在封闭FocusScope具有焦点]

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

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

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

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

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

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

变换原点如下图：

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

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引入。

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

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