QML - Lesson 007. ListView. Dynamic creation and deletion of elements

ListView, ListModel, Qt, Android, ListItem, QML

I have already told in the article about the creation of dynamic widgets to Qt , how to create and delete buttons dynamically, as well as how to interact with them. And there used Vertical Layout, a case we can use QML ListView Qml, both similarly used when programming in Java for Android. That, incidentally, is also applicable when programming in Qt for Android.

The article about the dynamic creation of widgets used for example QButton class objects. This article will use the objects Button Qml, which customization was discussed in the following article . But the key will be placed in the ListView Qml.

Project structure for ListView Qml

This time dispense project created by default and even without the designer interface. Especially because at the time of this writing, not all parameters can be set in the designer. A following project structure:

• QmlDynamic.pro - the profile of the project;
• deployment.pri - deploy rules file on the target platform;
• main.cpp - the main application startup file;
• main.qml - qml file with the original program codes

main.qml

Since all of the other files do not represent any interest for us and created by default, then immediately move on to the the file main.qml.

The algorithm of the program is as follows. At the top of the application window has a Row object, which is a text box and two buttons. The remainder of the application window object takes ListView Qml . By pressing one of the buttons in the Row creates a dynamic object in the ListView Qml, which contains the button. By pressing the button, the dynamic in the text box on the Row passed ListElement index, which is the button on which the press was made. And then pressing the second button in the Row object on the index of the text box is removed an item from the ListView Qml, and the value in the text box is cleared.

Noteworthy is the fact that if you delete an item, which is located in the middle of the list, for example, indexes of all the elements following this reduced by one element. That is, the indices of the items are recalculated automatically.

import QtQuick 2.5
import QtQuick.Controls 1.4
 
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    /* Number created buttons for her visual identification of the demonstration project
     */
    property int number: 0
 
    /* The string field that displays dynamically pressed the button index button 
     * to create dynamic buttons, and a button to delete the index of dynamic buttons
     * */
    Row {
        id: row
        // Set line size and nailed to the top of the application window
        height: 50
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
 
        Rectangle {
            width: (parent.width / 5)
            height: 50
 
            // Set the text box to accommodate the key index
            Text {
                id: textIndex
                anchors.fill: parent
                text: ""
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }
        }
 
        // Button to create dynamic buttons
        Button {
            id: button1
            text: qsTr("Create Button")
            width: (parent.width / 5)*2
            height: 50
 
            /* By clicking on the button to add the model ListView object 
             * with the specified parameters
             * */
            onClicked: {
                listModel.append({idshnik: "Button " + (++number)})
 
            }
        }
 
        // Button to remove the dynamic buttons
        Button {
            id: button2
            text: qsTr("Delete Button")
            width: (parent.width / 5)*2
            height: 50
 
            // Remove the button on its index in the ListView
            onClicked: {
                if(textIndex.text != ""){
                    listModel.remove(textIndex.text)
                    textIndex.text = "" // Null text box with index
                }
            }
        }
    }
 
    // ListView to represent the data as a list
    ListView {
        id: listView1
        // We place it in the remainder of the application window
        anchors.top: row.bottom
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
 
        /* in this property we specify the layout of the object 
         * that will be displayed in the list as a list item
         * */
        delegate: Item {
            id: item
            anchors.left: parent.left
            anchors.right: parent.right
            height: 40
 
            Button {
                anchors.fill: parent
                anchors.margins: 5
 
                /* The most interesting in this facility We set text property variable name,
                 * which will set the properties of the element
                 * */
                text: idshnik
 
                // By clicking on the button in the text box we return the index in the ListView
                onClicked: {
                    textIndex.text = index
                }
            }
        }
 
        model: ListModel {
            id: listModel
        }
    }
}

Conclusion

As a result, you will receive an application in which dynamically created and deleted with buttons that will appear as shown in the figure.

Video