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?


  • Moderators

    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:

  • @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


    yes there are a couple of way to do this.

    Take a look here:

    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. :)


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


    #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()


    #include <QGuiApplication>
    #include <QQmlApplicationEngine>
    #include <QQuickStyle>
    #include "datamodel.h"
    int main(int argc, char *argv[])
        QGuiApplication app(argc, argv);
        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)
        }, Qt::QueuedConnection);
        return app.exec();


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

Log in to reply

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