带有img标签和环绕模式的Qml文本

Question

当我设置wrapMode然后在Text组件中使用html标签时，我发现了非常奇怪的行为。你可以尝试这个例子：

Text {
    id: text
    height: 32
    width: 100
    text: "<img width=\"32\" height=\"32\" align=\"middle\" src=\"http://vk.com/images/emoji/D83DDE0E.png\">"
    wrapMode: Text.WordWrap
}
Button {
    anchors.top: text.bottom
    text: "push"
    onClicked: {
        text.text = text.text + "<img width=\"32\" height=\"32\" align=\"middle\" src=\"http://vk.com/images/emoji/D83DDE0E.png\">"
    }
}

如果您使用此代码启动应用并等到从网络加载图片，请点击＆＃34;推送＆＃34;按钮2次，你会看到所有图像消失！但是，如果你删除＆＃34; wrapMode：Text.WordWrap＆＃34;当图像尺寸变得更宽时，图像不会消失。

那么我该如何解决呢？我需要设置宽度和自动换行模式，但是我还需要在Text组件

中使用html标签

Answer 1

您可以尝试保持文字的宽度以适应其内容吗？

Text {
    id: text
    height: 32

    // fit width to contentWidth
    width: contentWidth

    text: "<img width=\"32\" height=\"32\" align=\"middle\" src=\"http://vk.com/images/emoji/D83DDE0E.png\">"

    // Text.WordWrap is not needed.
    //wrapMode: Text.WordWrap
}