如何在 qml 中设置文本从下到上对齐？

Question

我有一个背景图像 a，我想将文本 从下到上对齐。就像下面显示的图像一样。在我的情况下，背景图像是固定的，我无法旋转它，所以我只是尝试旋转文本！但是，我无法很好地对齐它！

背景图片（无法旋转）

我想要的结果（就像左对齐，居中对齐和旋转-90）

我试过这段代码，但不行！我认为原因是旋转中心！

Text {
            text: name;
            anchors.verticalCenter: parent.verticalCenter;  // Centering text
            anchors.left: parent.left;
            anchors.leftMargin: 18;
            rotation: -90
        }

如果我将背景图像旋转 90 度。然后应用我的代码并旋转内容（背景和文本）会得到很好的结果！但是我无法旋转背景图像！如何在 qml 中设置文本从下到上对齐？

Answer 1

旋转锚定可能难以管理。你可以让它变得简单：

 Rectangle{
    color: "grey"
    width: 50
    height: 300
    Text{
     //1. Place Text box symmetrically below background, edge to edge
        width: parent.height
        height: parent.width
        y:parent.height
        text: "TableA Description 15"
        verticalAlignment: Text.AlignVCenter
     // comment below 2 lines to see how it looks before rotation 
     //2 pivot top left of text box and rotate text -90
        transformOrigin: Item.TopLeft
        rotation: -90
    }
}

Answer 2

Transform 为 QML 项提供更复杂的转换。在您的情况下，请查看下面的演示，它显示 Text 自行旋转 -90 度。并且可以通过设置origin.x origin.y属性来调整旋转点。

Rectangle{
    width: 100; height: 300
    color: "lightblue"
    Text{
        id: test
        text: "TestMe"
        transform: [
            Rotation {
                origin.x: test.paintedWidth/2; origin.y: test.paintedWidth/2; angle: -90
            },
            Translate{
                y: (test.parent.height - test.paintedWidth)/2
            }
        ]
    }
}