QML ListView组件解析

QML中的ListView和安卓ListView大致一样是一个列表视图，是最常用的组件之一。它允许用户通过滑动（手指下滑，鼠标下拉，鼠标滚轮）的方式将屏幕外的数据滚动到视图内，同时屏幕上原有的数据则会滚动出视图。QML ListView的一个特点是需要开发者定义model，即ListView展示的数据，或者叫ListItem。

Flickable

QML中ListView继承于Flickable可拖拽可轻弹组件。所以Flickable有的ListView都有，下面介绍一下Flickable

这里举一个使用Flickable的例子，该示例中Flickable包含一张很大的图片，视图不能一次展示完整整张图片，但是可以通过拖拽滑动的方式来拖动视图，左侧和底部各有一个滚动条。
示例源码:flickable

import QtQuick 2.0

Rectangle {
    width: 640
    height: 480

    // Create a flickable to view a large image.
    Flickable {
        id: view
        anchors.fill: parent
        contentWidth: picture.width
        contentHeight: picture.height

        Image {
            id: picture
            source: "pics/niagara_falls.jpg"
            asynchronous: true
        }

        // Only show the scrollbars when the view is moving.
        states: State {
            name: "ShowBars"
            when: view.movingVertically || view.movingHorizontally
            PropertyChanges {
                verticalScrollBar.opacity: 1
                horizontalScrollBar.opacity: 1
            }
        }

        transitions: Transition {
            NumberAnimation { properties: "opacity"; duration: 400 }
        }
    }

    // Attach scrollbars to the right and bottom edges of the view.
    ScrollBar {
        id: verticalScrollBar
        width: 12; height: view.height-12
        anchors.right: view.right
        opacity: 0
        orientation: Qt.Vertical
        position: view.visibleArea.yPosition
        pageSize: view.visibleArea.heightRatio
    }

    ScrollBar {
        id: horizontalScrollBar
        width: view.width-12; height: 12
        anchors.bottom: view.bottom
        opacity: 0
        orientation: Qt.Horizontal
        position: view.visibleArea.xPosition
        pageSize: view.visibleArea.widthRatio
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

这个示例的布局如下：

当向右下移动视图时：

上图中标注了一下flickable的一些属性，方便理解flickable的布局。
originX和originY是内容的原点，无论布局方向如何，他们的值始终指内容的左上角位置。通常情况下是（0，0）即坐标系原点这个位置。但是 ListView 和 GridView需要注意，他们的originX和originY不一定是（0，0），他们可能由于item大小变化或在可见区域外插入/移除item而具有任意原点。注意这连个属性是只读的。

content和contentY是指Flickable视图的相对原点，上面的示例中对应图片的原点。如果没有滑动，那么他们的值和originX，originY一样，视图滑动之后就会变化，比如向右滑动了100个点那么contentX的值为（originX + 100）。如果向下滑动100个点则contentY的值为（originY + 100）。可以通过改变content和contentY的值的方式来移动视图，如果把他们的值设置为（originX，originY），那么视图就会回到初始位置。

flickable的width和height是指其视图的宽高。

contentWidth和contentHeight表示显示内容的宽高，上面的示例中对应图片的宽高，示例中的值比flickable的宽高要大。

其它属性说明

cacheBuffer : int
是否保留视图可视区域之外的item实例。如果值比0大，视图将保存cacheBuffer指定尺寸的item实例。
详细可参考GridView的该属性

count : int
这个属性保存view中item的数目

currentIndex : int
属性currentIndex 保存当前项的索引，属性currentItem 保存当前项。设置当前索引为-1将清除高亮并将currentItem设置为null。
如果highlightFollowsCurrentItem为真，设置任一个属性都会平滑滚动ListView使得当前项变为可见。
注意：如果当前项不可见，那它的位置只会是大致的位置。

currentItem : Item
参见currentIndex

currentSection : string
这个属性持有视图开始部分的当前分段。

delegate : Component
delegate提供了一个模板来定义被view实例化的每项。索引被暴露作为可访问的属性index。model的属性的可用性也可依赖Data Model的类型。
delegate中的元素的数目会直接影响视图的flicking性能。如果可能，把不需要为delegate正常显示的功能放进Loader里，Loader能只有需要时加载额外元素。
ListView会基于delegate根项的大小来布局items。
建议delagate的大小是一个整数来避免项的亚像素校准。
注意：delegate可以在任何需要的时候被实例化和析构。State永远不要存储在delegate中。
reuseItems: bool

This property enables you to reuse items that are instantiated from the delegate. If set to false, any currently pooled items are destroyed.

是否复用delegate实例化的对象，复用items。这个属性默认是false，item被滑出界面时就会被销毁。如果使能该属性当item被滑出时不会被销毁，而是被复用，item会被回收到一个池中，当要创建新item时可以直接从回收池中取出一个item来使用。复用的好处是性能更高，避免频繁地销毁旧item创建新item。复用的前提是listview的各个item结构一致，不然可能会导致一些问题。同时如果item监听Completed信号也要注意，因为复用item之后有些item可能不会发送该信号。

keyNavigationEnabled：bool
是否使能按键导航，是否响应上下方向键。如果使能那么按上下方向键时listview会自动滑动。
add : Transition
用于指定item添加到view中的过渡动画。

addDisplaced : Transition
用于指定view中item由于新增item而引起位置改变时应用的过渡动画。

section
是否使能分组