QML动态添加标签

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

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 
      } 

     } 
    } 

}

来源

2017-07-06 Someone

['TextArea :: append']（http://doc.qt.io/qt-5/qml-qtquick-controls-textarea.html#append-method）将问题添加到您的文本中'TextArea'？你可以显示'onClicked'里面应该是什么，参见[mcve] – m7913d

它想要像信使一样。所以每次点击发送textarea的上下文都应该添加到labal（在我看来）。 – Someone

使用添加内容的模型（例如'ListModel'），然后我们将标签实例化为代表例如。一个'ListView' – derM

而是手动创建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的text为消息作用。然后ListView为模型的每一行实例化一个显示消息角色的ItemDelegate。

来源

2017-07-06 14:57:04 GrecKo

工作 - 非常感谢 – Someone

QML动态添加标签

回答

相关问题