A QML type showing rows and a scroll bar



  • Hi all,

    For part of my Qt Quick project, I need to expose data (including text and numbers in Persian) in rows with four or five columns, similar to a table. Each cell must be able to have a color, font for the text and emit the clicked signal when clicked/touched. The number of rows is various, because they can be added/removed. We should be able to scroll the rows. And we also should be able to search for a specific row using the text column, for example, in a separate row right after the first (title) row.

    Is there a built-in QML type that covers the features above all? If yes, what component please? And if not, from where should I start to reach what I want?

    Thanks.




  • Moderators

    @qcoderpro
    There's a couple of ways you can do that.

    QML has a TableView, there's also a ListView. For both you can specify the delegate (the item that is drawn), both have a Scrollbar component that you can override

    You can do a flickable, columns and repeaters. And a manually created and attached ScrollBar

    There are many ways to Rome.



  • Ow thanks. Which is easier to pick out and better for that non-western language please?


  • Moderators

    @qcoderpro the text format/Languag doesn't matter either way. QString is able to display them.

    Reading more carefully through your opening post.
    I think the best option for you would be to create a c++ model do your stuff there (including the search) and expose that to qml.

    Probably best to subclass QAbstractItemModel
    take a look here for further information:
    https://doc.qt.io/qt-5/qtquick-modelviewsdata-cppmodels.html



  • @j-hilk

    Sorry, I changed my mind. A table is too and unnecessarily sophisticated for the task which can be simply done using a ListView. The delegate can be a button with some data (text and numbers etc) and when clicked it shows the thorough version of data inside a dialog box. New lists can also be added and we can scroll up/down the list and remove any list element at will. But I'm not sure I can search for a element given a text, for instance.
    If I need to use C++ as the back-end (which is more preferable) instead of a ListView, probably a suitable abstract class is QAbstractListModel Class. Do you agree up to here? If yes, where can I find an example to start the primary part of the back-end section using that class? It's complicated and I don't know how to derive it in a class. :(


  • Moderators

    @qcoderpro

    yes there are a couple of way to do this.

    Take a look here:
    https://doc.qt.io/qt-5/qtquick-modelviewsdata-cppmodels.html

    It covers all usual methods, and gives an example for them



  • @j-hilk
    Thank you.
    I wrote this and get many errors and am sure it's awkward and must be changed to be a good program for the task. So please where it's need put some changes. I'm new in this case. :)

    dataModel.h:

    #ifndef DATAMODEL_H
    #define DATAMODEL_H
    
    #include <QAbstractListModel>
    #include <QPushButton>
    
    class DataModel: public QAbstractListModel
    {
        Q_OBJECT
        Q_PROPERTY(QVector mList READ showList WRITE addList NOTIFY mListChanged)
    
    public:
        explicit DataModel(QObject* parent = nullptr);
        void addList(const QString&, const char&, const int&);
        void showLsit();
    
    private:
        QVector<QPushButton> mList;
    };
    
    #endif // DATAMODEL_H
    

    dataModel.cpp:

    #include "datamodel.h"
    
    DataModel::DataModel(QObject* parent) : QAbstractListModel(parent)
    { }
    
    void DataModel::addList(const QString &name, const char& ch, const int& n)
    {
        mList.push_back(QPushButton(name + ch + n));
        emit mListChanged();
    }
    
    void DataModel::showLsit()
    {
    
    }
    

    main.cpp:

    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    #include <QQuickStyle>
    
    #include "datamodel.h"
    
    int main(int argc, char *argv[])
    {
        QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
        QGuiApplication app(argc, argv);
    
        QQuickStyle::setStyle("Material");
    
        qmlRegisterType<DataModel>("Model", 1, 0, "DataModel");
    
        QQmlApplicationEngine engine;
        const QUrl url(QStringLiteral("qrc:/main.qml"));
        QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                         &app, [url](QObject *obj, const QUrl &objUrl) {
            if (!obj && url == objUrl)
                QCoreApplication::exit(-1);
        }, Qt::QueuedConnection);
        engine.load(url);
    
        return app.exec();
    }
    

    main.qml:

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    import QtQuick.Layouts 1.12
    import QtQuick.Controls.Material 2.12
    
    import Model 1.0
    
    ApplicationWindow {
        id: appWin
        visible: true
        width: 800; height: 600
        title: qsTr("Test")
    
        Material.background: "#E0E0E0"
    
       DataModel {
         id: firstList
         addList("test1", 'd', 12);
         showList();
        }
    }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.