Question

好吧，我试图用qml制作一种信使。我有一个textarea和一个发送按钮。单击发送按钮时，textarea内的文本将显示在屏幕上的某个位置。但文本区域中的任何其他更改都将更改标签的上下文。我尝试使用createObject（...），但它没有帮助。有没有其他方法可以动态创建标签（或任何其他组件）？

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

我不是手动创建Label，而是向模型添加一行（例如ListModel）并使用ListView显示。

ListView将为模型的每一行实例化一个委托，它比手动操作更清晰。另外，您可以免费获得滚动行为。

此处示例：

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

此处，Button会向ListModel添加一个新行，TextField＆＃39; s text作为消息角色。然后ListView为模型的每一行实例化ItemDelegate，显示消息角色。

QML动态添加标签

1 个答案: