Question

我正在试图找出最适合用于主动聊天控制的组件。

我附上了一张我想要的布局图片。

enter image description here

基本上我想在每个对话的左侧添加一个图标，具体取决于对话是否有效。中间列是对话的名称，如果有此对话的新消息，则最后一列是指示符。但是，如果选择了行，则指示符应切换为关闭对话按钮。

我一直在使用： - Listview，但这不会给我多列？ - 树视图 - Tableview - 这可能是最好的解决方案。但是不确定如何将图标和按钮添加到不同的单元格

哪一个是我最好的选择？

Answer 1

我认为这取决于您想要实现的API。最重要的是，谁将是紧密的处理程序/监听器：

您可以使用三个不同的代表来查看表格视图。这样调用者负责设置关闭事件。
或者你可以创建列表视图，它在内部创建listView / GridView。这样，对话本身就是关闭事件的倾听者。

由您决定哪些（可能更多）更适合您现有的代码库

Answer 2

如果你有一个简单的委托来实现（并且你使用QML），你真的可以使用ListView来完成工作。

这是一个独立的布局原型。按Rectangle更改Image。您会看到颜色因模型给出奇数或偶数而相应变化。您可以以同样的方式更改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;
                }
            }
        }
    }
}

Qt：主动聊天控制

2 个答案: