QML Item

在QML中所有的可视项目都继承自Item，虽然Item本身没有可视化的外观，但它定义了可视化项目的所有属性。

Item可以作为容器使用：

Item{Rectangle{id:retc}Rectangle{id:retc1}Rectangle{id:retc2}Rectangle{id:retc3}}

item拥有children属性和resources

• children可以获取可见的孩子列表
• resources 包含了不可见的资源

children的使用：

如果只有一个元素的话，可以不用使用children

• 使用children[   ]
• 有多个使用，隔开

Item{children: [Text {id: t0;text: "text0"},Text {id: t1;text: "text1"},Text {id: t2;text: "text2"},Text {id: t3;text: "text3"},Text {id: t4;text: "text4"}]Component.onCompleted: {console.log("index 0的内容为：",children[0].text)console.log("index 1的内容为：",children[1].text)console.log("index 2的内容为：",children[2].text)console.log("index 3的内容为：",children[3].text)console.log("index 4的内容为：",children[4].text)}}

 resources 的使用：

resources: [Timer{}]

Item中还有一个data默认属性，允许在项目中将可见和不可见的资源自由混合，由于data是默认 属性，所以可以省略data标签。

Item{Text {id: t0;text: "text0"}Text {id: t1;text: "text1"}Text {id: t2;text: "text2"}Text {id: t3;text: "text3"}Text {id: t4;text: "text4"}Timer{}Component.onCompleted: {console.log("index 0的内容为：",children[0].text)console.log("index 1的内容为：",children[1].text)console.log("index 2的内容为：",children[2].text)console.log("index 3的内容为：",children[3].text)console.log("index 4的内容为：",children[4].text)}}

 opacity（透明度）

• 0.0 全透明    
• 1.0 完全不透明

 Item{Rectangle{width: 100height: 100color: "red"opacity: 0}Rectangle{x:110y:0width: 100height: 100color: "red"opacity: 0.2}Rectangle{x:220y:0width: 100height: 100color: "red"opacity: 0.5}Rectangle{x:330y:0width: 100height: 100color: "red"opacity: 1.0}
}

 堆叠顺序

Item拥有一个z属性，可以设置堆叠顺序，默认的堆叠顺序为0，z数值大的优先绘制。

如果都没设置的话，根据项目顺序（由上到下）绘制。

Item{Rectangle{width: 100height: 100color: "red"}Rectangle{width: 100height: 100color: "blue"}
}

Item{    Rectangle{z:1width: 100height: 100color: "red"}Rectangle{width: 100height: 100color: "blue"}
}

 定位子项目和坐标映射

• Item中 提供childAt（real x，real y）函数来返回点（x，y）处的子项目，没有的话返回null。
• mapFromItem（Item item，real x，real y）：将项目坐标系中的点 （x， y）映射到此项的坐标系，并返回与映射坐标匹配的点
• mapToItem（Item item，real x，real y） ：将该项目坐标系中的点（x、y）映射到项目的坐标系，并返回与映射坐标匹配的点。

transitions（过渡）

使用transitions来存储项目的过渡列表

Item{id:item2transitions :[Transition {},Transition {},Transition {}]}

states（状态）

使用states来保存该项的可能状态列表

Rectangle {id: rootwidth: 100; height: 100states: [State {name: "red_color"//状态1PropertyChanges { target: root; color: "red" }},State {name: "blue_color"//状态2PropertyChanges { target: root; color: "blue" }}]
}

常见的一些属性：

layer.enabled 是否分层

 非分层不透明度：

Item{opacity: 0.5width: 250height: 250Rectangle{id:rect1;width:100;height: 100;color:"red" ;border.width:1}Rectangle{id:rect2;width:100;height: 100;color: "blue";x:50;y:50;border.width:1}}

分层不透明度：

Item{opacity: 0.5layer.enabled: truewidth: 250height: 250Rectangle{id:rect1;width:100;height: 100;color:"red" ;border.width:1}Rectangle{id:rect2;width:100;height: 100;color: "blue";x:50;y:50;border.width:1}}