Qml中的model-view-delegate实例

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