repeater的使用

最新推荐文章于 2022-01-20 18:46:45 发布

原创

最新推荐文章于 2022-01-20 18:46:45 发布 · 314 阅读

0 ·

CC 4.0 BY-SA版权

Repeater控件在delegate中要求最外层有一个单独的控件进行重复创建。如果直接使用img和text，Repeater将无法正常工作，因为它需要一个容器来包裹这些元素并进行重复实例化。

ListModel{
        id: myFlowListModel
    }
    Component{
        id: myDelegate
        Rectangle{
            width: 92
            height: 60
            color: "transparent"
            Image {
                id: qwname
                source: myImg
                width: 92
                height: 53
            }
            Text {
                id: helloText
                text: myString
                font.pixelSize: 12
            }
        }
    }
    ScrollView{
        anchors.top: parent.top
        anchors.topMargin: 30
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        clip: true
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
        Flow{
            id: myFlow
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.top: parent.top
            width: outSideRec.width - 40
            height: parent.height
            spacing: 10
            visible: true
            Repeater{
                model: myFlowListModel
                delegate: myDelegate
            }
        }

repeater的delegate中最外层只能有一个控件，然后repeater会重复创建这个控件，但是如果没有最外层的rectangle包裹，就同时需要重复创建img和text，repeater无法创建