web-dev-qa-db-ja.com

Qtでアイテムビューにリッチ（html）テキストを表示させる方法

モデルにQt :: DisplayRoleの次の文字列を持つアイテムがあるとします。

<span>blah-blah <b>some text</b> other blah</span>

QTreeView（実際には任意のアイテムビュー）でリッチテキストのようにレンダリングしたいのですが。代わりに、アイテムビューはデフォルトで純粋なテキストのようにレンダリングします。目的のレンダリングを実現するにはどうすればよいですか？

実際、これは検索結果モデルです。ユーザーがテキストを入力すると、一部のドキュメントがそのテキストに対して検索され、ユーザーに検索結果が表示されます。検索される単語は、周囲のテキストよりも太字である必要があります。

qtrenderingrichtextqtreeviewqlistview
47
Anthony Serdyukov

私の答えは主に@serge_gubenkoの答えに触発されています。ただし、コードが私のアプリケーションで最終的に役立つように、いくつかの改善が行われました。

class HtmlDelegate : public QStyledItemDelegate
{
protected:
    void Paint ( QPainter * Painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const;
    QSize sizeHint ( const QStyleOptionViewItem & option, const QModelIndex & index ) const;
};

void HtmlDelegate::Paint(QPainter *Painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    QStyleOptionViewItemV4 optionV4 = option;
    initStyleOption(&optionV4, index);

    QStyle *style = optionV4.widget? optionV4.widget->style() : QApplication::style();

    QTextDocument doc;
    doc.setHtml(optionV4.text);

    /// Painting item without text
    optionV4.text = QString();
    style->drawControl(QStyle::CE_ItemViewItem, &optionV4, Painter);

    QAbstractTextDocumentLayout::PaintContext ctx;

    // Highlighting text if item is selected
    if (optionV4.state & QStyle::State_Selected)
        ctx.palette.setColor(QPalette::Text, optionV4.palette.color(QPalette::Active, QPalette::HighlightedText));

    QRect textRect = style->subElementRect(QStyle::SE_ItemViewItemText, &optionV4);
    Painter->save();
    Painter->translate(textRect.topLeft());
    Painter->setClipRect(textRect.translated(-textRect.topLeft()));
    doc.documentLayout()->draw(Painter, ctx);
    Painter->restore();
}

QSize HtmlDelegate::sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const
{
    QStyleOptionViewItemV4 optionV4 = option;
    initStyleOption(&optionV4, index);

    QTextDocument doc;
    doc.setHtml(optionV4.text);
    doc.setTextWidth(optionV4.rect.width());
    return QSize(doc.idealWidth(), doc.size().height());
}
21
Anthony Serdyukov

ツリービューの setItemDelegate メソッドを使用して、ツリービューアイテムのカスタムペインタをセットアップできると思います。デリゲートのPaintメソッドでは、QTextDocumentを使用してアイテムのテキストをHTMLとして読み込み、レンダリングできます。以下の例がうまくいくかどうかを確認してください：

ツリービューの初期化：

...
    // create simple model for a tree view
    QStandardItemModel *model = new QStandardItemModel();
    QModelIndex parentItem;
    for (int i = 0; i < 4; ++i)
    {
        parentItem = model->index(0, 0, parentItem);
        model->insertRows(0, 1, parentItem);
        model->insertColumns(0, 1, parentItem);
        QModelIndex index = model->index(0, 0, parentItem);
        model->setData(index, "<span>blah-blah <b>some text</b> other blah</span>");
    }
    // create custom delegate
    HTMLDelegate* delegate = new HTMLDelegate();
    // set model and delegate to the treeview object
    ui->treeView->setModel(model);
    ui->treeView->setItemDelegate(delegate);
...

カスタムデリゲートの実装

class HTMLDelegate : public QStyledItemDelegate
{
protected:
    void Paint ( QPainter * Painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const;
    QSize sizeHint ( const QStyleOptionViewItem & option, const QModelIndex & index ) const;
};

void HTMLDelegate::Paint(QPainter* Painter, const QStyleOptionViewItem & option, const QModelIndex &index) const
{
    QStyleOptionViewItemV4 options = option;
    initStyleOption(&options, index);

    Painter->save();

    QTextDocument doc;
    doc.setHtml(options.text);

    options.text = "";
    options.widget->style()->drawControl(QStyle::CE_ItemViewItem, &options, Painter);

    Painter->translate(options.rect.left(), options.rect.top());
    QRect clip(0, 0, options.rect.width(), options.rect.height());
    doc.drawContents(Painter, clip);

    Painter->restore();
}

QSize HTMLDelegate::sizeHint ( const QStyleOptionViewItem & option, const QModelIndex & index ) const
{
    QStyleOptionViewItemV4 options = option;
    initStyleOption(&options, index);

    QTextDocument doc;
    doc.setHtml(options.text);
    doc.setTextWidth(options.rect.width());
    return QSize(doc.idealWidth(), doc.size().height());
}

よろしくお願いします

update0：HTMLDelegateを変更して、選択したアイテムのアイコンを表示し、ペンの色を変更します

void HTMLDelegate::Paint(QPainter* Painter, const QStyleOptionViewItem & option, const QModelIndex &index) const
{
    QStyleOptionViewItemV4 options = option;
    initStyleOption(&options, index);

    Painter->save();

    QTextDocument doc;
    doc.setHtml(options.text);

    options.text = "";
    options.widget->style()->drawControl(QStyle::CE_ItemViewItem, &options, Painter);

    // shift text right to make icon visible
    QSize iconSize = options.icon.actualSize(options.rect.size());
    Painter->translate(options.rect.left()+iconSize.width(), options.rect.top());
    QRect clip(0, 0, options.rect.width()+iconSize.width(), options.rect.height());

    //doc.drawContents(Painter, clip);

    Painter->setClipRect(clip);
    QAbstractTextDocumentLayout::PaintContext ctx;
    // set text color to red for selected item
    if (option.state & QStyle::State_Selected)
        ctx.palette.setColor(QPalette::Text, QColor("red"));
    ctx.clip = clip;
    doc.documentLayout()->draw(Painter, ctx);

    Painter->restore();
}
36
serge_gubenko

これは私のために働いた上記の答えの組み合わせのPyQt変換です。これはPySideでもほぼ同じように機能することを期待しています。

from PyQt4 import QtCore, QtGui

class HTMLDelegate(QtGui.QStyledItemDelegate):
    def Paint(self, Painter, option, index):
        options = QtGui.QStyleOptionViewItemV4(option)
        self.initStyleOption(options,index)

        style = QtGui.QApplication.style() if options.widget is None else options.widget.style()

        doc = QtGui.QTextDocument()
        doc.setHtml(options.text)

        options.text = ""
        style.drawControl(QtGui.QStyle.CE_ItemViewItem, options, Painter);

        ctx = QtGui.QAbstractTextDocumentLayout.PaintContext()

        # Highlighting text if item is selected
        #if (optionV4.state & QStyle::State_Selected)
            #ctx.palette.setColor(QPalette::Text, optionV4.palette.color(QPalette::Active, QPalette::HighlightedText));

        textRect = style.subElementRect(QtGui.QStyle.SE_ItemViewItemText, options)
        Painter.save()
        Painter.translate(textRect.topLeft())
        Painter.setClipRect(textRect.translated(-textRect.topLeft()))
        doc.documentLayout().draw(Painter, ctx)

        Painter.restore()

    def sizeHint(self, option, index):
        options = QtGui.QStyleOptionViewItemV4(option)
        self.initStyleOption(options,index)

        doc = QtGui.QTextDocument()
        doc.setHtml(options.text)
        doc.setTextWidth(options.rect.width())
        return QtCore.QSize(doc.idealWidth(), doc.size().height())
15
jbmohler

これはPySideにあります。多くのカスタム描画を行うのではなく、QPainterをQLabelに渡して、それ自体を描画します。他の回答から借りたコードを強調表示します。

from PySide import QtGui

class TaskDelegate(QtGui.QItemDelegate):
    #https://doc.qt.io/archives/qt-4.7/qitemdelegate.html#drawDisplay
    #https://doc.qt.io/archives/qt-4.7/qwidget.html#render
    def drawDisplay(self, Painter, option, rect, text):
        label = QtGui.QLabel(text)

        if option.state & QtGui.QStyle.State_Selected:
            p = option.palette
            p.setColor(QtGui.QPalette.WindowText, p.color(QtGui.QPalette.Active, QtGui.QPalette.HighlightedText))

            label.setPalette(p)

        label.render(Painter, rect.topLeft(), renderFlags=QtGui.QWidget.DrawChildren)
5
Pepijn