QML - Урок 007. ListView Qml. Динамическое создание и удаление элементов

ListView, ListModel, Qt, Android, ListItem, QML

В статье про динамическое создание виджетов в Qt я уже рассказывал, как создавать и удалять кнопки динамически, а также как с ними взаимодействовать. И там использовался Vertical Layout , а случае с Qml мы сможем использовать ListView Qml, как аналогично используется при программирование в Java под Android. Что, к слову говоря, также применимо при программировании на Qt под Android.

В статье про динамическое создание виджетов использовались для примера объекты класса QButton. В данной статье будут использоваться объекты Button Qml, о кастомизации которых было рассказано в следующей статье . Но кнопки будут размещаться в ListView Qml.

Структура проекта для работы с ListView Qml

На это раз обойдёмся проектом, созданным по умолчанию и даже без дизайнера интерфейсов. Тем более, что на момент написания статьи не все параметры можно было задать в дизайнере. А структура проекта следующая:

• QmlDynamic.pro - профайл проекта;
• deployment.pri - файл правил деплоя на целевую платформу;
• main.cpp - основной файл запуска приложения;
• main.qml - qml файл с исходными кодами программы

main.qml

Поскольку все остальные файлы не представляют для нас никакого интереса и создаются по умолчанию, то сразу перейдём к разбору полётов с файлом main.qml.

Алгоритм работы программы следующий. В верхней части окна приложения имеется объект Row, в котором располагается текстовое поле и две кнопки. Остальную часть окна приложения занимает объект ListView Qml. По нажатию одной из кнопок в Row создаётся динамический объект в ListView Qml, который содержит кнопку. По нажатию динамической кнопки в текстовое поле в Row передаётся индекс ListElement, в котором находится кнопку, по которой производилось нажатие. И далее нажатием второй кнопки в объекте Row по индексу из текстового поля удаляется элемент из ListView Qml, а значение в текстовом поле стирается.

Примечателен тот факт, что при удалении элемента, который располагается в середине списка, например, индексы всех элементов, следующих за этим элементом уменьшаются на один. То есть индексы элементов пересчитываются автоматически.

import QtQuick 2.5
import QtQuick.Controls 1.4
 
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    /* Номер создаваемой кнопки, для её визуальной идентификации
     * при демонстрации проекта
     */
    property int number: 0
 
    /* Строка с полем, где отображается индекс нажатой динамической кнопки,
     * кнопкой для создания динамических кнопок,
     * и кнопкой для удаления динамических кнопок по индексу
     * */
    Row {
        id: row
        // Задаём размеры строки и прибиваем к верхней части окна приложения
        height: 50
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
 
        // Задаём размещение поля с индексом кнопки
        Rectangle {
            width: (parent.width / 5)
            height: 50
 
            // Устанавливаем текстовое поле для размещения индекса кнопки
            Text {
                id: textIndex
                anchors.fill: parent
                text: ""
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
            }
        }
 
        // Кнопка для создания динамических кнопок
        Button {
            id: button1
            text: qsTr("Create Button")
            width: (parent.width / 5)*2
            height: 50
 
            /* По клику по кнопке добавляем в model ListView
             * объект, с заданными параметрами
             * */
            onClicked: {
                listModel.append({idshnik: "Button " + (++number)})
 
            }
        }
 
        // Кнопка для удаления динамических кнопок
        Button {
            id: button2
            text: qsTr("Delete Button")
            width: (parent.width / 5)*2
            height: 50
 
            // Удаляем кнопку по её индексу в ListView
            onClicked: {
                if(textIndex.text != ""){
                    listModel.remove(textIndex.text)
                    textIndex.text = "" // Обнуляем текстовое поле с индексом
                }
            }
        }
    }
 
    // ListView для представления данных в виде списка
    ListView {
        id: listView1
        // Размещаем его в оставшейся части окна приложения
        anchors.top: row.bottom
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
 
        /* в данном свойстве задаём вёрстку одного объекта
         * который будем отображать в списке в качестве одного элемента списка
         * */
        delegate: Item {
            id: item
            anchors.left: parent.left
            anchors.right: parent.right
            height: 40
 
            // В данном элементе будет находиться одна кнопка
            Button {
                anchors.fill: parent
                anchors.margins: 5
 
                /* самое интересное в данном объекте
                 * задаём свойству text переменную, по имени которой будем задавать
                 * свойства элемента
                 * */
                text: idshnik
 
                // По клику по кнопке отдаём в текстовое поле индекс элемента в ListView
                onClicked: {
                    textIndex.text = index
                }
            }
        }
 
        // Сама модель, в которой будут содержаться все элементы
        model: ListModel {
            id: listModel // задаём ей id для обращения
        }
    }
}

Итог

В результате Вы получите приложение, в котором динамически создаются и удаляются элементы с кнопками, которое будет выглядеть так, как показано на рисунке. Также Вы можете ознакомиться с демонстрацией работы приложения в видеоуроке.

Видеоурок