Qt World Summit: Register Today!

Using QStringListModel as model in ListView

  • Hello everybody. I'm currently playing around with Qt Quick. I'm trying to write an remote control application for qBittorrent. Through its web API it is possible to fetch all kinds of information. The software allows you to sort torrents into different categories. I wanted to list these catagories using a ListView.

    I've written the non-ui code in C++. In C++ the data is fetched and parsed, and made available to QML. I've put the source code on github.

    This function returns all the categories
    This line of qml code is giving me issues

    I can access this property from QML without any issues. If I set the delegate of the ListView to:

    delegate: Text {
        text: display
        width: parent.width

    The code works as expected, I get the following result
    Listview using Text delegate

    However if i change the Delegate from Text to ItemDelegate, the text is set to '2'

    delegate: ItemDelegate {
       text: display
       width: parent.width

    Using this code, I get the following result
    Listview using ItemDelegate delegate

    I'm absolutely clueless of why this is happening. Any help is greatly appreciated.

  • http://doc.qt.io/qt-5/qtquick-modelviewsdata-modelview.html#qml-data-models

    I assume display is the property name you want? This rough as guts ListModel driven copy and slight modification works for me - perhaps your model?

    QStringListModel *categories(); // <= can you make this a public slot and call it directly?

    I use QStringList results from c++ to drive QML models everywhere, but I don't invoke function pointers like that. I'll use a public slot or a Q_INVOKABLE (but I never do I just use a public slot)

    public slots:
        QStringList getSomethingPlurals();


    var cppCopyModel    = NamedInstanceQMLContextCpp.getSomethingPlurals();
    // OR
     property ListModel seriesModel : NamedInstanceQMLContextCpp.getSomethingPlurals();

    You code (kinda) with a QML ListModel seemingly working fine...

    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
        id: root // window
        color: "black"
        ListModel {id : modelInstance
            ListElement {propertyNameUnused: "first"; name:"aaa";}
            ListElement {propertyNameUnused: "second"; name:"bbb";}
            ListElement {propertyNameUnused: "third"; name:"ccc";}
        Item {
            anchors.fill: parent
            ListView {
                       id: listView
                       anchors.fill: parent
                       headerPositioning: ListView.OverlayHeader
                       header: Pane {
                           id: header
                           z: 2
                           width: parent.width
                           contentHeight: lbl_status.height
                           Text {
                               id: lbl_status
                               text: "Status"
                           MenuSeparator {
                               parent: header
                               width: parent.width
                               anchors.verticalCenter: parent.bottom
                       footer: ItemDelegate {
                           id: footer
                           text: qsTr("Footer")
                           width: parent.width
                           MenuSeparator {
                               parent: footer
                               width: parent.width
                               anchors.verticalCenter: parent.top
                       model: modelInstance // Torrents.categories
                       delegate:  ItemDelegate { // Text {
                         //  color: "white" // works with Text type
                           text: name
                           width: parent.width
                       ScrollIndicator.vertical: ScrollIndicator { }


  • Qt Champions 2018

    ItemDelegate has a display property : https://doc.qt.io/qt-5/qml-qtquick-controls2-abstractbutton.html#display-prop .
    To dipslay the display role, you have to explicitely specifiy it like so:
    text: model.display, this is usually preferable since it prevents shadowing and make it clearer where the value comes from.

  • @GrecKo If I use text: model.display, the text is displayed correctly. Thanks for your help!

Log in to reply