Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How can I add an item to grid layout in qml



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

  • Moderators

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


  • Qt Champions 2018

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



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


  • Moderators

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



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

  • Moderators

    No, you can't. Not only it is a widget it is also a QDialog. It won't work 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


  • Moderators

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



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



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


  • Moderators

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


Log in to reply