MVD（二-动态视图）

ListView

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    
    Item {
        id: root
        Rectangle{
            width: 80
            height: 300
            
            color: "blue"
            
            ListView{
                anchors.fill: parent
                anchors.margins: 20
                
                model:100
                
                // 滑动
                clip: true
                spacing: 5
                delegate: numberDelegate
            }
            
            Component{
                id:numberDelegate
                
                Rectangle{
                    width: 40
                    height: 40
                    
                    color: "lightGreen"
                    
                    Text {
                        anchors.centerIn: parent
                        font.pixelSize: 10
                        
                        text: index
                    }
                }
            }
        }
    }
}

list列表是可以滑动的，因为我们设置了 click 为 true！

其中 ListView使用了 Component 创建的代理，用来显示 ListView 的数据！

ListView是个数据的组织方式，真正的数据放在 model，ListView只是定义了对数据的排列！

ListView有很多属性可以设置它的属性，例如排列方式、滚动行为控制等，下面让view从左到右水平排布：

                // 设置项的排列方向
                orientation: ListView.Horizontal

高亮

视图支持设置一个当前视图中显示代理元素中的高亮代理。

它是一个附加的代理元 素，这个元素仅仅只实例化一次，并移动到与当前元素相同的位置

 

在下面的例子中：

首先是 focus 属性设置为 true ， 它设置链表视图能够获得键盘焦点。

然后是 highlight 属性，指出使用的高亮代理元 素。高亮代理元素的 x,y 与 height 属性由当前元素指定

ListView.view.width属性被绑定用于高亮元素的宽度

                // 设置高亮代理
                highlight: highlightComponent
                focus:true

            // 高亮代理
            Component{
                id:highlightComponent
                Rectangle{
                    width: ListView.view.width
                    color: "red"
                }
            }

但是我的没出来效果，暂时不知道原因~

页眉和页脚

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Item {
        id: root
        Rectangle{
            width: 80
            height: 300

            color: "blue"

            ListView{
                anchors.fill: parent
                anchors.margins: 20

                model:4

                // 滑动
                clip: true
                spacing: 5
                // 设置项的排列方向
                // orientation: ListView.Horizontal

                // 设置item显示代理
                delegate: numberDelegate

                // 设置高亮代理
                highlight: highlightComponent
                focus:true

                // 设置页眉和页脚代理
                header: headerComponent
                footer: footerComponent
            }

            // 高亮代理
            Component{
                id:highlightComponent
                Rectangle{
                    width: ListView.view.width
                    color: "red"
                }
            }

            // 页眉代理
            Component {
                id: headerComponent
                Rectangle {
                    width: 40
                    height: 20
                    color: "yellow"
                }
            }

            // 页脚代理
            Component {
                id: footerComponent
                Rectangle {
                    width: 40
                    height: 20
                    color: "red"
                }
            }

            // item显示代理
            Component{
                id:numberDelegate

                Rectangle{
                    width: 40
                    height: 40

                    color: "lightGreen"

                    Text {
                        anchors.centerIn: parent
                        font.pixelSize: 10

                        text: index
                    }
                }
            }
        }
    }
}

效果>>

GridView

GridView和ListView非常相似，区别是：GridView是使用了二维，并且GridView不用space设置元素间的间隔，而是用cellxxx！

代码：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Item {
        id: root
        Rectangle{
            width: 640
            height:480

            color: "blue"

            GridView{
                anchors.fill: parent
                anchors.margins: 20

                model:80

                // 滑动
                clip: true

                // 不同于 ListView 的地方
                cellWidth:45
                cellHeight: 45

                // 设置item显示代理
                delegate: numberDelegate
            }

            // item显示代理
            Component{
                id:numberDelegate

                Rectangle{
                    width: 40
                    height: 40

                    color: "lightGreen"

                    Text {
                        anchors.centerIn: parent
                        font.pixelSize: 10

                        text: index
                    }
                }
            }
        }
    }
}