Qt QML List Model

The ListModel is a simple container of ListElement definitions, each containing data roles. The contents can be defined dynamically, or explicitly in QML.

The number of elements in the model can be obtained from its count property. A number of familiar methods are also provided to manipulate the contents of the model, including append(), insert(), move(), remove() and set(). These methods accept dictionaries as their arguments; these are translated to ListElement objects by the model.

Elements can be manipulated via the model using the setProperty() method, which allows the roles of the specified element to be set and changed.

Today in this tutorial we are learn Qt QML model using QML ListModel and view we used in this tutorial is ListView.

First step is to create QtQuick Application Project and Create .qml files MyListModel.qml and MyListDelegate.qml files.

Add the content to the MyListModel.qml

import QtQuick 2.15
import QtQuick.Controls 2.5
ListModel{
    ListElement{
        about:"AbstractButton"
        description:"Abstract base type providing functionality common to buttons "
    }
    ListElement{
        about:"Button"
        description:"Push-button that can be clicked to perform a command or to answer a question "
    }
    ListElement{
        about:"CheckBox"
        description:"Check button that can be toggled on or off "
    }
    ListElement{
        about:"DelayButton"
        description:"Check button that triggers when held down long enough "
    }
    ListElement{
        about:"RadioButton"
        description:" Exclusive radio button that can be toggled on or off "
    }
    ListElement{
        about:"RoundButton"
        description:" A push-button control with rounded corners that can be clicked by the user"
    }
    ListElement{
        about:"Switch"
        description:"Button that can be toggled on or off "
    }
    ListElement{
        about:"ToolButton"
        description:"Button with a look suitable for a ToolBar "
    }
}

and add below content to the MyListDelegate.qml file :

import QtQuick 2.15
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.3
ItemDelegate{
    width: root.width
    contentItem: ColumnLayout{
        RowLayout{
            Layout.preferredWidth: parent.width
            ColumnLayout{
                Layout.fillWidth: true
                spacing: 5
                Label{
                    text: about
                    font.pixelSize: 24
                    Layout.leftMargin: 5

                }
                Label{
                    text: description
                    font.pixelSize: 14
                    Layout.leftMargin: 5
                }
            }
            Button{
                text: qsTr("Learn More")
                highlighted: true
                Layout.alignment: Qt.AlignRight
                onClicked: {

                }
            }
        }
    }

}

So we are creating two files one is MyListDelegate.qml and MyListModel.qml ,Let’s use this model file and delegate file inside the listview in main file ,you can use anywhere you want to use in listview.

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.3
import QtQuick.Layouts 1.3
ApplicationWindow {
    id:root
    width: 640
    height: 480
    visible: true
    title: qsTr("Qt QML List Model")

    Dialog{
        id:addDialog
        width: 400
        height: root.height*0.8
        x:(root.width - addDialog.width)/2
        y:(root.height - addDialog.height)/2
        title: qsTr("Add Control Item")
        function checkCheked(index){
            if(index===1){
                mainButton.text = qsTr("Add")
                removeBox.checked = false;
                editBox.checked = false;
                deleteBox.checked = false;
            }else if(index===2){
                mainButton.text = qsTr("Remove")
                addCheckBox.checked = false;
                editBox.checked = false;
                deleteBox.checked = false;
            }else if(index===3){
                mainButton.text = qsTr("Edit")
                addCheckBox.checked = false;
                removeBox.checked = false;
                deleteBox.checked = false;
            }else if(index===4){
                mainButton.text = qsTr("Delete")
                addCheckBox.checked = false;
                removeBox.checked = false;
                editBox.checked = false;
            }
        }

        Item{
            anchors.fill: parent
            ColumnLayout{
                anchors.fill: parent
                anchors.centerIn: parent
                RowLayout{
                    Label{
                        text: qsTr("Add")
                    }
                    CheckBox{
                         id:addCheckBox
                         Layout.alignment: Qt.AlignRight
                         checkable: true
                         checked: true
                         onCheckedChanged: {
                             if(checked)
                                 index.visible= false;
                         }
                    }
                    Label{
                        text: qsTr("Remove")
                    }
                    CheckBox{
                         id:removeBox
                         Layout.alignment: Qt.AlignRight
                         checkable: true
                         onCheckedChanged: {
                             if(checked)
                                 index.visible= true
                         }
                    }
                    Label{
                        text: qsTr("Edit")
                    }
                    CheckBox{
                        id:editBox
                         Layout.alignment: Qt.AlignRight
                         checkable: true
                         onCheckedChanged: {
                             if(checked)
                                 index.visible= true
                         }
                    }
                    Label{
                        text: qsTr("Delete")
                    }
                    CheckBox{
                         id:deleteBox
                         Layout.alignment: Qt.AlignRight
                         checkable: true
                         onCheckedChanged: {
                             if(checked)
                                 index.visible = true
                         }
                    }
                }
                TextField{
                    id:index
                    width: parent.width
                    visible: false
                    placeholderText: qsTr("Enter index of control")
                }

                TextField{
                    id:about
                    width: parent.width
                    placeholderText: qsTr("Enter About Control")
                }
                TextField{
                    id:description
                    width: parent.width
                    placeholderText: qsTr("Enter Description Control")
                }
                RowLayout{
                    Layout.alignment: Qt.AlignHCenter
                    Button{
                        id:mainButton
                        text: qsTr("Add")
                        highlighted: true
                        onClicked: {
                            if(description.text && about.text){
                                mylist.model.append({'about':about.text,'description':description.text})
                                about.text = "";
                                description.text = "";
                                addDialog.close()
                            }
                        }
                    }
                    //fruitModel.setProperty(index, "cost", cost * 2)
                }
            }
        }
    }

    ListView{
        id:mylist
        width:parent.width
        height:parent.height-addbutton.height
        model: MyListModel{}
        delegate: MyListDelegate{}
        anchors{
            left: parent.left
            right: parent.right
            bottomMargin: 10
        }
        clip: true
    }
    RoundButton{
        id:addbutton
        anchors{
            top: mylist.bottom
            horizontalCenter: parent.horizontalCenter
            bottomMargin: 10
        }
        radius: height/2
        text: qsTr("+")
        onClicked: {
            addDialog.open()
        }
    }
}

In main.qml file I used extra component for adding the element . So whenever user press the plus button dialog will open and user can add list element .

So Now you can build the project and see the output :