Getting header title from model in QtQuick ListView

Question

It's not clear to me how to access the model from the header component in ListView. I have provided headerData in the (C++) model, but it doesn't seem to be called. I can grab the data from the model in theRowDelegate, so my roles are defined correctly (I have implemented the roleNames function).

I'm sure this must be explained in the documentation somewhere, but I can't find it.

ListView{
    anchors.fill: parent   
    model: logfile_model
    orientation: Qt.Vertical

    header: Row{
        Text{
            text: increment  // Doesn't work
            width: 100
        }
        Text{
            text: iteration  // Doesn't work
            width: 100
        }
    }

    delegate: Row{                
        Text {
            text: increment
            width: 100
        }    
        Text {
            text: iteration
            width: 100
        }
    }
}

What I'm observing is ListView does not use headerData, so you'll have to do it manually. — eyllanesc
OK. How do I do that? Would the header have to somehow use the data function in the model? I could just pretend the header is a row, but I don't know how to set it so it is always visible. — mohamedmoussa

JustWe JustWe · Accepted Answer · 2018-04-05T09:00:43

This is the demo you want, but not recommend because the header text shall not put into model data.

You can drag the list to see the header fixed always keep visible.

ListModel{
    id: testData
    ListElement{
        increment: "I am a Header"
        iteration: "I am also aHeader"
    }
    ListElement{
        increment: "testData"
        iteration: "testData"
    }
    ListElement{
        increment: "testData"
        iteration: "testData"
    }
    ListElement{
        increment: "testData"
        iteration: "testData"
    }
}

ListView{
    anchors.fill: parent
    model: testData

    Rectangle{ // always visible
        width: header.width
        height: header.height
        color: "white"
        Row{
            id: header
            Text{
                text: testData.get(0).increment
                width: 100
            }
            Text{
                text: testData.get(0).iteration
                width: 100
            }
        }
    }

    delegate: Row{
        Text {
            text: increment
            width: 100
        }
        Text {
            text: iteration
            width: 100
        }
        Component.onCompleted: if(index == 0) {
                                   visible = false
                               }
    }
}

Getting header title from model in QtQuick ListView

1 Answers