Qml ListView空行占位符就像在TableView中一样

时间:2016-03-29 10:30:19

标签: qt listview qml qtquick2 qtquickcontrols

我希望ListView显示空行,直到其高度结束。与TableView相似,但与ListView相同。

这可能吗?

enter image description here

2 个答案:

答案 0 :(得分:1)

在Qt的帮助下,得到了一个很好的解决方案(此代码位于ScrollView内部的ListView中):

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;
        }
    }
}

答案 1 :(得分:0)

一种非常简单的方法。

首先,定义项目高度:

property int itemHeight: 40

然后,在ListView

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

其中mainFormlistview1的父级。

要正确显示空行,您可以检查是否存在item属性,即:

color: colorCode ? colorCode : "white"

text: name ? name : ""