How can I add an item to grid layout in qml

zhmh

I used this in QT to add a class to grid layout and show the output of it in one of stack widget pages

PlotClass *plot;
plot=new PlotClass();

 QGridLayout layout;
 layout.addWidget(plot);
 this->ui->page_7->setLayout(&layout);
 this->ui->stackedWidget->setCurrentIndex(5);
 show();

Now how can I do that in qml? I know with this I can define a gridlayout

GridLayout{
       id:grid
       anchors.fill: parent
       columns: 1
   }

But what is the equivalent of this line?

layout.addWidget(plot);

sierdzio

If you need a dynamic grid, use GridView instead of GridLayout. This guy is static.

GrecKo

@sierdzio said in How can I add an item to grid layout in qml:

If you need a dynamic grid, use GridView instead of GridLayout. This guy is static.

Eh, if you don't want it to scroll, you can use a GridLayout + a Repeater.
Or it might make sense to put it in a Grid + Repeater if you need to nest it inside another container.

zhmh

@sierdzio So if I use GridView like this:

Rectangle {
    width: 732; height: 308

    Component {
        id: plotDelegate
        Item {
            width: grid.cellWidth; height: grid.cellHeight
            Column {
                anchors.fill: parent
              
            }
        }
    }

    GridView {
        id: grid
        anchors.fill: parent
        cellWidth: 730; cellHeight: 306

        model: ContactModel {}
        delegate: plotDelegate
        highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
        focus: true
    }
}

How can I add a item and see the output ?like this line of qt code

layout.addWidget(plot);

Also I registered my class to qml :

qmlRegisterType <PlotClass>("Plot",1,0,"mplot");

and I used

onClicked:stackView.push("Page2Form.ui.qml")

for show this page that contain GridView

sierdzio

PlotClass is a QWidget? Then you can't do it at all, embedding widgets in QML is not (easily) doable. Either use QML chart APIs, or change your plot class into a QQuickItem (or QQuickPaintedItem).

zhmh

@sierdzio This is my class, the chart is making drawing in my class, can't I add it?

#include <QDialog>
#include <QDateTime>
#include <QTimer>
#include <QLabel>
#include <QScrollBar>
#include "qchartviewer.h"


class PlotClass : public QDialog {
    Q_OBJECT
public:
    PlotClass(QWidget *parent = 0);
    ~PlotClass();

private:
    // The number of samples per data series used in this demo
    static const int sampleSize = 10000;

    // The initial full range is set to 60 seconds of data.
    static const int initialFullRange = 60;

    // The maximum zoom in is 10 seconds.
    static const int zoomInLimit = 10;

    double m_timeStamps[sampleSize];	// The timestamps for the data series
    double m_dataSeriesA[sampleSize];	// The values for the data series A
    double m_dataSeriesB[sampleSize];	// The values for the data series B
    double m_dataSeriesC[sampleSize];	// The values for the data series C

    int m_currentIndex;                 // Index of the array position to which new values are added.


    void drawChart(QChartViewer *viewer);           // Draw chart
    void trackLineLabel(XYChart *c, int mouseX);    // Draw track cursor
    void updateControls(QChartViewer *viewer);      // Update other controls as viewport changes

private slots:
    void onMouseUsageChanged(int mouseUsage);       // Pointer/zoom in/zoom out button clicked
    void onSave(bool);                              // Save button clicked
    void onUpdatePeriodChanged(QString);            // The chart update timer interval has changed.
    void onMouseMovePlotArea(QMouseEvent *event);   // Mouse move on plot area
    void onDataTimer();                             // Get new data values
    void onChartUpdateTimer();                      // Update the chart.
    void onViewPortChanged();                       // Viewport has changed
    void onHScrollBarChanged(int value);            // Scrollbar changed
};

sierdzio

No, you can't. Not only it is a widget it is also a QDialog. It won't work in QML.

shashikumar

Qt 5.1 introduces a new method in the QWidget class called createWindowContainer(). It allows embedding a QWindow (such as a QQuickView) into a QWidget-based application. This allows combining both QML and widgets in the same application, something that was not possible with Qt 5.0.link text

sierdzio

@shashikumar said in How can I add an item to grid layout in qml:

Qt 5.1 introduces a new method in the QWidget class called createWindowContainer(). It allows embedding a QWindow (such as a QQuickView) into a QWidget-based application. This allows combining both QML and widgets in the same application, something that was not possible with Qt 5.0.link text

But that does not help here. It allows to embed QML scene in widgets application, but not a widget in QML app.

shashikumar

@sierdzio yes, what you telling is right but i think like he may create Grid layout component in Qt side .

zhmh

@sierdzio How can I change my plot class into a QQuickItem (or QQuickPaintedItem)?

sierdzio

@zhmh said in How can I add an item to grid layout in qml:

@sierdzio How can I change my plot class into a QQuickItem (or QQuickPaintedItem)?

Probably easiest would be to rewrite it in QML using QtCharts module, but I don't really know.