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 :
