Question

我正在尝试在包含小部件和两个按钮“打开”和“保存”的应用程序窗口中进行开发。作为输入，我有一个xml文件，其中包含文本和图像。我想在同一个小部件中同时显示文本和图像，应用修改并最终保存它。我的xml文件如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<Stage>
<Item id = "1" Name = "Ensure span is erected">
    <image id = "1" src = "im.png"/>
</Item>
</Stage>

什么样的小部件可以同时显示文本和图像以及如何显示它们？

我只能在Qlabel中显示图像

QPixmap logo;
QByteArray ba;
QFile file("img.txt");
if(file.open(QIODevice::ReadOnly)) {
ba = file.readAll();
}
logo.loadFromData(QByteArray::fromBase64(ba));
ui->label->setPixmap(logo.scaled(ui->label->width(),ui->label->height(),Qt::KeepAspectRatioByExpanding));

请提出任何想法！非常感谢您的帮助。

Answer 1

这是一个小例子。在我的情况下，我会忽略ID。将您的xml转换为html：

release-x.y.z

然后将您需要的html设置为QString MainWindow::HtmlFromXml(const QString &xmlFileName) { QFile file(xmlFileName); if (!file.open(QIODevice::ReadOnly)) { qDebug() << "Cant open file: " << file.errorString(); return ""; } QDomDocument htmlDoc; QDomElement htmlRoot = htmlDoc.createElement("html"); QDomDocument xmlDoc; xmlDoc.setContent(&file); QDomElement xmlRoot = xmlDoc.documentElement(); QDomElement xmlItem = xmlRoot.firstChild().toElement(); while(!xmlItem.isNull()) { //read xml int itemId = xmlItem.attribute("id", "0").toInt(); QString itemName = xmlItem.attribute("Name", ""); QDomElement xmlImg = xmlItem.firstChild().toElement(); QString imgSrc; int imgId = 0; if (!xmlImg.isNull()) { imgSrc = xmlImg.attribute("src", ""); imgId = xmlImg.attribute("id", "0").toInt(); } //create html QDomElement htmlItem = htmlDoc.createElement("p"); QDomElement htmlImg = htmlDoc.createElement("img"); htmlImg.setAttribute("src", imgSrc); QDomElement htmlText = htmlDoc.createElement("p"); QDomText textName = htmlDoc.createTextNode(itemName); htmlText.appendChild(textName); htmlItem.appendChild(htmlImg); htmlItem.appendChild(htmlText); htmlRoot.appendChild(htmlItem); //next xmlItem = xmlItem.nextSibling().toElement(); } htmlDoc.appendChild(htmlRoot); return htmlDoc.toString(); }

QTextEdit

现在您可以在QString strHtml = HtmlFromXml(fileName); ui->textEdit->setHtml(strHtml);中进行编辑。保存之前，您需要从QTextEdit

获取html。

QTextEdit

并将此html转换为xml

QString strHtml = ui->textEdit->toHtml();
QString strXml = XmlFromHtml(strHtml);

然后保存到文本文件中。

注意： QString MainWindow::XmlFromHtml(const QString &strHtml) { QDomDocument xmlDoc; QDomElement xmlRoot = xmlDoc.createElement("Stage"); QDomDocument htmlDoc; htmlDoc.setContent(strHtml); QDomElement htmlRoot = htmlDoc.documentElement(); QDomElement htmlHead = htmlRoot.firstChild().toElement(); QDomElement htmlBody = htmlHead.nextSibling().toElement(); int dummyId = 1; QDomElement htmlItem = htmlBody.firstChild().toElement(); while (!htmlItem.isNull()) { //<img/>text QDomElement htmlImg = htmlItem.firstChild().toElement(); QString imgSrc = htmlImg.attribute("src", ""); htmlItem = htmlItem.nextSibling().toElement(); //move to with text QDomText itemText = htmlItem.firstChild().toText(); //create xml elements QDomElement xmlItem = xmlDoc.createElement("Item"); xmlItem.setAttribute("id", dummyId); xmlItem.setAttribute("Name", itemText.data()); QDomElement xmlImg = xmlDoc.createElement("image"); xmlImg.setAttribute("src", imgSrc); xmlImg.setAttribute("id", dummyId); xmlItem.appendChild(xmlImg); xmlRoot.appendChild(xmlItem); //next htmlItem = htmlItem.nextSibling().toElement(); dummyId++; } xmlDoc.appendChild(xmlRoot); return xmlDoc.toString(); }允许您编辑文本，但是图像有些麻烦。您可以在QTextEdit内部删除或复制/粘贴图像，但是不能从剪贴板外部粘贴图像。这是因为QTextEdit使用QTextEdit文本标签而不是图像进行操作。要在<img/>中编辑图像，您需要编辑QTextEdit实例的文本html。

读取包含文本和图像的xml文件，并将其显示在QtextEdit

1 个答案: