5、1 Model-View基础-----Repeater

最新推荐文章于 2024-09-30 20:03:39 发布

weixin_41392061

最新推荐文章于 2024-09-30 20:03:39 发布

阅读量65

点赞数

文章标签： qt 3d

本文链接：https://blog.csdn.net/weixin_41392061/article/details/131906394

版权

该文章展示了如何在QtQuick中利用Repeater组件和ListModel数据模型来动态生成多个相似的视图项。Repeater的model属性绑定到一个列表，delegate定义了每一项的显示样式。在示例中，展示了如何创建一个显示不同行星名称和颜色的列表，当添加或移除项目时，可以通过itemAdded和itemRemoved信号进行处理。

摘要由CSDN通过智能技术生成

Repeater类型用于创建大量类似项，与其他视图类型一样，Repeater有一个model和一个delegate

属性：count：int delegate:Component 提供了实例化每个项的模板

model:var

信号：itemAdded(int index,Item item)

处理程序：onItemAdded

itemRemoved(int index,Item item)

处理程序：onItemRemoved

首次创建Repeater时，会创建其所有delegate项，如果存在大量delegate项，并且并非所有项都必须同时可见，则这可能会降低效率。

使用数字作为model

显示效果

import QtQuick
import QtQuick.Window
import "../common"

Column{
    height:160
    spacing:2
//    Repeater{
        model:10
//        model:["Enterprise","Columbia","Challenger",
//        "Discovery","Endeavour","Atlantis"]
//        delegate: BlueBox{
//        //    required property int index
//            width:160;height:30
//            text:modelData + "(" + index + ")";
//        }
//        onItemAdded: console.log("item" + index +"added")
//    }

    Repeater{
        model:ListModel{
            ListElement{name:"Mercury";surfaceColor:"gray"}
            ListElement{name:"Venus";surfaceColor:"yellow"}
            ListElement{name:"Earth";surfaceColor:"blue"}
            ListElement{name:"Mars";surfaceColor:"orange"}
            ListElement{name:"Jupiter";surfaceColor:"orange"}
            ListElement{name:"Saturn";surfaceColor:"yellow"}
            ListElement{name:"Uranus";surfaceColor:"lightBlue"}
            ListElement{name:"Neptune";surfaceColor:"lightBlue"}
        }
        delegate: BlueBox{
            required property string name
            required property color surfaceColor
            width:160;height:30
            text:name
            radius:3

            Rectangle{
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: 4
                width: 16;height:16;radius:8
                color:parent.surfaceColor
            }
        }
    }
}

显示效果