QML adding labels dynamically

Question

Allright, i'm trying to make a kind of messenger using qml. i have a textarea and a send button. when send button is clicked the text inside the textarea will be displayed somewhere on the screen. but any other changes in text area will change the context of label. i tried using createObject(...) but it didn't help. is there any other way for creating labels (or any other component) dynamically?

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
            }

        }
    }

}

What is the problem with TextArea::append to add text to your TextArea? Can you show what should be inside onClicked, see minimal reproducible example — m7913d
it wants to be like messenger. so each time i click send the context of textarea should be add to a labal (in my opinion). — Soroush Hosseinpour
Use a model (e.g. ListModel), to which you add the content, which you then us to instantiate labels as delegates of e.g. a ListView — derM
thanks - i'll give it try - but if you could provide an example it would be appreciated. — Soroush Hosseinpour

GrecKo GrecKo · Accepted Answer · 2017-07-06T14:57:04

Instead of creating Label manually, I would add a row to a model (like ListModel) and display it with a ListView.

The ListView will instantiate a delegate for each row of the model, it's cleaner than doing it manually. Plus you get the scrolling behaviour for free.

Example here :

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 = "";
                }
            }
        }
    }
}

Here, the Button will append a new row to the ListModel with the TextField's text as the message role. Then the ListView instantiates for each row of the model a ItemDelegate displaying the message role.

QML adding labels dynamically

1 Answers