Qt：主動聊天控制

Question

我想弄清楚什麼組件最適合用於活動聊天控件。

我附上了一幅圖片，其中包含我瞄準的佈局。

基本上我想要的圖標添加到每個會話的左側，這取決於如果對話處於活動狀態。中間欄是會話的名稱，最後一欄是如果此會話有新消息的指示器。但是，如果選擇該行，指示器應切換到關閉對話按鈕。

我已經通過使用約： - Listview，但是這不會給我多個列？ - Treeview - Tableview - 這可能是最好的解決方案。然而，不確定如何將圖標和按鈕添加到不同的單元格

哪一個是我最好的選擇？

Answer 1

我認爲這取決於你想實現的API。最重要的是，誰將成爲親密的處理者/監聽者：

1. 你可以去三個不同的代表表視圖。這樣調用者負責設置關閉事件。
2. 或者你可以使它成爲列表視圖，它在內部創建listView/GridView。這樣談話本身就會成爲關閉事件的聆聽者。

它是由你來決定哪些這些（可能還有更多）更適合於你現有的代碼庫

Answer 2

如果你有一個簡單的委託來實現（和你在QML工作），你可以真的使用ListView來完成工作。

這是一個獨立的佈局原型。通過Image更改Rectangle。當模型給出一個奇數或偶數時，您會發現顏色會有所不同。你可以用相同的方式改變Component的加載方式，source的Image，無論你想象什麼。

import QtQuick 2.0 

Rectangle { 
    width: 360 
    height: 200 

    ListView { 
     anchors.fill: parent 
     model: 3 


     delegate: Rectangle { 
      id: rect 
      width: parent.width 
      height: 60 
      property bool selected: false 
      color: selected ? "darkblue" : "transparent" 

      Rectangle { 
       id: bubbleIcon 
       anchors.left: parent.left 
       anchors.verticalCenter: parent.verticalCenter 
       width: 40 
       height: 40 
       color: "lightblue" 
      } 

      Text { 
       id: chatName 
       anchors.left: bubbleIcon.right 
       anchors.leftMargin: 10 
       height: parent.height 
       verticalAlignment: Text.AlignVCenter 
       text: "chat" + modelData 
      } 

      Rectangle { 
       id: notificationIcon 
       anchors.right: parent.right 
       anchors.verticalCenter: parent.verticalCenter 
       width: 40 
       height: 40 
       //just an dummy example to show how to change representation base 
       //expression binding 
       color: (modelData % 2 === 0) ? "lightGreen" : "red" 
      } 

      MouseArea { 
       anchors.fill: parent 
       onClicked: { 
        selected = ! selected; 
       } 
      } 
     } 
    } 
}