在 qt 或 qml 中搜索字符串突出显示

Question

我有一个用例，在 TextField（Qml 组件）中输入的文本应突出显示列表视图内容中匹配的所有文本。

我浏览了很多博客，在每个博客中我都只能看到片段代码。但不是完整的用法，所以我找不到任何合适的解决方案。任何人都可以帮我提供示例工作示例吗？

我已附上我所期望的示例输出

Answer 1

使用

Text

作为委托的简单示例：

ColumnLayout
{
    anchors.fill: parent
    spacing: 5
    TextField {
        id: input
        Layout.preferredHeight: 30
        Layout.fillWidth: true
    }

    ListView {
        id: list
        Layout.fillHeight: true
        Layout.fillWidth: true
        model: ["aaaa bbbb cccc","dddd aaaa bbbb","cccc bbbb eeee"]
        delegate: Text {
            property string origText: modelData
            text: list.hightlightText(origText)
        }

        function hightlightText(txt)
        {
            var str = input.text;
            var pos = txt.indexOf(str);
            if(pos !== (-1))
            {
                return txt.replace(str,"<font color='#FF0000'>" + str + "</font>")
            }

            return txt;
        }
    }
}

您可以使用 HTML 标签的支持的子集来设置选择的样式。

Answer 2

今天无意中发现了这个帖子。我需要实现类似于穆罕默德所要求的目标。这是一种实现方法。它可以轻松扩展，例如在一篇文本中显示多个突出显示。

texthighlightresolver.h

#ifndef TEXTHIGHLIGHTRESOLVER_H
#define TEXTHIGHLIGHTRESOLVER_H

#include <QFont>
#include <QFontMetrics>
#include <QObject>
#include <QString>
#include <memory>

class TextHighlightResolver : public QObject
{
    Q_OBJECT
    Q_PROPERTY(QString sourceText READ getSourceText WRITE setSourceText NOTIFY sourceTextChanged)
    Q_PROPERTY(QString highlightText READ getHighlightText WRITE setHighlightText NOTIFY
                   highlightTextChanged)
    Q_PROPERTY(QFont font READ getFont WRITE setFont NOTIFY fontChanged)
    Q_PROPERTY(bool highlightVisible READ getHighlightVisible NOTIFY highlightVisibleChanged)
    Q_PROPERTY(QRect highlightRect READ getHighlightRect NOTIFY highlightRectChanged)

public:
    explicit TextHighlightResolver(QObject *parent = nullptr);

    QString getHighlightText() const;
    void setHighlightText(const QString &newHighlightText);

    QFont getFont() const;
    void setFont(const QFont &newFont);

    bool getHighlightVisible() const;

    QString getSourceText() const;
    void setSourceText(const QString &newSourceText);

    QRect getHighlightRect() const;

signals:
    void highlightTextChanged();
    void fontChanged();
    void highlightVisibleChanged();
    void sourceTextChanged();
    void highlightRectChanged();

private:
    void setHighlightingVisible(bool visible);
    void updateHighlighting();

    QString m_highlightText;
    QFont m_font;
    std::unique_ptr<QFontMetrics> m_metrics;
    bool m_highlightVisible{false};
    QString m_sourceText;
    QRect m_highlightRect;
};

#endif // TEXTHIGHLIGHTRESOLVER_H

文本高亮解析器.cpp

#include "texthighlightresolver.h"

TextHighlightResolver::TextHighlightResolver(QObject *parent)
    : QObject{parent}
    , m_metrics{std::make_unique<QFontMetrics>(m_font)}
{
}

QString TextHighlightResolver::getHighlightText() const
{
    return m_highlightText;
}

void TextHighlightResolver::setHighlightText(const QString& newHighlightText)
{
    if (m_highlightText == newHighlightText)
        return;
    m_highlightText = newHighlightText;
    updateHighlighting();
    emit highlightTextChanged();
}

QFont TextHighlightResolver::getFont() const
{
    return m_font;
}

void TextHighlightResolver::setFont(const QFont &newFont)
{
    if (m_font == newFont)
        return;
    m_font = newFont;
    m_metrics = std::make_unique<QFontMetrics>(m_font);
    emit fontChanged();
}

bool TextHighlightResolver::getHighlightVisible() const
{
    return m_highlightVisible;
}

void TextHighlightResolver::setHighlightingVisible(bool visible)
{
    if (m_highlightVisible == visible)
        return;
    m_highlightVisible = visible;
    emit highlightVisibleChanged();
}

void TextHighlightResolver::updateHighlighting()
{
    if (m_sourceText.isEmpty() || m_highlightText.isEmpty()) {
        setHighlightingVisible(false);
        return;
    }

    const auto index = m_sourceText.indexOf(m_highlightText);

    if (index == -1) {
        setHighlightingVisible(false);
        return;
    }

    const auto start = m_sourceText.left(index);

    m_highlightRect = QRect{0,
                            0,
                            m_metrics->horizontalAdvance(m_highlightText),
                            m_metrics->height()};

    m_highlightRect.translate(m_metrics->horizontalAdvance(start), 0);

    setHighlightingVisible(true);
    emit highlightRectChanged();
}

QString TextHighlightResolver::getSourceText() const
{
    return m_sourceText;
}

void TextHighlightResolver::setSourceText(const QString &newSourceText)
{
    if (m_sourceText == newSourceText)
        return;
    m_sourceText = newSourceText;
    updateHighlighting();
    emit sourceTextChanged();
}

QRect TextHighlightResolver::getHighlightRect() const
{
    return m_highlightRect;
}

main.cpp 中的某处

qmlRegisterType<TextHighlightResolver>("components.texthighlight",
                                       1,
                                       0,
                                       "TextHighlightResolver");

main.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import components.texthighlight 1.0

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

    ColumnLayout {
        anchors.centerIn: parent

        TextField {
            id: input
        }

        Text {
            id: txt
            text: "The quick brown fox jumps over the lazy dog"

            Rectangle {
                visible: highlight.highlightVisible
                color: "lime"
                radius: 3
                border {
                    width: 1
                    color: "grey"
                }

                TextHighlightResolver {
                    id: highlight
                    font: txt.font
                    sourceText: txt.text
                    highlightText: input.text
                }

                width: highlight.highlightRect.width
                height: highlight.highlightRect.height
                x: highlight.highlightRect.x
                z: -1
            }
        }
    }
}