The better way to implement weird table or list

Gourmet

I need design specific solution for my application. It must represent some data but in unusual way. Data group include several text fields, couple of images and boolean values. All must work as scrollable table or list with non-selectable rows. Each row must show one data group but not as it is obviously drawn in tables - data from group must be chaotically drawn on row, texts must be in different sizes and even in different directions. Some texts must be written horizontally but some vertically. Images must be in different sizes too. Boolean data must be drawn as check boxes and they must be interactive. I understand now this is weird description therefore I include example of such row.

alt text

Internally text, text2, text3 text4, image1, image2, image3 checkbox1, checkbox2 - all are fields of one relation. The view shows this relation scrollable. The order and shown data can change - for example text5 can appear instead of text1, text2 can swap with text3 or second check box can disappear or else. Now I am little weird how better make this using Qt widgets. This must be a widget like QTableWidget or QListWidget. Or may be like just QScrollArea. I probably must paint this all in some paintEvent() but I cannot choose which one way is the best for this. The "editor" is not needed. I only need to show data but not edit it. Can anybody show me similar working example on public open resources?

SGaist

Hi,

So you would like have something like the item view chart example ?

Gourmet

@SGaist no, I need get something like this. But of course texts and images in each line will be different. I have got working kinetic scrolling table from QTableWidget and QScroller with customized scrollbar. But I am weird how better create each line of this table. Is this enough to just inherit QTableWidgetItem and write custom paintEvent for it? Or there is better (faster working) some other way?

Gojir4

This post is deleted!

VRonin

The obvious answer is: save each individual string/image/bool in a different role in the model and implement a custom QStyledItemDelegate reimplementing paint().
The real problem is this contradiction:

@Gourmet said in The better way to implement weird table or list:

I only need to show data but not edit it.

@Gourmet said in The better way to implement weird table or list:

Boolean data must be drawn as check boxes and they must be interactive.

If you have just 1 boolean you can get away with implementing a custom QProxyStyle (not a walk in the park) if it's more than 1 we go into "walk through hell" land

Gourmet

@VRonin said in The better way to implement weird table or list:

if it's more than 1 we go into "walk through hell" land

This sounds... disappointingly. There could be 3 checkboxes in one row. Depending from table sort the items in row can be placed in different positions with different sizes.

What if I just will create QGroupBox, place several QWidgets inside it to required positions and then place this QGroupBox inside QTableWidget cell? Or may be to QListWidget row - there will be only one column. I see this is much more simple to implement and change. The only lack I see - slow redraw when large rows number. But... in real task it cannot be VERY LARGE. Maximum number - not more than couple of hundreds. It cannot be thousand ever. If couple years later it will grow to thousand rows - then I will redesign via delegates. Some time ago I used QWidget in table cell but in much more simple task. This works. I know how simply define which one checkbox sent signal. Is there any other "underwater rock" in this method?

Gourmet

Up... I tried implement in simple way - bind QGroupBox to table cell and fill it by values. All works fine on desktop. But I create Android application and must use QScroller. This looks buggy. Without QWidgets attached to cells QScroller works fine. But when I attach widgets - QScroller stops working. It is quite hard describe how this looks indeed. But QScroller does not work. Probably it tries scroll not only QTableWidget but attached widgets too. May be I tuned it not enough. May be it is buggy indeed. Anybody knows something about it?

Gourmet

Up...

Can this be implemented with QML? I do not have much experience with QML - just only some settings for some widgets. Can list be constructed in QML? Can each item in list be constructred in QML? How do this? Is there any example of similar task solved in QML?

J.Hilk

@Gourmet yes it can,

My preferred method is,

create a class that contains all your information you want to show. Each Information has to be a Q_PROPERTY
create a QList<QObject*> with instances of your class as items
make that list available to QML
Set that list as model for a ListView
design your delegate in QML and access the class data via modelData.propertyName

Gourmet

@J.Hilk thanx but for me this looks little weird. I do not know yet how implement steps 3 and 5. Is there any example how do that? Or can anybody explain these steps deeper?

J.Hilk

@Gourmet
Just made a quick and dirty one ;)
https://github.com/DeiVadder/ListViewExample

Gourmet

@J.Hilk thanx, I have first check if this will work in QGraphicsWidget. I need find the way around this bug.

J.Hilk

@Gourmet That I don't know, but it will work with QQuickWidget, if that helps ?

https://doc.qt.io/Qt-5/qquickwidget.html

Gourmet

@J.Hilk It must work. But will it or not - I am not sure yet. Unfortunately right now I have make other work. Will test this later.

By the way - for QQuickWidget - will Window{} container in your main.qml needed or just only ListView{} required?

J.Hilk

@Gourmet for a qquickwidget it is irrelevant what the root element is, so yes it should work

Gourmet

This post is deleted!

Gourmet

@J.Hilk Your example works but my attempt does not. Here I include link to temporary zip with my source code.

https://dropmefiles.com/uezkn

Zip will be destroyed after week since this moment.

After setContextProperty() for QQuickWidget with 100 items it's size is 0,0. This tells line 20 in testlist.cpp. If line 14 in mainwindow.cpp is uncommented then one record with person_0 appears. But it does not have checkbox. I do not know how tune QML widget size to make it visible inside graphics scene. Line 12 in testlist.cpp doesn't help.

J.Hilk

@Gourmet
ok, couple of points,

seems like I was wrong, ListView can't be the root element - so I wrapped it in an Item{}
you QML objects needs a size or it won't draw anything. With setResizeMode(QQuickWidget::SizeRootObjectToView); set you have to resize it once from cpp side.
With setResizeMode(QQuickWidget::SizeViewToRootObject); you define the size with width:xxxx and height:yyyy of your root element in qml
set the rootContext property before you set the source, that will remove the not defined error

Gourmet

@J.Hilk ok, I changed Window container to Item container and TestList code to follwing:

TestList::TestList(QWidget *p, uint _width) : QQuickWidget(p), width(_width)
{
    qsrand(QTime::currentTime().second());
    connect(this, SIGNAL(statusChanged(QQuickWidget::Status)), SLOT(changedStatus(QQuickWidget::Status)));
   setResizeMode(QQuickWidget::SizeRootObjectToView);
}

void TestList::FillList()
{
    const int num = 100;
    for( int i = 0; i < num; i++ )
        notebook.append( new NoteEntry("person_"+QString::number(i), qrand()%60+20, i%2) );
    rootContext()->setContextProperty("DeathList",QVariant::fromValue(notebook));
    setSource(QUrl("qrc:/main.qml"));
    if( ! rootContext()->isValid() )
    {
        qWarning()<<"QML is not valid";
        QApplication::quit();
    }
    resize( width, num*50 );
}

Where width is ui->graphicsView.geometry().width(). Last resize calculates height as elements number multiplied to delegate height which is set in main.qml line 22. I do not know how extract this value for C++ code. The result is frustrating...

alt text

and bunch of error messages in console:
QOpenGLFramebufferObject: Framebuffer incomplete attachment.
QOpenGLFramebufferObject: Framebuffer incomplete attachment.
QOpenGLFramebufferObject: Framebuffer incomplete attachment.
QOpenGLFramebufferObject: Framebuffer incomplete attachment.
QOpenGLFramebufferObject: Framebuffer incomplete, missing attachment.

If I set width and height hard in main.qml and use setResizeMode(QQuickWidget::SizeViewToRootObject); then I see lines of my list. Of course only those who fit to it's size. With height 1000 px it works well and scrolls. Even it works with height 4050 - list has 81 person (from person_0 to person_80).
alt text
Checkboxes work, background color changes. But with height 4100 it breaks and looks like on the first picture here. So why this happens?

If this is some kind of memory limitation then I cannot use it. I need create application for possible couple hundreds of items. Each item can take about 100-150 pixels height. That means list can be up to 30000 pixels height. And may be more if the item height will grow.

J.Hilk

@Gourmet
this works for me:

//mainWindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {
class MainWindow;
}
class TestList;
class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
protected:
    void closeEvent(QCloseEvent*)override;
    void resizeEvent(QResizeEvent *)override;

    TestList *tl= nullptr;
};

#endif // MAINWINDOW_H

//mainWindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

#include <testlist.h>

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    tl = new TestList(0);
    tl->FillList();
    tl->move(0,0);
    
    QGraphicsView* gv = ui->graphicsView;
    QGraphicsScene* scene;
    gv->setScene( scene = new QGraphicsScene( tl->geometry(), this ) );
    scene->addWidget( tl, Qt::Widget );
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::closeEvent(QCloseEvent *)
{
    QApplication::exit();
}
void MainWindow::resizeEvent(QResizeEvent *)
{
    if(tl){
        tl->resize(ui->graphicsView->size());
    }
}

//main.qml
import QtQuick 2.9
import QtQuick.Controls 2.2

Item{
    id:root

    ListView {
        id:lView
        anchors.fill: parent

        model: DeathList

        orientation: ListView.Vertical

        delegate: Rectangle {
            color: modelData.dead ? "darkred" : "white"

            readonly property int numberOfVisibleItems: 10
            
            width: lView.width
            height: root.height /numberOfVisibleItems

            Text {
                id:nameField
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                text: modelData.name
                color: modelData.dead ? "white" : "black"
                width: contentWidth
            }

            Text {
                anchors.left: nameField.right
                anchors.leftMargin: 20
                anchors.verticalCenter: parent.verticalCenter
                text: modelData.age + qsTr("years old")
                color: modelData.dead ? "white" : "black"
                width: contentWidth
            }

            CheckBox {
                text: qsTr("is dead ?")
                anchors.right: parent.right
                anchors.top:parent.top
                anchors.bottom: parent.bottom
                checked: modelData.dead
                onCheckedChanged: modelData.dead = checked
            }
        }
    }
}

with a resize mode of SizeRootObjectToView