QML：居中变量文本和图像

我需要在一个大框（绿色框）中水平居中一个可变长度的文本（红色框）和一个图像（黄色框）。如果文本与方框不符，则应将其包裹起来

现行守则：

Item {
    id: bigBox
    x: 255
    y: 0
    width: 800
    height: 100
    Image {
        id: imageBox
        source: "image.png"
        width: 52
        height: 46
        anchors.left: parent.left
        anchors.leftMargin: 12
        anchors.verticalCenter: parent.verticalCenter
        horizontalAlignment: Image.AlignLeft
        verticalAlignment: Image.AlignVCenter
        fillMode: Image.Pad
    }

    Text {
        id: textBox
        anchors.left: symbol.right
        anchors.leftMargin: 12
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        text: qsTr("heading text")
        font.pixelSize: 36
        font.bold: true
        horizontalAlignment: Text.AlignCenter
    }
}

更新：

实际运行的代码和显示问题的真实屏幕截图：

import QtQuick 2.0

Rectangle {
    id: mask
    x: 0
    y: 0
    width: 800
    height: 430
    color: "#FFFFFF"
    property int pageState: 0
    Rectangle {
        x: 0
        y: 0
        width: 111
        height: 100
        color: "#0000FF"
    }
    Item {
        id: whitespace
        x: 117
        y: 0
        width: 800-x
        height: 100
        Row {
            anchors.centerIn: parent
            Image {
                id: symbol
                source: "../img/pepper.png"
                width: 52
                height: 46
                anchors.verticalCenter: parent.verticalCenter
                fillMode: Image.Pad
            }
            Text {
                id: heading
                property var texts: ["Active Blabla","Active Blaaaaaaah Blaaaah ","Active Blabla and Blaaaaaaah Blaaaah"]
                anchors.verticalCenter: parent.verticalCenter
                color: "#333191"
                text: texts[pageState]
                font.family: "Liberation Sans"
                font.pixelSize: 36
                font.bold: true
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                textFormat: Text.PlainText
                width: Math.min(150,contentWidth)
            }
        }
    }
    Rectangle {
        id: stage
        x: 0
        y: 106
        width: parent.width
        height: parent.height-y
        color: "#FFFF00"
    }
    Timer {
        interval: 1000 // milliseconds
        triggeredOnStart: true
        repeat: true
        running: true
        onTriggered: {
            pageState=(pageState+1)%3;
        }
    }
}

右上角的白色区域是第一张图片中的绿色框。计时器只是在这三个文本中运行，就像真正的应用程序一样

---

将Math.min（）的第一个参数更改为600不会改变任何东西。

我的一套解决该问题的方法：

import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.2

Item {
    id: bigBox

    width: 800
    height: 100

    Row {
        anchors.centerIn: parent

        Image {
            anchors.verticalCenter: parent.verticalCenter

            source: "blue.png"
        }

        Text {
            anchors.verticalCenter: parent.verticalCenter

            // maximum width of the text
            width: Math.min(150, contentWidth)

            text: qsTr("heading")
            wrapMode: Text.WordWrap
            horizontalAlignment: Text.AlignHCenter
        }
    }
}

Item {
    // ...
    Text {
        function escapeHTML(text)
        {
            return text.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");
        }

        function toHTML(imageUrl,text)
        {
            var textlines=escapeHTML(text).replace(/\r?\n/,"\n").split("\n");
            var retval="<center>";
            retval=retval+'<table><tr>';
            if (imageUrl!="") {
                retval=retval+'<td rowspan="'+(textlines.length)+'"><img src="'+imageUrl+'"></td>';
                retval=retval+'<td rowspan="'+(textlines.length)+'">&nbsp;</td>';
            }
            for (var i=0; i<textlines.length; i++) {
                if (i>0) {
                    retval=retval+"<tr>";
                }
                retval=retval+'<td>'+textlines[i]+'</td></tr>';
            }
            retval=retval+'</table>';
            retval=retval+"</center>";
            return retval;
        }

        anchors.fill: parent
        verticalAlignment: Text.AlignVCenter
        textFormat: Text.RichText
        text: toHtml("../img/pepper.png",qsTr("heading"))
    }
}

项目{
// ...
正文{
函数escapeHTML（文本）
{
返回文本。替换（//&/g，“&；”）。替换（//g，”）。替换（//“/g，”）；
}
函数toHTML（图像URL、文本）
{
var textlines=escapeHTML（text）.replace（/\r？\n/，“\n”）.split（“\n”）；
var retval=“”；
retval=retval+''；
如果（imageUrl！=“”）{
retval=retval+''；
retval=retval+''；
}
对于（var i=0；i0）{
retval=retval+“”；
}
retval=retval+''+文本行[i]+''；
}
retval=retval+''；
retval=retval+“”；
返回返回；
}
锚定。填充：父级
垂直对齐：Text.AlignVCenter
Text格式：Text.RichText
文本：toHtml（“../img/pepper.png”，qsTr（“标题”））
}
}

• 将文本居中于可用空间，但不居中于图像 （它保持在左边-臭虫！）

• 可以通过
  居中，并且它可以包含 形象
• 包装无法按预期工作，因此已翻译文本返回 by

  qsTr（）

  必须在正确的位置包含换行符

• toHTML（）

  在换行符处拆分，并由此生成表行
• 图像需要具有

  行span

  的表格单元格，否则图像相对于文本的位置过高
• 最后，

  verticalAlignment:Text.AlignVCenter

  将所有这些内容垂直居中放置——幸好我不需要表格边框。（如果您感到无聊，请将

  border=1

  添加到
  标记。）

---

不，由

Text.RichText

支持的HTML和CSS子集不支持垂直对齐。渲染引擎的工作方式与古代浏览器类似，您必须像1996年一样堆叠黑客和变通方法。

基本上可以工作，但需要一些微调（问题中省略了一些细节）。谢谢哦，对不起，不，它没有按预期工作。文本太小，并从绿色框的顶部和底部断开。将Math.min中的幻数调整为较大的值会使较短文本的居中位置中断。这就像您使用的是

Math.max

而不是

Math.min

。或者添加红/绿框会改变什么？你能更新代码示例吗？我知道为什么会这样。当文本被更新时，它将被包装为当前宽度，因此contentWidth永远不会变大，宽度的重新计算也永远不会进行。现在想不出一个非黑客的解决方案。。。