QML - Lektion 007. ListView. Dynamisches Anlegen und Löschen von Elementen

ListView, ListModel, Qt, Android, ListItem, QML

Im Artikel über dynamische Erstellung von Widgets in Qt habe ich bereits beschrieben, wie man Schaltflächen dynamisch erstellt und löscht, sowie wie man mit ihnen interagiert. Und dort wurde Vertical Layout verwendet, und im Fall von Qml können wir ListView Qml verwenden, wie es ähnlich verwendet wird, wenn in Java unter Android programmiert wird. Was übrigens auch beim Programmieren in Qt unter Android** gilt.

Im Artikel über die dynamische Erstellung von Widgets wurden exemplarisch Objekte der QButton-Klasse verwendet In diesem Artikel werden Button Qml-Objekte verwendet, deren Anpassung im next Artikel . Aber die Schaltflächen werden in ListView Qml. platziert.

Projektstruktur für die Arbeit mit ListView Qml

Diesmal kommen wir mit einem standardmäßig angelegten Projekt und sogar ohne Interface-Designer aus. Außerdem konnten zum Zeitpunkt des Schreibens nicht alle Parameter im Designer eingestellt werden. Und die Projektstruktur ist wie folgt:

• QmlDynamic.pro - Projektprofil;
• deployment.pri - Datei mit Bereitstellungsregeln für die Zielplattform;
• main.cpp - Startdatei der Hauptanwendung;
• main.qml - qml-Datei mit Programm-Quellcodes

main.qml

Da alle anderen Dateien für uns uninteressant sind und standardmäßig erstellt werden, gehen wir gleich mit der Datei main.qml. ins Debriefing.

Der Algorithmus des Programms ist wie folgt. Oben im Anwendungsfenster befindet sich ein Row -Objekt, das ein Textfeld und zwei Schaltflächen enthält. Der Rest des Anwendungsfensters wird vom ListView Qml-Objekt belegt. Wenn auf eine der Schaltflächen in der Zeile geklickt wird, wird ein dynamisches Objekt in der ListView Qml erstellt, das die Schaltfläche enthält . Beim Klick auf einen dynamischen Button wird der Index ListElement , der den angeklickten Button enthält, in das Textfeld in Row übertragen. Und dann, durch Drücken der zweiten Schaltfläche im Objekt Row , wird das Element aus der ListView Qml per Index aus dem Textfeld entfernt, und der Wert im Textfeld gelöscht.

Bemerkenswert ist, dass beim Entfernen eines Elements, das sich beispielsweise in der Mitte der Liste befindet, die Indizes aller Elemente, die diesem Element folgen, um eins reduziert werden. Das heißt, die Indizes der Elemente werden automatisch neu berechnet.

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 для обращения
        }
    }
}

Insgesamt

Das Ergebnis ist eine Anwendung, die Schaltflächenelemente dynamisch erstellt und löscht, die wie in der Abbildung gezeigt aussehen. Sie können sich auch eine Demonstration der Anwendung im Video-Tutorial ansehen.

Videoanleitung