Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. CustomItem derived from QQuickItem and exposed to QML has incorrect alignment
Forum Updated to NodeBB v4.3 + New Features

CustomItem derived from QQuickItem and exposed to QML has incorrect alignment

Scheduled Pinned Locked Moved QML and Qt Quick
1 Posts 1 Posters 921 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • D Offline
    D Offline
    Dmitry.Sokolov
    wrote on last edited by
    #1

    I'm trying to make a custom QQuick Item (rect1) and to align it under the label text1 in the ApplicationWindow

    @
    //----- main.qml -----

    import QtQuick 2.2
    import QtQuick.Controls 1.2
    import QtQuick.Layouts 1.1

    import My.Controls 1.0

    ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    toolBar: ToolBar {
        id: tb1
        RowLayout {
            anchors.fill: parent
            ToolButton {
                text: qsTr("Open")
            }
            ToolButton {
                text: qsTr("Save")
            }
            Item {
                height: 1
                Layout.fillWidth: true
            }
            ToolButton {
                text: qsTr("Exit")
                onClicked: Qt.quit()
            }
        }
    }
    
    Item {
        anchors.fill: parent
        Text {
            id: text1
            text: qsTr("Hello World")
            anchors.top: parent.top
            anchors.right: parent.right
        }
        CustomItem {
            id: rect1
            anchors.top: text1.bottom
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.left: parent.left
        }
    }
    

    }
    @

    C++ source files:
    @
    //----- main.cpp -----

    #include <QApplication>
    #include <QQmlApplicationEngine>
    #include "customitem.h"

    int main(int argc, char *argv[])
    {
    QApplication app(argc, argv);

    qmlRegisterType<CustomItem>("My.Controls", 1, 0, "CustomItem");
    
    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:///main.qml")));
    
    return app.exec();
    

    }

    //----- customitem.h -----

    #ifndef CUSTOMITEM_H
    #define CUSTOMITEM_H

    #include <QQuickItem>
    #include <QQuickWindow>

    class CustomItem : public QQuickItem
    {
    Q_OBJECT
    public:
    explicit CustomItem(QQuickItem *parent = 0);

    signals:

    public slots:
    void paint();

    private slots:
    void handleWindowChanged(QQuickWindow * win);

    };

    #endif // CUSTOMITEM_H

    //----- customitem.cpp -----

    #include "customitem.h"

    CustomItem::CustomItem(QQuickItem *parent) :
    QQuickItem(parent)
    {
    connect(this, &CustomItem::windowChanged, this, &CustomItem::handleWindowChanged);
    }

    void CustomItem::paint()
    {
    QQuickWindow * win = window();
    qreal ratio = win->devicePixelRatio();
    int w = int(ratio * win->width());
    int h = int(ratio * win->height());
    glViewport(0, 0, w, h);

    glDisable(GL_DEPTH_TEST);
    glClearColor(0, 0, 0, 1);
    glClear(GL_COLOR_BUFFER_BIT);
    

    }

    void CustomItem::handleWindowChanged(QQuickWindow * win)
    {
    if (win) {
    // Connect the beforeRendering signal to our paint function.
    // Since this call is executed on the rendering thread it must be a Qt::DirectConnection
    connect(win, &QQuickWindow::beforeRendering, this, &CustomItem::paint, Qt::DirectConnection);

        // If we allow QML to do the clearing, they would clear what we paint and nothing would show.
        win->setClearBeforeRendering(false);
    }
    

    }
    @

    When this application is running label text1 is not visible and custom item rect1 occupies the whole client area of the ApplicationWindow:

    !https://lh5.googleusercontent.com/-CU-qYQbHLWw/U-iCRzDz9nI/AAAAAAAAAMA/zRaFCUPibVg/w823-h657-no/pic1.png(pic1)!

    But when I replace CustomItem with Rectangle then all items become correctly aligned:

    !https://lh6.googleusercontent.com/-i_zKkneJ-ag/U-iCRp-VpQI/AAAAAAAAAL8/A4PlbCgfSoc/w823-h657-no/pic2.png(pic2)!

    So, what I'm missing? Or is it a bug?

    1 Reply Last reply
    0

    • Login

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Get Qt Extensions
    • Unsolved