Die Arbeit mit ListView in QML ist ein ziemlich häufiger Aspekt bei der Entwicklung einer Anwendung für Android , da so viele Anwendungen Listen mit Daten, Aufzeichnungen, Parametern usw. in ihrer Funktionalität haben. Dies gilt auch für die Entwicklung von Anwendungen für Desktop auf QML , das Prinzip ist für beide Plattformen ähnlich.
Um die Übertragung von Informationen an die Liste in Betracht zu ziehen, schlage ich vor, dass Sie die folgende Option zur Interaktion mit ListView. sorgfältig prüfen.
Das Prinzip der Darstellung von Daten in einer ListView
Das Objekt ListView hat zwei wichtige Eigenschaften:
- Delegat – definiert das Aussehen eines Elements in ListView
- Modell - in dem die Daten jedes Elements platziert werden
Sie können das ListModel -Objekt als Datenpräsentationsmodell verwenden, das Daten für jedes Element in der Liste enthält. Dadurch werden Daten Variablen zugewiesen, die bestimmten Objekteigenschaften in delegate zugewiesen wurden. In der folgenden Abbildung hat delegate zwei Textobjekte , deren text -Eigenschaften den Variablen zugewiesen wurden text_first* * und text_second. Diese Variablen bestimmen, wo die Daten von jedem ListElement in ListModel. ersetzt werden. hat zwei Eigenschaften, deren Namen mit den Variablen identisch sind, die in delegate. zugewiesen werden. Tatsächlich sind diese Variablen Rollen, für die Werte aus ListModel ersetzt werden. Somit erhalten wir * *ListView mit Textfeldern, die mit den Daten gefüllt sind, die in jedes * ListElement bis ListModel. * eingegeben wurden.
Arbeiten mit TextInput
Die Daten werden in das Feld TextInput eingetragen und als neues Element an die ListView übergeben. Das heißt, nachdem die Daten in TextInput eingegeben wurden, fügen wir ListView ein neues Element hinzu, indem wir die in TextInput eingegebenen Daten hineinschreiben. Ein Ereignis, das die Übertragung von auslöst Daten aus TextInput ListView werden durch Drücken der Enter -Taste oder Klicken auf eine spezielle Schaltfläche Button bereitgestellt, in deren Handler auch Code zum Hinzufügen eines Elements hinzugefügt wird Daten von TextInput bis ListView.
main.qml
In einem in Qt Creator erstellten Projekt wird nur die Datei main.qml. bearbeitet.
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
}
}
}
Insgesamt
Das Ergebnis dieses Programmcodes ist in der Abbildung dargestellt und kann auch im Video-Tutorial zu diesem Artikel angesehen werden.
Der vorgestellte Algorithmus zum Arbeiten mit ListView und TextInput gilt auch für andere Objekte anstelle von TextInput wie Button usw.
Das Abrufen von Daten von Objekten, die sich in ListElement in ListView befinden, ähnelt dem Arbeiten mit Schaltflächen im Artikel über dynamisches Erstellen und Löschen von Elementen in einer ListView .
