QML笔记整理——QtQuick数据模型和视图

1、QML使用了与Qt中Model-View类似的结构

1）模型类提供了数据。

    A）模型可以使用QML的简单数据，或者复杂的C++数据

    B）QML：ListModel，XmlListModel，VisualItemModel

    C）C++：QAbstractItemModel，QStringList，QList<QObject*>

2）视图显示模型提供的数据，包括ListView，GridView，PathView，Repeater（all QML），且都自动支持滚动

3）代理为视图创建模型中数据的实例

4）HightLight控件用来高亮视图里面选中的item

For Reference：Model-View in Qt

    Model为其他部件提供数据的接口（QAbstractItemModel）

    View获取model的indices（indices是对数据的引用）

    Delegate用来定制View中的数据显示方式（当用户编辑时，Delegate直接与Model交互）

在这种结构中，Model就是我们的数据，Delegate是一个描述model中每条数据的显示方式的控件，View是可视的元素，使用Delegate来显示Model中的数据。

示例一：

// Define the data in MyModel.qml - data is static in this simple case

import QtQuick 2.0

ListModel {

    id: contactModel

    ListElement {

        name: "Bill Smith"

        number: "555 3264"

    }

    ListElement {

        name: "John Brown"

        number: "555 8426"

    }

    ListElement {

        name: "Sam Wise"

        number: "555 0473"

    }

}

示例二：

// Create a view to use the model e.g. in MyList.qml

import QtQuick 2.0

Rectangle {

    width: 180; height: 200

    color: "green"

    // Define a delegate component. A delegate will be

    // instantiated for each visible item in the list.

    Component {

        id: delegate

        Item {

            id: wrapper

            width: 180; height: 40

            Column {

                x: 5; y: 5

                Text {text: '<b>Name:</b>' + name}

                Text {text: '<b>Number:</b>' + number}

            }

        }

    }

    // Define a hightlight component. Just one of these will be

    // instantiated by each ListView and placed behind the current item.

    Component {

        id: highlight

        Rectangle {

            color: "lightsteelblue"

            radius: 5

        }

    }

    // The actual list

    ListView {

        width: parent.width; height: parent.height

        model: MyModel{}// Refers to MyModel.qml

        delegate: delegate// Refers to the delegate component

        highlight: hightlight // refers to the hightlight component

        focus: true

    }

}

2、网格视图（GridView）

它以网格的形式显示数据，与ListView的使用方式一致

如：

GridView {

    width: parent.width; height: parent.height

    model: MyModel

    delegate: delegate

    highlight: highlight

    cellWidth: 80; cellHeight: 80

    focus: true

}

3、路径视图（PathView）

通过一个独立的Path Object格式化数据的显示方式。一些独立的元素可以用于初始化Path，如PathLine，PathQuad，PathCubic。在Path上的items的分布是由PathPercent元素定义的。Items的显示方式是通过PathAttribute元素来控制的

示例一：

PathView { // With equl distribution of dots

    anchors.fill: parent

    model: MyModel

    delegate: delegate

    path: Path {

        startX: 20; startY: 0

        PathQuad {x: 50; y: 80; controlX: 0; controlY:80}

        PathLine {x: 150; y: 80}

        PathQuad {x: 180; y: 0; controlX: 200; controlY: 80}

    }

}

效果如下：

示例二：

PathView { // With 50% of the dots in the buttom part

    anchors.fill: parent

    model: MyModel

    delegate: delegate

    path: Path {

        startX: 20; startY: 0

        PathQuad {x: 50; y: 80; controlX: 0; controlY:80}

        PathPercent { value: 0.25 }

        PathLine {x: 150; y: 80}

        PathPercent {value: 0.75}

        PathQuad {x: 180; y: 0; controlX: 200; controlY: 80}

        PathPercent {value: 1}

    }

}

效果如下：

示例三：

    Component {

        id: delegate

        Item {

            id: wrapper

            width: 80; height: 80

            scale: PathView.scale

            opacity: PathView.opacity

            Column {

                Image {}

                Text {}

            }

        }

    }

    PathView { // With 50% of the dots in the buttom part

        anchors.fill: parent

        model: MyModel

        delegate: delegate

        path: Path {

            startX: 120; startY: 100

            PathAttribute {name: "scale"; value: 1.0}

            PathAttribute {name: "opacity"; value: 1.0}

            PathQuad {x:120; y: 25; controlX: 260; controlY: 75}

            PathAttribute {name: "scale"; value: 0.3}

            PathAttribute {name: "opacity"; value: 0.5}

            PathQuad {x: 120; y: 100; controlX: -20; controlY: 75}

        }

    }

效果如下：

4、Repeater

其用于创建大量其他items实例的元素。

model的使用和前面的view元素很像，model的数据类型可以是object list，a string list， a number， or a Qt/C++ model。当前的model index可以通过index属性访问。

如：

    Column {

        Repeater {

            model: 10 // The model is just a number here

            Text {

                text: "I'm item " + index

            }

        }

    }

效果如下：

Repeater所创建的items是按照顺序插入到这个Repeater的parent中的，可以在layout中使用Repeater。

如：

    Row {

        Rectangle {

            width: 10; height: 20; color: "red"

        }

        Repeater {

            model: 10

            Rectangle {

                width: 20; height: 20; radius: 10; color: "green"

            }

        }

        Rectangle {

            width: 10; height: 20; color: "blue"

        }

    }

效果如下：

5、Flickable

该属性可以让其子元素被拖拽和滚动，所以没有必要创建一个MouseArea或者处理鼠标事件的函数。Flickable界面很容易通过属性配置：flickDirection，flickDeceleration，horizontalVelocity，verticalVelocity，boundsBehavior，...

很多QML元素默认是flickable的，比如说ListView的元素

示例如下：

    Flickable {

        width: 200; height: 200

        contentWidth: image.width; contentHeight: image.height

        Image {

            id: image

            source: "images/ball.png"

        }

    }