2

I want ListView to display empty rows till the end of its height. Like TableView but with ListView.

Is that possible?

enter image description here

2 Answers2

2

With help of Qt guys, got a nice solution (this code is inside of ListView which is inside of ScrollView):

Component {
    id: rectComp
    Rectangle {
        id: rowHeaderRect
        height: 50
        color:  rowIndex % 2 == 0 ? Theme.rowColor : Theme.altRowColor
    }
}
Column {
    id: rowfiller    
    Loader {
        id: rowSizeItem
        sourceComponent: rectComp
        visible: false
    }
    property int rowHeight: rowSizeItem.implicitHeight
    property int paddedRowCount: height/rowHeight

    y: listview.contentHeight - listview.contentY + listview.originY
    width: parent.width
    visible: true
    height: scrollview.viewport.height - listview.contentHeight
    Repeater {
        model: visible ? parent.paddedRowCount : 0
        Loader {
            property int rowIndex: index
            width: rowfiller.width
            height: rowfiller.rowHeight
            sourceComponent: rectComp;
        }
    }
}
0

A very simple approach.

First, define the item height:

property int itemHeight: 40

Then, on the ListView:

Component.onCompleted: {
            var numItems = mainForm.height / itemHeight
            for(var i=0; i < numItems; i++) {
                listView1.model.append({})
            }
        }

where mainForm is the parent of listview1.

For the empty rows to display correctly you could check for the existence of the item property, i.e:

color: colorCode ? colorCode : "white"

text: name ? name : ""
perencia
  • 1,498
  • 3
  • 11
  • 19
  • Well, this is not really a solution. Items may have variable height, also we would need to check every time we add new elements if we need to remove empty rows. –  Mar 30 '16 at 10:16
  • It's not a complete solution, but your answer wasn't very complete too :) – perencia Mar 30 '16 at 10:18