import QtQuick 2.5
import QtQuick.Window 2.2
//-------------------QmlBook---------------------------
//Rectangle {
// id:root
// color: "green"
// width: 400
// height: 400
// MouseArea{
// anchors.fill:parent
// onClicked: {
// root.rotation+=360
// }
// }
// onRotationChanged: {
// root.color="red"
// print(rotation)
// //console.debug(rotation)
// }
// Behavior on rotation {
// NumberAnimation{
// duration: 4000
// }
// }
//}
//---------------------text element------------------------
//Text {
// width: 40; height: 120
// text: 'A very long text'
// // '...' shall appear in the middle
// elide: Text.ElideMiddle
// // red sunken text styling
// style: Text.Sunken
// styleColor: '#FF4444'
// // align text to the top
// verticalAlignment: Text.AlignTop
// // only sensible when no elide mode
// wrapMode: Text.WordWrap
//}
//Rectangle{
// id:rec1
// width: 200
// height: 100
// TextInput{
// id:input1
// x:8
// y:8
// width:100
// height:30
// focus: true
// text:"text input 1"
// KeyNavigation.tab: input2
// }
// TextInput{
// id:input2
// x:8
// y:40
// width:100
// height:30
// focus: true
// text:"text input 2"
// KeyNavigation.tab: input1
// }
//}
//--------------------------------1 -model-view-delegate-----------------------------
//Column {
// spacing: 2
// Repeater {
// model:["Enterprise", "Colombia", "Challenger", "Discovery", "Endeavour", "Atlantis"]
// Rectangle {
// width: 200
// height: 40
// radius: 10
// color: "lightBlue"
// Text {
// anchors.centerIn: parent
// text: index + ": " + modelData
// }
// }
// }
//}
//--------------------------------2 -model-view-delegate-----------------------------
/*每个元素中的属性绑定连接到repeater实例化的子项上。这意味着变量name和surfaceColor可以被repeater
创建的每个Rectangle和Text项引用。这不仅可以方便的访问数据,也可以使源代码更加容易阅读。
surfaceColor是名字左边圆的颜色,而不是模糊的数据序列列i或者行j。*/
//Column {
// spacing: 2
// Repeater {
// model: ListModel {
// ListElement { name: "Mercury"; surfaceColor: "gray" }
// ListElement { name: "Venus"; surfaceColor: "yellow" }
// ListElement { name: "Earth"; surfaceColor: "blue" }
// ListElement { name: "Mars"; surfaceColor: "orange" }
// ListElement { name: "Jupiter"; surfaceColor: "orange" }
// ListElement { name: "Saturn"; surfaceColor: "yellow" }
// ListElement { name: "Uranus"; surfaceColor: "lightBlue" }
// ListElement { name: "Neptune"; surfaceColor: "lightBlue" }
// }
// Rectangle {
// width: 100
// height: 20
// radius: 3
// color: "lightBlue"
// Text {
// anchors.centerIn: parent
// text: name
// }
// Rectangle {
// anchors.left: parent.left
// anchors.verticalCenter: parent.verticalCenter
// anchors.leftMargin: 2
// width: 16
// height: 16
// radius: 8
// border.color: "black"
// border.width: 1
// color: surfaceColor
// }
// }
// }
//}
//--------------------------------3 -model-view-delegate-----------------------------
//Rectangle {
// width: 80
// height: 300
// color: "white"
// ListView {
// anchors.fill: parent
// anchors.margins: 20
// clip: true
// model: 100
// delegate: numberDelegate
// spacing: 5
// }
// Component {
// id: numberDelegate
// Rectangle {
// width: 40
// height: 40
// color: "lightGreen"
// Text {
// anchors.centerIn: parent
// font.pixelSize: 10
// text: index
// }
// }
// }
//}
//--------------------------------4 -model-view-delegate-----------------------------
//Rectangle {
// width: 240
// height: 300
// color: "white"
// ListView {
// anchors.fill: parent
// anchors.margins: 20
// clip: true
// model: 100
// delegate: numberDelegate
// spacing: 5
// highlight: highlightComponent
// focus: true
// }
// Component {
// id: highlightComponent
// Rectangle {
// width: ListView.view.width
// color: "lightGreen"
// }
// }
// Component {
// id: numberDelegate
// Item {
// width: 40
// height: 40
// Text {
// anchors.centerIn: parent
// font.pixelSize: 10
// text: index
// }
// }
// }
//}
//Rectangle {
// width: 480
// height: 300
// color: "white"
// ListModel {
// id: theModel
// ListElement { number: 0 }
// ListElement { number: 1 }
// ListElement { number: 2 }
// ListElement { number: 3 }
// ListElement { number: 4 }
// ListElement { number: 5 }
// ListElement { number: 6 }
// ListElement { number: 7 }
// ListElement { number: 8 }
// ListElement { number: 9 }
// }
// Rectangle {
// anchors.left: parent.left
// anchors.right: parent.right
// anchors.bottom: parent.bottom
// anchors.margins: 20
// height: 40
// color: "darkGreen"
// Text {
// anchors.centerIn: parent
// text: "Add item!"
// }
// MouseArea {
// anchors.fill: parent
// onClicked: {
// theModel.append({"number": ++parent.count});
// }
// }
// property int count: 9
// }
// GridView {
// anchors.fill: parent
// anchors.margins: 20
// anchors.bottomMargin: 80
// clip: true
// model: theModel
// cellWidth: 45
// cellHeight: 45
// delegate: numberDelegate
// }
// Component {
// id: numberDelegate
// Rectangle {
// id: wrapper
// width: 40
// height: 40
// color: "lightGreen"
// Text {
// anchors.centerIn: parent
// font.pixelSize: 10
// text: number
// }
// MouseArea {
// anchors.fill: parent
// onClicked: {
// if (!wrapper.GridView.delayRemove)
// theModel.remove(index);
// }
// }
// GridView.onRemove: SequentialAnimation {
// PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: true }
// NumberAnimation { target: wrapper; property: "scale"; to: 0; duration: 250; easing.type:Easing.InOutQuad }
// PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: false }
// }
// GridView.onAdd: SequentialAnimation {
// NumberAnimation { target: wrapper; property: "scale"; from: 0; to: 1; duration: 250;}
// }
// }
// }
//}
//--------------------------PathView-------------------------------------------
//---http://blog.csdn.net/foruok/article/details/38060495---
/*PathAttribute { name: "zOrder"; value: 0.2; }
name 属性指定待定义属性的名字, real 类型的 value 属性的值为待定义的属性的值。
PathAttribute 放在某个路径段的前面,指明这段路径起始时的属性值;
路径段后面的 PathAttribute 指明路径段终止时的属性值;
而在路径段上的属性值, Path 会根据起、止值自动插值计算。
我们可以通过使用 PathAttribute 来定义一些属性,用于控制分布在路径上的 item 的外观。
比如定义名为 "zOrder" 的属性,控制沿路径分布的 item 的 Z 序。*/
/*PathPercent 放在组成路径的元素后面,比如放在 PathLine 后面,
指明它前面的那部分路径(通常由一个或多个 Path 元素组成)所放置的 item 数量占整个路径上所有 item 数量的比率。
PathPercent 的 value 属性为 real 值,范围 0.0 至 1.0 。需要注意的是,在一个 Path 中使用 PathPercent ,
PathPercent 元素的 value 值是递增的,某一段路径如果在两个 PathPercent 之间,
那么这段路径上面放置的 item 数量占路径上总 item 数量的比率,是后面的 PathPercent 与 前面的 PathPercent 的 value 之差。*/
Rectangle{
id:root
width: 100
height: 400
PathView {
anchors.fill: parent
delegate: flipCardDelegate
model: 100
path: Path {
startX: root.width/2
startY: 0
PathAttribute { name: "itemZ"; value: 0 }
PathAttribute { name: "itemAngle"; value: -90.0; }
PathAttribute { name: "itemScale"; value: 0.5; }
PathLine { x: root.width/2; y: root.height*0.4; }
PathPercent { value: 0.48; }
// PathLine { x: root.width/2; y: root.height*0.5; }
// PathPercent { value: 0.8; }
PathAttribute { name: "itemAngle"; value: 0.0; }
PathAttribute { name: "itemScale"; value: 1.0; }
PathAttribute { name: "itemZ"; value: 100 }
PathLine { x: root.width/2; y: root.height*0.6; }
PathPercent { value: 0.52; }
PathLine { x: root.width/2; y: root.height; }
PathAttribute { name: "itemAngle"; value: 90.0; }
PathAttribute { name: "itemScale"; value: 0.5; }
PathAttribute { name: "itemZ"; value: 0 }
}
pathItemCount: 15
preferredHighlightBegin: 0.5
preferredHighlightEnd: 0.5
}
Component {
id: flipCardDelegate
Item {
id: wrapper
width: 64
height: 64
visible: PathView.onPath
scale: PathView.itemScale
z: PathView.itemZ
property variant rotX: PathView.itemAngle
transform: Rotation { axis { x: 1; y: 0; z: 0 } angle: wrapper.rotX; origin { x: 32; y: 3}}
Rectangle {
anchors.fill: parent
color: "lightGray"
border.color: "black"
border.width: 3
}
Text {
anchors.centerIn: parent
text: index
font.pixelSize: 30
}
}
}
}
Qml中的model-view-delegate实例
最新推荐文章于 2024-07-04 16:12:31 发布