c++ - 如何在QML 的RichText 中使用html 源将图片居中？

Question

我想使用 RichText 在 QML 中将图片居中.我试过 <center>标记和 text-align属性。它们都不起作用。

import QtQuick 2.0
import QtQml.Models 2.1
import QtQuick.Window 2.2
import QtQuick.Controls 1.2


ApplicationWindow{
    width: Screen.width; height: Screen.height; color: "#d5d6d8"
    visible:true
    Rectangle {
        color: "#33cc94"
        width: parent.width; height: parent.height
        id : main

        Flickable {
            id:textArea
            anchors.fill: parent
            contentHeight: textBrowser.height
            contentWidth: textBrowser.width
            enabled: false
            Text {
                id:textBrowser
                textFormat: Text.RichText
               // visible:false
             //   text: "<center><img src=\"Icons/TroopCards/ArchersCard.png\"  /></center>";
                text: "<p style=\"text-align:center\">
                          <img  src=\"Icons/TroopCards/ArchersCard.png\" />
                       </p>
                       <p style=\"text-align:center\">Some text at middle</p>";
            }
        }
    }
}

结果:

如何在 QML 中使用 html 将图像居中？!

Answer 1

如果您需要将某些东西放在 block 的中心，请指定 block 的宽度(和高度)，以便程序可以计算中心位置。例如，将文本 block 的大小设置为 Screen 大小:

Text {
    id:textBrowser
    textFormat: Text.RichText
    width: Screen.width
    height: Screen.height
    text: "<p style=\"text-align:center\"><img src=\"Icons/TroopCards/ArchersCard.png\" /></p>
           <p style=\"text-align:center\">Some text at middle</p>";
}

图像现在位于您窗口的中央(因为您的 ApplicationWindow 具有相同的宽度和高度)。

......不，它没有。也许富文本处理器中存在一些错误，或者它根本不支持富文本中的图像对齐。如果您真的想使用富文本将图像放在文本 block 的中心，这里有一个简单的解决方法:在图像标签前放置一个  (空格字符)。

Text {
    id:textBrowser
    textFormat: Text.RichText
    width: Screen.width
    height: Screen.height
    text: "<p style=\"text-align:center\">&nbsp;<img src=\"Icons/TroopCards/ArchersCard.png\" /></p>
           <p style=\"text-align:center\">Some text at middle</p>";
}

而且图像几乎位于文本 block 的中心。