Qt: active chats control - c++

Question

I'm trying to figure out what component that would be best to use for a active chats control.
I've attached an image with the layout that I'm aiming for.
Basically I want to add an icon to the left of each conversation, depending if the conversation is active or not. The middle column is the name of the conversation and the last column is an indicator if there are new messages for this conversation. However, if the row is selected the indicator should switch out to a close conversations button.
I've through about using:
- Listview, however this would not give me multiple columns?
- Treeview
- Tableview - this might be the best solution. However in unsure of how to add icons and buttons to different cells
Which one would be my best bet here?

Answer 1

I think it depends on API you want to achieve. Most importantly, who will be the close handler/listener:
You can go for a table view with three different delegates. This way the caller is responsible to set up the close event.
Or you can make it list view, which internally creates listView/GridView. This way the conversation itself would be the listener to the close event.
It's up to you to decide which of these (there may be more) is more suitable to your existing codebase

Answer 2

If you have a simple delegate to implement (and you work in QML), you can really use a ListView to get the job done.
Here is a self-contained prototype of your layout. Change Rectangle by Image. You see that color vary accordingly as the model give an odd or even number. You can in the same way change the Component to load, the source of an Image, whatever you can imagine.
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;
}
}
}
}
}