Qt: активный контроль чатов

Question

Я пытаюсь выяснить, какой компонент лучше всего использовать для активного управления чатами.

Я приложил изображение с макетом, что я стремлюсь.

В основном я хочу, чтобы добавить значок слева от каждого разговора, в зависимости, если разговор активен или нет. Средний столбец - это имя разговора, а последний столбец - индикатор, если для этого разговора есть новые сообщения. Однако, если строка выбрана, индикатор должен переключиться на кнопку закрытия цепочек.

Я через об использовании: - Listview, однако это было бы не дать мне несколько столбцов? - Treeview - Tableview - это может быть лучшее решение. Однако в не уверены в том, как добавить иконки и кнопки для различных ячеек

Какой бы мой лучший выбор здесь?

Answer 1

Я думаю, что это зависит от API вы хотите достичь. Самое главное, кто будет ближайшим обработчиком/слушателем:

1. Вы можете пойти на просмотр таблицы с тремя разными делегатами. Таким образом, вызывающий абонент несет ответственность за настройку события закрытия.
2. Или вы можете сделать это просмотр списка, который внутренне создает listView/GridView. Таким образом, сам разговор будет слушателем события закрытия.

Это до вас, чтобы решить, какой из них (может быть и больше) больше подходят к вашему существующему кодовой

Answer 2

Если у вас есть простой делегат для реализации (и вы работаете в QML), вы можете действительно используйте ListView, чтобы выполнить эту работу.

Вот самодостаточным прототип вашего макета. Изменить Rectangle на Image. Вы видите, что цвет меняется соответственно, поскольку модель дает нечетное или четное число. Вы можете таким же образом изменить Component на загрузку, sourceImage, что бы вы ни представили.

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