Question

我需要将一个可变长度文本（红色框）和一个图像（黄色框）在一个大框（绿色框）中水平居中。如果文本不适合框，则文本将被包装。

现有代码：

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不会改变任何内容。

Answer 1

我解决这个问题的黑客攻击：

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"))
    }
}

<center>将文本置于可用空间中心，而不是图像（它保持不变 - 虫子！）。
<table>可以<center>为中心，并且可以包含。{ 图像。
环绕不能按预期工作，因此返回翻译后的文本 qsTr()必须在正确的位置包含换行符。
toHTML()在换行符处拆分并从中生成表格行。
图像需要具有rowspan的表格单元格，否则图像相对于文本放置得太高。
最后，verticalAlignment: Text.AlignVCenter将所有这些都垂直居中 - 除了我很幸运不需要的桌边框。（如果您感到无聊，请将border=1添加到<table>标记。）

不，Text.RichText支持的HTML和CSS子集不支持垂直对齐。渲染引擎的行为与古老的浏览器类似，你必须像1996年一样堆叠黑客和变通办法。

Answer 2

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
        }
    }
}

QML：中心变量文本和图像

2 个答案: