CODEWITHSUNDEEP
qtlistviewqmlqtquick2spacing
user826955
user826955

Reputation: 3206

Removing spacing in QML ListView

Given this QML:

ApplicationWindow {
   id: window
   width: 640
   height: 480
   visible: true
   color: "black"

   ListView {
      id: myView
      anchors.fill: parent

      model: [12, 12, 12, 12, 12, 12, 12, 12]
      delegate: ItemDelegate {
         width: parent.width

         contentItem: Rectangle {
            color: "blue"
         }
      }

      spacing: 0
   }
}

The listview, or the individual rows will render with a spacing around them:

enter image description here

How can I remove this spacing? What I need is no border around the listview relative to the ApplicationWindow, and a 1px spacing between listview rows.

Upvotes: 0

Views: 583

Answers (2)

Bibin
Bibin

Reputation: 463

Seems like you forget to mention the height of the delegate item

ApplicationWindow  {
id: window
width: 640
height: 480
visible: true
color: "black"

ListView {
    id: myView
    anchors.fill: parent

    model: [12, 12, 12, 12, 12, 12, 12, 12]
    delegate: ItemDelegate {
        width: parent.width
        height: 20
        contentItem: Rectangle {
            anchors.fill: parent
            color: "blue"
        }
    }

    spacing: 1
}
}

Upvotes: 1

pooya13
pooya13

Reputation: 2711

I am not sure what is the point of your ItemDelegate, but from your description I think you need to do something like this:

ListView {
    id: myView
    
    anchors.fill: parent
    spacing: 1

    model: [12, 12, 12, 12, 12, 12, 12, 12]
    delegate: Rectangle {
            color: "blue"
            width: ListView.view.width
            height: modelData
    }
}

Upvotes: 1

Related Questions