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