Repeater 元素适合有限的静态数据， QtQuick 提供了 ListView 和 GridView, 这两个都是基于 Flickable(可滑动) 区域的元素 ， ListView 与 Repeater 相比， ListView 使用了一个 model， 使用delegate 来 实例化，并且在两个 delegate之间能够设置间隔 sapcing

 代码：

Component ：Component 用于定义一个可以被延迟实例化的QML 对象。可以被用来创建对象模板，这些模板可以在 运行时 根据需要被实例化多次。 通常用于动态创建或销毁对象。比如： 在列表视图中动态加载项目，或者根据用户操作创建新的窗口或对话框:

• Component 必须有一个子类对象（有且只能有一个），而且在子类对象外不能有任何数据，除了Id。
• Component  是在QQmlComponent继承而来的，他是由自己的顶层子类（Item、Rectangle）为其他的 动态视图 View提供可视化组件，但它本身是不可见元素。

注意： 

由于 QtQuick 默认行为会导致一些问题；列表视图 不会限制  被显示的代理项（delegates) 只在 限制区域内 显示。ListView 通过设置 clip 属性为 true ，来激活裁剪功能。

如果不不设置 滚动时 会显示在区域外

 

 使用orientation 来控制 方向

 

 

键盘高亮导航效果

 

完整代码：

import QtQuick 2.15
//模型-视图-代理 --->动态视图（Dynamic Views）
Rectangle {

    // width: 80
    // width: 480
    width: 240
    height: 300


    color: "white"

    //ListView元素只会显⽰部分的链表内容。然后由于QtQuick的默认⾏为导致的问题，列表视图不会限制被显⽰的代理项（delegates）只在限制区域内显⽰
    //着代理项可以在列表视图外显⽰，⽤户可以看⻅在列表视图外动态的创建和销毁这些代理项动态视图（Dynamic Views）（delegates)
    ListView{
        anchors.fill: parent
        anchors.margins: 20

        //，ListView通过设置clip属性为true，来激活裁剪功能
        clip: true

        //链表视图的⽅向由属性orientation控制
        // orientation: ListView.Horizontal

        // layoutDirection: Qt.RightToLeft



        model: 100
        spacing: 5
        delegate: numberDelegate

        highlight: highlightComponent
        //是focus属性设置为true，它设置链表视图能够获得键盘焦点
        focus: true
    }

    Component{
        id: numberDelegate
        // Rectangle{
        //     width: 40
        //     height: 40
        //     color: "lightGreen"

        //     Text {
        //         id: txt
        //         anchors.centerIn: parent
        //         font.pixelSize: 10

        //         text: index
        //     }

        // }

        Item{
            width: 40
            height: 40
            // color: "lightGreen"

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

                text: index
            }

        }

    }


    // Component{
    //     id: highlightComponent

    //     Rectangle{
    //         width: ListView.view.width
    //         color: "red"
    //     }
    // }


    Component{
        id: highlightComponent

        Item{
            width: ListView.view.width
            height: ListView.view.currentItem.height
            y: ListView.view.currentItem.y

            Behavior on y{
                SequentialAnimation{
                    PropertyAnimation { target: highlightRectangle; property: "opacity"; to: 0; duration: 200 }
                    NumberAnimation { duration: 1 }
                    PropertyAnimation { target: highlightRectangle; property: "opacity"; to: 1; duration: 200 }
                }
            }

            Rectangle{
                id: highlightRectangle
                anchors.fill: parent
                color: "lightGreen"
            }

        }
    }
}