QML中的模型/视图

import QtQuick 2.0

Item {
    width: 200
    height: 200

    //ListView 在水平或垂直列表中排列条目
    ListModel {
        id: myModel
        ListElement {type: "dog"; age: 8}
        ListElement {type: "cat"; age: 5}
    }

    Component {
        id: myDelegate
        Text {text:  type + "," + age}
    }

    ListView {
        model: myModel
        delegate: myDelegate
    }

    //<rss>
    // <channel>
    //  <item>
    //   <title type="titleType">title</title>
    //   <link>link</link>
    //   <description>description</description>
    //  </item>
    // </channel>
    //</rss>

    //query 指定了这个XmlListModel应该从该xml文档的每一个<item>创建一个模型条目
    //XmlRole对象定义了模型条目的属性，还有指定值的类型，如字符串使用string(), 数值使用number()
    //如果要查询一个元素的属性，比如title的type属性，就在type前加@标志, query: "@type/string()"
    XmlListModel {
        id: feedModel
        source: "http://www.mysite.com/rss/feed.xml"
        query: "/rss/channel/item"
        XmlRole {name: "title"; query: "title/string()"}
        XmlRole {name: "link"; query: "link/string()"}
        XmlRole {name: "description"; query: "description()"}
    }

    ListView {
        model: feedModel
        delegate: Column {
            Text {text: title}
            Text {text: link}
            Text {text: description}
        }
    }

    // VisualItemModel允许使用QML项目作为模型
    VisualItemModel {
        id: itemModel
        Rectangle {width: 80; height: 100; color: "red"}
        Rectangle {width: 80; height: 100; color: "green"}
        Rectangle {width: 80; height: 100; color: "blue"}
    }



    //GridView在可用空间中将条目排列在一个网格中
    //PathView在路径上排列条目
    ListModel {
        id: pathModel
        ListElement {name: "Music"; icon: "music.png"}
        ListElement {name: "Movies"; icon: "movies.png"}
        ListElement {name: "Camera"; icon: "camera.png"}
        ListElement {name: "Calendar"; icon: "calendar.png"}
        ListElement {name: "Messaging"; icon: "messaging.png"}
        ListElement {name: "ToDoList"; icon: "to_do_list.png"}
        ListElement {name: "Contacts"; icon: "contacts.png"}
    }
    Component {
        id: pathDelegate
        Item {
            width: 100
            height: 100
            scale: PathView.iconScale
            Image {
                id: myIcon
                y: 20
                source: icon
                smooth: true
            }
            Text {
                anchors.top: myIcon.bottom
                text: name
                smooth: true
            }
            MouseArea {
                anchors.fill: parent
                onClicked: pathView.currentIndex = index
            }
        }
    }
    Component {
        id: pathHighlight
        Rectangle {width: 80; height: 80; color: "lightsteelblue"}
    }
    PathView {
        id: pathView
        highlight: pathHighlight
        preferredHighlightBegin: 0.5
        preferredHighlightEnd: 0.5
        focus: true
        model: pathModel
        delegate: pathDelegate
        // 一个Path由一个或多个路径段组成，可以路径包括PathLine, PathQuard, PathCubic
        path: Path {
            startX: 10
            startY: 50
            //PathAttribute对象允许在路径上的多个点指定由名称和值组成的属性
            //这些属性可以作为附加属性在委托中使用
            //本例中，指定了一个iconScale属性，分别在路径的两端和中间部分指定了其缩放值
            //中间图片大小正常，两边图片缩小一半，其缩放值在0.5和1.0间线性变化
            PathAttribute {name: "iconScale"; value: 0.5}
            // PathQuad 定义了包含一个控制点的二次贝塞尔曲线
            PathQuad {x: 200; y: 150; controlX: 50; controlY: 200}
            PathAttribute {name: "iconScale"; value: 1.0}
            PathQuad {x: 390; y: 50; controlX: 350; controlY: 200}
            PathAttribute {name: "iconScale"; value: 0.5}
            // PathLine定义了一条直线，可以以一条直线到达指定的位置
            PathLine {x: 200; y: 100}
            //PathCubic定义了一个具有两个控制点的三次贝塞尔曲线
            PathCubic {x: 180; y: 0; control1X: -10; control1Y: 90; control2X: 210; control2Y: 90}
            //PathPercent用来调节Path中路径之间的空隙
            PathPercent {value: 1}
        }
    }

    //WebView用来渲染网页

}