QQuickPaintedItem не отображается в конструкторе QML

Question

Я создал класс QQuickPaintedItem, который отвечает за рисование элементов пользовательского интерфейса с помощью переопределенного метода paint (). Компонент находится в Qml, но я не могу увидеть его в конструкторе. Но я могу видеть результат во время выполнения. Я слежу за https://doc.qt.io/qt-5/qtquick-customitems-painteditem-example.html

Ничего не работает, мне действительно нужно видеть вывод в конструкторе qml не во время выполнения.

Как я следую https://doc.qt.io/qt-5/qtquick-customitems-painteditem-example.html вот исходный код для заголовочного файла

class TextBalloon : public QQuickPaintedItem
{
Q_OBJECT
Q_PROPERTY(bool rightAligned READ isRightAligned WRITE setRightAligned NOTIFY rightAlignedChanged)

public:
    TextBalloon(QQuickItem *parent = 0);
    void paint(QPainter *painter);

    bool isRightAligned();
    void setRightAligned(bool rightAligned);

private:
    bool rightAligned;

signals:
    void rightAlignedChanged();
};

и определение

TextBalloon::TextBalloon(QQuickItem *parent)
: QQuickPaintedItem(parent)
, rightAligned(false){}

void TextBalloon::paint(QPainter *painter){
QBrush brush(QColor("#007430"));

painter->setBrush(brush);
painter->setPen(Qt::NoPen);
painter->setRenderHint(QPainter::Antialiasing);

QSizeF itemSize = size();
painter->drawRoundedRect(0, 0, itemSize.width(), itemSize.height() - 10, 10, 10);

if (rightAligned)
{
    const QPointF points[3] = {
        QPointF(itemSize.width() - 10.0, itemSize.height() - 10.0),
        QPointF(itemSize.width() - 20.0, itemSize.height()),
        QPointF(itemSize.width() - 30.0, itemSize.height() - 10.0),
    };
    painter->drawConvexPolygon(points, 3);
}
else
{
    const QPointF points[3] = {
        QPointF(10.0, itemSize.height() - 10.0),
        QPointF(20.0, itemSize.height()),
        QPointF(30.0, itemSize.height() - 10.0),
    };
    painter->drawConvexPolygon(points, 3);
}
}

и вот файл qml

ListModel {
id: balloonModel
ListElement {
    balloonWidth: 200
}
ListElement {
    balloonWidth: 120
}
}

ListView {
anchors.bottom: controls.top
anchors.bottomMargin: 2
anchors.top: parent.top
id: balloonView
delegate: TextBalloon {
    anchors.right: index % 2 == 0 ? undefined : parent.right
    height: 60
    rightAligned: index % 2 == 0 ? false : true
    width: balloonWidth
}
model: balloonModel
spacing: 5
width: parent.width
}

Пожалуйста, помогите мне, мне действительно нужно увидеть нарисованный вывод в qml конструкторе или, пожалуйста, предложите другой способ рисования, с помощью которого я могу увидеть вывод в конструкторе qml. спасибо:)