Qt / QML：具有内联QML元素的文本

Question

我们正在使用QtQuick / QML构建图形用户界面。 我们有一些来自数据库的动态多行文本，这些文本应显示在应用程序中。 当前，我们正在使用Text元素显示文本。 但是，我们需要一些嵌入在文本中的QML组件。 为此，来自数据库的文本包含占位符，例如::checkbox|1:: ，然后应由程序替换并显示它们。

在HTML中，这很容易，您可以简单地将内联元素与文本混合以产生如下结果：

但是在QML中，这似乎更加困难，因为如果没有足够的空间（文本和容器大小都应该是动态的），则不能将Text元素分成两半。

我们能想到的最好的解决方案是，为每个单词创建一个带有一个Text元素的Flow布局，但这似乎太麻烦了。 将RichText与HTML结合使用并非易事，因为我们确实需要文本中的自定义QML元素。 另外，由于性能原因，我们希望避免使用WebView 。

是否只有QML / C ++才能实现这种复杂的方法？

Answer 1

您可以创建自定义窗口小部件并将其嵌入到QML中： 使用C ++编写QML扩展

Answer 2

我没有尝试在中间放置任何内容，但是我确实尝试在开始处添加标签（并且我可以尝试在末尾添加标签）。

QML的Text具有lineLaidOut信号，可让您缩进文本的第一行。

http://doc.qt.io/qt-5/qml-qtquick-text.html#lineLaidOut-signal

这是我所做的：

Text {      
    text: issue.summary

    onLineLaidOut: {
        if (line.number == 0) {
            var indent = tagRect.width + tagRect.rightMargin
            line.x += indent
            line.width -= indent
        }
    }

    Rectangle {
        id: tagRect
        implicitWidth: padding + tagText.implicitWidth + padding
        implicitHeight: padding + tagText.implicitHeight + padding
        color: "#400"
        property int padding: 2
        property int rightMargin: 8
        radius: 3

        Text {
            id: tagText
            anchors.centerIn: parent
            text: issue.product
            color: "#fff"
        }
    }
}