Qml学习笔记-Repeater的基本使用

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq78442761/article/details/81218839

程序运行截图如下:

代码如下:

Window {
    visible: true
    width: 150
    height: 500
    title: qsTr("RepeaterDemo")

    Column{
        spacing:5
        Repeater{
            model:["Enterprise","Colombia","Challenger","Discovery","Endeavour","Atlantis"]
            Rectangle{
                width:150
                height:50
                radius:10
                color:"lightBlue"
                Text{
                    anchors.centerIn: parent
                    text:index+": "+modelData
                }
            }
        }
    }

}

 

还可以做如下的操作:

源码如下:

Window {
    visible: true
    width: 150
    height: 500
    title: qsTr("RepeaterDemo")
    Column{
        spacing:2
        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"}
            }
            Rectangle{
                width: 150
                height: 50
                radius: 8
                color:"lightBlue"
                Text{
                    anchors.centerIn: parent
                    text:name
                }

                Rectangle{
                    anchors.left: parent.left
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.leftMargin: 2

                    width:32
                    height:32
                    radius: 16
                    border.color: "black"
                    border.width: 1
                    color: surfaceColor
                }
            }
        }
    }
}

 

展开阅读全文

没有更多推荐了,返回首页