Реклама

QML - Урок 012. Передача данных из TextInput в ListView (Модель/Представление)

РуководствоQMLListView, ListModel, TextInput, Model, Delegate, QML, Qt, Android, View917

Работа с ListView в QML является довольно частым аспектом при разработке приложения под Android, поскольку очень многие приложения имеют в своём функционале построение списков с данными, записями, параметрами и т.д. Также это справедливо и при разработке приложений под Desktop на QML принцип будет аналогичен под обе платформы.

Для рассмотрения передачи информации в список предлагаю внимательно рассмотреть следующий вариант взаимодействия с ListView.

Принцип представления данных в ListView

Объект ListView имеет два важных свойства:

  1. delegate - который определяет внешний вид одного элемента в ListView
  2. model - в которую помещаются данные каждого элемента

В качестве модели представления данных можно использовать объект ListModel в котором содержатся данные для каждого элемента в списке. При этом данные присваиваются переменным, которые были присвоены определённым свойствам объектов в delegate. В ниже приведенном рисунке delegate имеет два объекта Text, свойствам text которых присвоены переменные text_first и text_second. Данные переменные определяют, куда буду подставляться данные из каждого ListElement в ListModel. Как видно из рисунка, каждый ListElement имеет два свойства, название которых идентично переменным, которые присвоены в delegate. По сути данные переменные являются ролями, по которым подставляются значения из ListModel. Таким образом получаем ListView с текстовыми полями, которые заполнены теми данными, которые были внесены в каждый ListElement в ListModel.

Работа с TextInput

Данные будут вводиться в поле TextInput и передаваться в ListView в качестве нового элемента. То есть, после того, как данные введены в TextInput, добавляем новый элемент в ListView записывая в него данные, которые внесены в TextInput. Событием, которое будет запускать передачу данных из TextInput в ListView будет служить нажатие клавиши Enter или клик по специальной кнопке Button, в обработчике которой также добавлен код для добавления элемента с данными из TextInput в ListView.

main.qml

В проекте созданном в Qt Creator редактируется только файл main.qml.

import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    // Слой в котором располагается TextInput и Button
    RowLayout {
        id: rowLayout
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.margins: 5
        height: 30

        spacing: 5
        z:2         /* Уровень расположения слоёв элементов.
                     * Элемент с z = 2 располагается выше, чем элемент с z = 1
                     */

        // Область с TextInput
        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "white"

            TextInput {
                id: textInput
                anchors.fill: parent
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter

                /* По нажатию клавиши Enter передаём информацию
                 * из TextInput в элемент ListView
                 * */
                Keys.onPressed: {
                    // 16777220 - код клавиши Enter
                    if(event.key === 16777220){
                        listModel.append({ textList: textInput.text })
                    }
                }
            }
        }

        /* Кнопка, по нажатию которой передаётся информация из
         * textInput в элемент ListView
         * */
        Button {
            id: button
            text: qsTr("добавить")
            Layout.fillHeight: true

            onClicked: {
                listModel.append({ textList: textInput.text })
            }
        }
    }

    // Список, в который добавляются элементы с данными из TextInput
    ListView {
        id: listView

        anchors.top: rowLayout.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.margins: 5
        z: 1 // Расположение ниже, чем слой с TextInput и Button

        // Описание внешнего вида одного элемента в ListView
        delegate: Text {
            anchors.left: parent.left
            anchors.right: parent.right
            height: 50
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter

            text: textList // Роль свойства text, в которую будут передаваться данные
        }

        // Модель для представления данных в ListView
        model: ListModel {
            id: listModel
        }
    }
}

Итог

Результат работы данного программного кода представлен на рисунке, а также его можно увидеть в видеоуроке по данной статье.

Представленный алгоритм работы с ListView и TextInput справедлив и для других объектов вместо TextInput, таких как Button и т.д.

Получение данных из объектов, которые располагаются в ListElement в ListView аналогичен работе с кнопками в статье по динамическому созданию и удалению элементов в ListView .

Видеоурок

Реклама

Комментарии

Комментарии

Только авторизованные пользователи могут оставлять комментарии.
Пожалуйста, Авторизуйтесь или Зарегистрируйтесь
Последние комментарии
  • EVILEG
  • 24 мая 2017 г. 15:12

Как написать игру на Qt - Урок 3. Взаимодействие с другими объектами

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

Как написать игру на Qt - Урок 3. Взаимодействие с другими объектами

А если применить приведение типов? Enemy01 *itemEnemy01 = dynamic_cast (item); void Widget::slotDeleteApple(QGraphicsItem *item) { Apple *check = dynamic_cast<Apple *>...

  • EVILEG
  • 24 мая 2017 г. 14:35

Как написать игру на Qt - Урок 3. Взаимодействие с другими объектами

void Widget::slotDeleteApple(QGraphicsItem *item) { if(apple == item) { scene->removeItem(apple); delete apple; ui->lcdNumber->display(count+...

Как написать игру на Qt - Урок 3. Взаимодействие с другими объектами

При столкновении объектов отсылается сигнал signalCheckItem, который содержит указатель на объект. В ядре игры проводится проверка. Если объект == apple, то выполняется удаление объекта. vo...

  • EVILEG
  • 24 мая 2017 г. 13:28

Qt/C++ - Урок 052. Кастомизация Qt Аудио плеера в стиле AIMP

В методах mousePressEvent, mouseMoveEvent и т.д. в этом же самом уроке показано, как определять области, в которых находится курсор мыши. Это реализовано для изменения размеров, в методе checkResiz...

Сейчас обсуждают на форуме

WinApi CBTProc

Сделать бул как у тебя?

  • Kostya
  • 26 мая 2017 г. 14:10

Всплывающие подсказки в QT

Как реализована данная штука?

Отличия в рефлектограммах соседних портов

Спасибо, за информацию.

  • Arrow
  • 24 мая 2017 г. 14:09

qmake

Похоже на то! Спасибо.