QML - Сабақ 007. ListView Qml. Элементтерді динамикалық құру және жою

ListView, ListModel, Qt, Android, ListItem, QML

Qt-де виджеттерді динамикалық құру туралы мақалада мен сізге түймелерді динамикалық түрде қалай жасау және жою керектігін, сондай-ақ олармен қалай әрекеттесу керектігін айттым. Мұнда Вертикал орналасу қолданылған және Qml жағдайында Android. астында Java бағдарламасында бағдарламалау кезінде қолданылатын ListView Qml пайдалана аламыз. Айтпақшы, бұл Android. астында Qt бағдарламасында бағдарламалау кезінде де қолданылады.

Виджеттерді динамикалық құру туралы мақалада мысал ретінде QButton класының объектілері пайдаланылды. Бұл мақалада Button Qml нысандары пайдаланылады, теңшеу келесі бөлімде сипатталған. мақала . Бірақ түймелер ListView Qml. ішінде орналастырылады.

ListView Qml бағдарламасымен жұмыс істеуге арналған жоба құрылымы

Бұл жолы біз әдепкі бойынша жасалған жобамен және тіпті интерфейс дизайнерінсіз басқарамыз. Сонымен қатар, жазу кезінде дизайнерде барлық параметрлерді орнату мүмкін емес. Ал жобаның құрылымы келесідей:

• QmlDynamic.pro - жоба профилі;
• deployment.pri - мақсатты платформаға орналастыру ережелерінің файлы;
• main.cpp - қолданбаны іске қосудың негізгі файлы;
• main.qml - бағдарламаның бастапқы кодтары бар qml файлы

main.qml

Барлық басқа файлдар бізді қызықтырмайтындықтан және әдепкі бойынша жасалғандықтан, біз дереу main.qml. файлымен дефрифингке көшеміз.

Бағдарламаның алгоритмі келесідей. Қолданба терезесінің жоғарғы жағында мәтіндік өріс пен екі түймені қамтитын Row нысаны бар. Қолданба терезесінің қалған бөлігін ListView Qml нысаны алып жатыр. Жол ішіндегі түймелердің бірі басылғанда, түймені қамтитын ListView Qml ішінде динамикалық нысан жасалады. . Динамикалық түйме басылғанда, басылған түймені қамтитын 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 для обращения
        }
    }
}

Барлығы

Нәтиже - суретте көрсетілгендей болатын түйме элементтерін динамикалық түрде жасайтын және жоятын қолданба. Сондай-ақ, қосымшаның демонстрациясын бейне оқулықтан көруге болады.

Бейне оқулық