[QML] Wrap items inside a horizontal ListView ?

  • Hi, i have a horizontal ListView with the following code:

    Rectangle {
    anchors.fill: parent
    color: "red"
    radius: 100
          ListView {
          id: insideCircle
          model: app.exampleModel
          anchors.left: parent.left
          anchors.top: parent.top
          anchors.leftMargin: 20
          width: parent.width
          height: parent.height
          anchors.topMargin: 15
           clip: true
           spacing: 13
           orientation: ListView.Horizontal
           delegate:  Rectangle {
                   Rectangle {color: "green"; radius: 100; width: 10;height: 10}

    Which gives me something like this when there is a lot of elements in the model:

    I'd like the green dots not to keep going after reaching the parent width, but instead going on the line below ( like a HTML "<br>" does ).

    Any ideas ?

  • Moderators

    Hi @Kaxu
    Wouldn't GridView be best suitable here ?

    import QtQuick 2.4
    Item {
        width: 200
        height: 200
        GridView {
            id: grid
            model: 30
            anchors.fill: parent
            cellWidth: 10; cellHeight: 10
            delegate:  Rectangle {
                Rectangle {color: "green"; radius: 5; width: 10;height: 10}

  • Thanks for the quick answer, that's exactly what I was looking for !

  • Moderators

    @Kaxu Glad that it helped you :) Please mark post as solved. Edit the post title and prepend [Solved].

Log in to reply