QML动态添加标签

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
            }

        }
    }

}

Answer 1

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.