《QmlBook》笔记（10）：动态视图示例

相比于 Repeater 这样的放置有限的静态数据的元素，Qt提供了 ListView 和 GridView 元素，它们都继承自 Flickable，可以放置更多数据。同时，它们限制了同时实例化的代理数量。 对于一个大型的模型，这意味着在同一个场景下只会加载有限的元素。

ListView例1

import QtQuick 2.9
import QtQuick.Window 2.2

Window
{
    visible: true
    width: 840
    height: 600
    Rectangle
    {
        width: 160
        height: 420
        color: "white"
        ListView//列表视图
        {
            anchors.fill: parent
            anchors.margins: 20
            clip: true
            model: 20 //显示20个自定义组件数据
            delegate: numberDelegate//委托：负责显示数据
            spacing: 5
            orientation: ListView.Vertical
            boundsBehavior:Flickable.DragAndOvershootBounds
            /*
            ListView是个可滚动区域
            默认情况下，这种滚动具有在向下到达底部时会有一个反弹的特效。
            这一行为由boundsBehavior属性控制。
            boundsBehavior属性有三个可选值：
            Flickable.StopAtBounds完全消除反弹效果；
            Flickable.DragOverBounds在自由滑动时没有反弹效果，但是允许用户拖动越界；
            Flickable.DragAndOvershootBounds则是默认值，意味着不仅用户可以拖动越界，还可以通过自由滑动越界
            */
            snapMode:ListView.NoSnap
            /*
            当列表滑动结束时，列表可能停在任意位置：一个代理可能只显示一部分，另外部分被裁减掉。
            这一行为是由snapMode属性控制的。
            snapMode属性的默认值是ListView.NoSnap，也就是可以停在任意位置；
            ListView.SnapToItem会在某一代理的顶部停止滑动；
            ListView.SnapOneItem则规定每次滑动时不得超过一个代理，也就是每次只滑动一个代理，这种行为在分页滚动时尤其有效
            */
            layoutDirection:Qt.LeftToRight
        }
        Component //定义一个组件 显示的数据：一个自定义组件
        {
            id: numberDelegate
            Rectangle
            {
                width: 40
                height: 40
                color: "lightGreen"
                Text
                {
                    anchors.centerIn: parent
                    font.pixelSize: 10
                    text: index
                }
            }
        }
    }
}

ListView例2

import QtQuick 2.9
import QtQuick.Window 2.2

Window
{
    visible: true
    width: 840
    height: 600
    Rectangle
    {
        width: 580
        height: 80
        x:150
        color: "#eeeeee"

        ListView
        {
            anchors.fill: parent
            anchors.margins: 20
            clip: true
            model: 10
            delegate: numberDelegate2
            spacing: 5
            orientation: ListView.Horizontal
            highlight: highlightComponent//设置使用的高亮代理
            focus: true//允许ListView接收键盘焦点 可以方向键滚动视图切换项
            highlightRangeMode:ListView.NoHighlightRange//高亮显示模式
            /*默认值ListView.NoHighlightRange意味着高亮区域和项目的可视范围没有关联；
              ListView.StrictlyEnforceRange则使高亮始终可见，如果用户试图将高亮区域从视图的可视
              区域移开，当前项目也会随之改变，以便保证高亮区域始终可见；
              介于二者之间的是ListView.ApplyRange，它会保持高亮区域可视，但是并不强制，也就是说，
              如果必要的话，高亮区域也会被移出视图的可视区。*/
            highlightMoveDuration:-1//高亮移动持续时间 -1，意味着持续时间由速度和距离控制
            highlightResizeDuration:500//高亮大小改变时间
            header: headerComponent
            footer: footerComponent
            /*
            header 和 footer 可以认为是两个特殊的代理。
            这两个部分实际会添加在第一个元素之前和最后一个元素之后
            需要注意的是，header 和 footer 与ListView之间没有预留间距。这意味着，
            header 和 footer 将紧贴着列表的第一个和最后一个元素。如果需要在二者之间留
            有一定的间距，则这个间距应该成为 header 和 footer 的一部分。
            */
        }

        Component
        {
            id: highlightComponent
            Rectangle
            {
                width: ListView.view.width
                color: "lightGreen"
            }
        }

        Component
        {
            id: numberDelegate2
            Item
            {
                width: 40
                height: 40
                Text
                {
                    anchors.centerIn: parent
                    font.pixelSize: 10
                    text: index
                }
            }
        }

        Component
        {
            id: headerComponent
            Rectangle
            {
                width: 40
                height: 20
                color: "yellow"
            }
        }

        Component
        {
            id: footerComponent
            Rectangle
            {
                width: 40
                height: 20
                color: "red"
            }
        }
    }
}

GridView例子

import QtQuick 2.9
import QtQuick.Window 2.2

Window
{
    visible: true
    width: 840
    height: 600
    Rectangle
    {
        width: 600
        height: 300
        color: "white"
        x:200
        y:200

        GridView //网格视图
        {
            anchors.fill: parent
            anchors.margins: 20
            clip: true
            model: 100
            cellWidth: 60
            cellHeight: 40
            delegate: numberDelegate3
            flow:GridView.LeftToRight
            /*
            flow设置显示方向
            GridView.LeftToRight 按照先从左向右、再从上到下的顺序填充，滚动条出现在竖直方向；
            GridView.TopToBottom 按照先从上到下、在从左到右的顺序填充，滚动条出现在水平方向
            */
        }
        //            40 60
        //      **********
        //      *      * *
        //      *      * *
        //      *      * *
        //      ******** *
        //      **********
        //网格视图不依赖于元素间隔和大小来配置元素。它使用单元宽度（cellWidth）与单元高度（cellHeight）属性来控制数
        //组内的二维元素的内容。 每个元素从左上角开始依次放入单元格
        //假如代理的width比cellWidth小那元素会重合
        Component
        {
            id: numberDelegate3
            Rectangle
            {
                width: 40
                height: 40
                color: "lightGreen"
                Text
                {
                    anchors.centerIn: parent
                    font.pixelSize: 10
                    text: index
                }
            }
        }
    }
}