Evgenij LegotskojNov. 9, 2015, 4:03 a.m.

QML - Lesson 012. Data transmission from the TextInput in ListView (Model / View)

Working with the ListView in QML is a fairly common aspect in the development of Android applications, since many applications have in their functional building lists of data, records, settings, etc. It is also true in developing a Desktop applications with QML principle would be the same for both platforms.

For its consideration of the transfer of information in the list offer carefully consider the following scenario of interaction with the ListView .

The principle of view data in the ListView

ListView object has two important properties:

  1. delegate - which determines the appearance of a single element ListView
  2. model - which placed the data of each element

The transmission model can be used ListModel object that contains the data for each item in the list. The data assigned to variables that have been assigned to certain properties of the objects in the delegate. In the figure below has two delegate objects Text, text properties which the variables text_first and text_second assigned. These variables determine which will be substituted data from each ListElement in ListModel . As can be seen from the figure, each ListElement has two properties, the name of which is identical to the variables that are assigned to the delegate. In fact, these variables are roles, which put a value of ListModel . So we get ListView with text fields, which are filled with the data that have been made in each ListElement in ListModel .

Work with TextInput

Data will be input into the field TextInput and transmitted into the ListView as a new element. That is, after the data are entered in the TextInput , add a new item in the ListView writing data to it, which are recorded in the TextInput . The event, which will start the transfer of data from the TextInput in the ListView will be pressing the Enter key or click on the special button Button, in which the handler is also added code to add the item to the data of the TextInput in a ListView .

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")

    RowLayout {
        id: rowLayout
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.margins: 5
        height: 30

        spacing: 5
        z:2         /* location level layers of elements.
                     * Element with z = 2 is located higher than the element with z = 1
                     */

        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: "white"

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

                /* By pressing the Enter key share it with any of the TextInput element in ListView
                 * */
                Keys.onPressed: {
                    // 16777220 - Enter the key code
                    if(event.key === 16777220){
                        listModel.append({ textList: textInput.text })
                    }
                }
            }
        }

        /* Button, clicking on which the information is transferred from textInput element in ListView
         * */
        Button {
            id: button
            text: qsTr("Add")
            Layout.fillHeight: true

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

    // The list, which is added with the data elements from 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 

        delegate: Text {
            anchors.left: parent.left
            anchors.right: parent.right
            height: 50
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter

            text: textList // The role of the property text, which will be transmitted data
        }

        // Model for submission of data in a ListView
        model: ListModel {
            id: listModel
        }
    }
}

Conclusion

The algorithm works with a ListView and TextInput valid for other objects instead of TextInput, such as Button, etc.

Retrieving data from objects that are located in ListElement in ListView with buttons similar to the article on dynamic creation and deletion of elements in the ListView.

Video

We recommend hosting TIMEWEB
We recommend hosting TIMEWEB
Stable hosting, on which the social network EVILEG is located. For projects on Django we recommend VDS hosting.
Support the author Donate

Comments

Only authorized users can post comments.
Please, Log in or Sign up
Donate

Did the EVILEG help you? Support the development of the site!

PayPalYandex.Money
How to become an author?

Contribute to the evolution of the EVILEG community.

Learn how to become a site author.

Learn it
Timeweb

Let me recommend you the excellent hosting on which EVILEG is located.

For many years, Timeweb has been proving his stability.

For projects on Django I recommend VDS hosting

View Hosting
S
  • Sergej
  • July 10, 2020, 3:15 p.m.

Qt - Test 001. Signals and slots

  • Result:68points,
  • Rating points-1
S
  • Sergej
  • July 10, 2020, 3:10 p.m.

C++ - Test 001. The first program and data types

  • Result:80points,
  • Rating points4
S
  • Sergej
  • July 10, 2020, 3:06 p.m.

C++ - Тест 003. Условия и циклы

  • Result:78points,
  • Rating points2
Last comments

Qt/C++ - Lesson 023. Moving QGraphicsItem on QGraphicsScene with mouse help

Пережиток plain C, ограничение видимости. По идее можно и .c, .cpp файлы подключать через директиву include. Для компилятора разницы особой нет, какое расширение будет.
R

Qt/C++ - Lesson 023. Moving QGraphicsItem on QGraphicsScene with mouse help

Подскажите, пожалуйста, почему функция рандома определена только в спп файле и объявлена при этом статической?
V

Django - Tutorial 027. Implementation Google reCAPTCHA

Спасибо. Только использую декоратор не в urls.py а перед views
R

Qt WinAPI - Lesson 001. How to collect all DLL, which used in Qt project?

Вы меня не совсем правильно поняли, но все равно спасибо, принял все к сведению. Все сделал как вы сказали, все отлично работает, еще раз огромнейшее спасибо) Разве что только что были опять про…

Qt WinAPI - Lesson 001. How to collect all DLL, which used in Qt project?

Стоило перед использованием что ли инструкцию прочитать https://www.cyberforum.ru/blogs/131347/blog2457.html "После сборки при запуске требовались dll," Ясное дело стоило задепло…
Now discuss on the forum
m

Qt IOs магнитное поле

Всем привет! Пытаюсь получить данные магнитного поля, используя класс QMagnetometer. Все получается, если задать параметр returnGeoValues false (как по-умолчанию). При этом выдаются ra…
DK

Drug Drop problems

благодорю!

Как в Qt в qmenu добавить scrollarea

Вот это наследованный класс меню. Но посути это обычное меню. #pragma once#include <QtWidgets>class TransMenu : public QMenu { Q_OBJECTpublic: TransMenu(QWidget* parent = …
o

Нужен человек кто хорошо понимает паттерны и их использование

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

Сборка Qt / C++ проекта под windows и linux

Отбой. Забыл в исходнике обернуть каждый #include макросом. #ifdef Q_OS_WIN32#include "win_controller.h"#else#include "linux_controller.h"#endif
About
Services
© EVILEG 2015-2020
Recommend hosting TIMEWEB