QML Etiketten dynamisch hinzufügen

Question

Alles klar, ich versuche, eine Art Messenger mit qml zu machen. Ich habe einen Textbereich und einen Sende-Button. Wenn die Schaltfläche "Senden" angeklickt wird, wird der Text innerhalb des Textfelds irgendwo auf dem Bildschirm angezeigt. Alle anderen Änderungen im Textbereich ändern jedoch den Kontext des Labels. Ich habe versucht mit createObject (...), aber es hat nicht geholfen. Gibt es eine andere Möglichkeit, Labels (oder andere Komponenten) dynamisch zu erstellen?

import QtQuick 2.7 
import QtQuick.Controls 2.0 
import QtQuick.Layouts 1.3 
import QtQuick.Controls.Material 2.1 
ApplicationWindow { 

    visible: true 
    width: 640 
    height: 480 
    property var xPosition : 500 
    property var yPosition: 200 
    title: qsTr("server") 
    Rectangle{ 
     width: parent.width 
     height: parent.height 

     Button{ 
      id: sentButton 
      width: parent.width/14 
      x: parent.height + 112 
      y: parent.width - 200 
      Material.accent: Material.Blue 
      Material.background: Material.DeepOrange 
      Text { 
       id: name 
       text: qsTr("Send") 
       color: "white" 
       x:parent.width/4 
       y:parent.height/4 
      } 
      onClicked: { 
       //add label with the context of textarea 


      } 
     } 

     Rectangle{ 
      id:back 
      height: sentButton.height 
      width: parent.width - sentButton.width 
      x:0 
      y: 435 
      color: "white" 
      border.width: 0.5 

      TextArea{ 
       id:search 
       placeholderText: qsTr("Search") 
       x:7 
       width: parent.width - 25 
       background: null 
      } 

     } 
    } 

} 

Answer 1

Statt Label manuell zu schaffen, würde ich eine Reihe zu einem Modell (wie ListModel) hinzuzufügen und sie mit einem ListView anzuzeigen.

Die ListView wird einen Delegaten für jede Zeile des Modells instanziieren, es ist sauberer, als es manuell zu tun. Außerdem erhalten Sie das Scroll-Verhalten kostenlos.

Beispiel hier:

import QtQuick 2.7 
import QtQuick.Controls 2.0 
import QtQuick.Layouts 1.3 
import QtQuick.Controls.Material 2.1 

ApplicationWindow { 

    visible: true 
    width: 640 
    height: 480 
    Material.accent: Material.DeepOrange 

    ListModel { 
     id: messageModel 
    } 

    ColumnLayout { 
     anchors { fill: parent; margins: 8 } 
     spacing: 16 
     ListView { 
      Layout.fillWidth: true; Layout.fillHeight: true 
      model: messageModel 
      delegate: ItemDelegate { text: model.message } 
     } 
     RowLayout { 
      spacing: 16 
      Layout.fillWidth: true; Layout.fillHeight: false 
      TextField { 
       id: textField 
       Layout.fillWidth: true; Layout.fillHeight: true 
      } 
      Button { 
       Material.foreground: "white"; Material.background: Material.DeepOrange 
       Layout.fillHeight: true 
       text: "Send" 
       onClicked: { 
        messageModel.append({message: textField.text}); 
        textField.text = ""; 
       } 
      } 
     } 
    } 
} 

Hier wird die Button wird eine neue Reihe zum ListModel mit der TextField ‚s text als Nachrichten Rolle anhängen. Dann instanziiert die ListView für jede Zeile des Modells eine ItemDelegate Anzeige der Nachrichtenrolle.