QML - Урок 007. ListView. Динамічне створення та видалення елементів

ListView, ListModel, Qt, Android, ListItem, QML

У статті про динамічне створення віджетів у Qt я вже розповідав, як створювати та видаляти кнопки динамічно, а також як з ними взаємодіяти. І там використовувався Vertical Layout , а у випадку з Qml ми зможемо використовувати ListView Qml, як аналогічно використовується при програмуванні в Java під Android. Що, до речі кажучи, також можна застосувати при програмуванні на Qt під Android.

У статті про динамічне створення віджетів використовувалися, наприклад, об'єкти класу QButton. /post/64/). Але кнопки розміщуватимуться в 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 для обращения
        }
    }
}

Підсумок

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

Відеоурок