Question

I’m doing some testing of QT Quick to see if i can use it as a GUI replacement for the old Ui files. I noticed in some of the examples that custom components will populate the library view. I managed to do that (apparently they must be in a sub dir of the qml file that uses them?). However these components do not render in the Qt Quick design window. There is actually nothing to grab or manipulate. Upon running the program, they render correctly.

Does anyone have a solution? My source is below

import QtQuick 1.0
import Chips 1.0

Item {
    width: 100
    height: 62
    Chip
    {

    }
}

chip.cpp

#include "Chip.h"

#include <QtGui>


Chip::Chip(QDeclarativeItem *parent)
    : QDeclarativeItem(parent)
{
    x = 0;
    y = 0;
    color = QColor(0, 200, 0);
    setFlags(ItemIsSelectable | ItemIsMovable);
    setFlag(QGraphicsItem::ItemHasNoContents, false);
    setAcceptsHoverEvents(true);
}


//Chip::Chip(const QColor &color, int x, int y, QDeclarativeItem *parent)
//    : QDeclarativeItem(parent)
//{
//    this->x = x;
//    this->y = y;
//    this->color = color;
//    setZValue((x + y) % 2);

//    setFlags(ItemIsSelectable | ItemIsMovable);
//    setFlag(QGraphicsItem::ItemHasNoContents, false);
// setAcceptsHoverEvents(true);
//}

QRectF Chip::boundingRect() const
{
    return QRectF(0, 0, 110, 70);
}

QPainterPath Chip::shape() const
{
    QPainterPath path;
    path.addRect(14, 14, 82, 42);
    return path;
}

void Chip::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    Q_UNUSED(widget);

    QColor fillColor = (option->state & QStyle::State_Selected) ? color.dark(150) : color;
    if (option->state & QStyle::State_MouseOver)
        fillColor = fillColor.light(125);

    const qreal lod = option->levelOfDetailFromTransform(painter->worldTransform());
    if (lod < 0.2) {
        if (lod < 0.125) {
            painter->fillRect(QRectF(0, 0, 110, 70), fillColor);
            return;
        }

        QBrush b = painter->brush();
        painter->setBrush(fillColor);
        painter->drawRect(13, 13, 97, 57);
        painter->setBrush(b);
        return;
    }

    QPen oldPen = painter->pen();
    QPen pen = oldPen;
    int width = 0;
    if (option->state & QStyle::State_Selected)
        width += 2;

    pen.setWidth(width);
    QBrush b = painter->brush();
    painter->setBrush(QBrush(fillColor.dark(option->state & QStyle::State_Sunken ? 120 : 100)));

    painter->drawRect(QRect(14, 14, 79, 39));
    painter->setBrush(b);

    if (lod >= 1) {
        painter->setPen(QPen(Qt::gray, 1));
        painter->drawLine(15, 54, 94, 54);
        painter->drawLine(94, 53, 94, 15);
        painter->setPen(QPen(Qt::black, 0));
    }

    // Draw text
    if (lod >= 2) {
        QFont font("Times", 10);
        font.setStyleStrategy(QFont::ForceOutline);
        painter->setFont(font);
        painter->save();
        painter->scale(0.1, 0.1);
        painter->drawText(170, 180, QString("Model: VSC-2000 (Very Small Chip) at %1x%2").arg(x).arg(y));
        painter->drawText(170, 200, QString("Serial number: DLWR-WEER-123L-ZZ33-SDSJ"));
        painter->drawText(170, 220, QString("Manufacturer: Chip Manufacturer"));
        painter->restore();
    }

    // Draw lines
    QVarLengthArray<QLineF, 36> lines;
    if (lod >= 0.5) {
        for (int i = 0; i <= 10; i += (lod > 0.5 ? 1 : 2)) {
            lines.append(QLineF(18 + 7 * i, 13, 18 + 7 * i, 5));
            lines.append(QLineF(18 + 7 * i, 54, 18 + 7 * i, 62));
        }
        for (int i = 0; i <= 6; i += (lod > 0.5 ? 1 : 2)) {
            lines.append(QLineF(5, 18 + i * 5, 13, 18 + i * 5));
            lines.append(QLineF(94, 18 + i * 5, 102, 18 + i * 5));
        }
    }
    if (lod >= 0.4) {
        const QLineF lineData[] = {
            QLineF(25, 35, 35, 35),
            QLineF(35, 30, 35, 40),
            QLineF(35, 30, 45, 35),
            QLineF(35, 40, 45, 35),
            QLineF(45, 30, 45, 40),
            QLineF(45, 35, 55, 35)
        };
        lines.append(lineData, 6);
    }
    painter->drawLines(lines.data(), lines.size());

    // Draw red ink
    if (stuff.size() > 1) {
        QPen p = painter->pen();
        painter->setPen(QPen(Qt::red, 1, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin));
        painter->setBrush(Qt::NoBrush);
        QPainterPath path;
        path.moveTo(stuff.first());
        for (int i = 1; i < stuff.size(); ++i)
            path.lineTo(stuff.at(i));
        painter->drawPath(path);
        painter->setPen(p);
    }
}

void Chip::mousePressEvent(QGraphicsSceneMouseEvent *event)
{
    QGraphicsItem::mousePressEvent(event);
    update();
}

void Chip::mouseMoveEvent(QGraphicsSceneMouseEvent *event)
{
    if (event->modifiers() & Qt::ShiftModifier) {
        stuff << event->pos();
        update();
        return;
    }
    QGraphicsItem::mouseMoveEvent(event);
}

void Chip::mouseReleaseEvent(QGraphicsSceneMouseEvent *event)
{
    QGraphicsItem::mouseReleaseEvent(event);
    update();
}

QColor Chip::getColor() const
{
    return color;
}

int Chip::getX() const
{
    return x;
}

int Chip::getY() const
{
    return y;
}

void Chip::setColor(const QColor &color)
{
    this->color = color;
}

void Chip::setX(const int &x)
{
    this->x = x;
}

void Chip::setY(const int &y)
{
    this->y = y;
}

chip.h

#ifndef CHIP_H
#define CHIP_H

#include <QtGui/QColor>
#include <QDeclarativeItem>

class Chip : public QDeclarativeItem
{
    Q_OBJECT
    Q_PROPERTY(int x READ getX WRITE setX)
    Q_PROPERTY(int y READ getY WRITE setY)
    Q_PROPERTY(QColor color READ getColor WRITE setColor)

public:
    Chip(QDeclarativeItem *parent = 0);
    Chip(const QColor &color, int x, int y);

    QRectF boundingRect() const;

    QColor getColor() const;
    int getX() const;
    int getY() const;

    void setColor(const QColor &color);
    void setX(const int &x);
    void setY(const int &y);

    QPainterPath shape() const;
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *item, QWidget *widget);

protected:
    void mousePressEvent(QGraphicsSceneMouseEvent *event);
    void mouseMoveEvent(QGraphicsSceneMouseEvent *event);
    void mouseReleaseEvent(QGraphicsSceneMouseEvent *event);

private:
    int x, y;
    QColor color;
    QList<QPointF> stuff;
};

#endif

In my investigation of this issue, i learned that you can add custom widgets to the QT Designer. I might have to check that out as well before I make my decision. Any help will be appreciated, thanks.

Answer 1

UPDATE: Dec/2015

You have to mark it as ‘supported’

Documentation clearly states that you have to explicitely mark it as supported, otherwise you will get blank boxes.

The items of an unsupported plugin are not painted in the Qt Quick
Designer, but they are still available as empty boxes and the
properties can be edited.

In order to do this you must build it as a plugin and then include the keyword designersupported into a qmldir file in the same folder your plugin shared object/dll is placed. This is a whitelist and Qt Creator’s puppet will trust your code, be sure not to make long operations or crash, or you will crash the puppet and make the designer useless.

---

Old and outdated answer below

Same thing happens to me. This seems to be a bug in QtCreator. I digged into the code of the Rectangle QML item and found no special instructions. So QtCreator must have it hard coded or something.
See this: http://developer.qt.nokia.com/forums/viewthread/2555