将文字放在版面的中心

时间:2019-06-17 07:08:55

标签: qml

我正在使用Qt 5.7开发某些软件,并且使用了简单的Rectangle,其中包含自定义ButtonText

import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3

Window
{
    width: 1024
    height: 768

    visible: true

    Rectangle
    {
        anchors.fill: parent

        color: "#e4e4e4"

        border.width: 0
        border.color: "#e4e4e4"

        radius: 32

        ColumnLayout
        {
            anchors.fill: parent

            spacing: 8

            RowLayout
            {
                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                Layout.fillWidth: true
                Layout.fillHeight: true
                Layout.minimumHeight: parent.height/2
                Layout.preferredHeight: parent.height/2
                Layout.maximumHeight: parent.height/2

                Rectangle
                {
                    id: buttonBack

                    property bool isPressed: false

                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter
                    Layout.minimumWidth: 128
                    Layout.preferredWidth: 128
                    Layout.maximumWidth: 128
                    Layout.minimumHeight: 128
                    Layout.preferredHeight: 128
                    Layout.maximumHeight: 128

                    color: "transparent"

                    Image
                    {
                        anchors.centerIn: parent

                        horizontalAlignment: Image.AlignHCenter
                        verticalAlignment: Image.AlignVCenter

                        fillMode: Image.PreserveAspectFit

                        sourceSize.width: 128
                        sourceSize.height: 128

                        smooth: true

                        antialiasing: true

                        source: (buttonBack.isPressed===true)?"http://icons.iconarchive.com/icons/iconarchive/red-orb-alphabet/256/Letter-A-icon.png"
                                                             :"http://www.iconarchive.com/download/i14559/iconarchive/red-orb-alphabet/Arrow.ico"
                    }   // Image

                    MouseArea
                    {
                        anchors.fill: parent

                        onPressed:
                        {
                            buttonBack.isPressed=true;
                        }   // onPressed

                        onPressAndHold:
                        {

                        }   // onPressAndHold

                        onReleased:
                        {
                            buttonBack.isPressed=false;
                        }   // onReleased

                        onClicked:
                        {
                        }   // onClicked
                    }   // MouseArea
                }   // Rectangle

                Text
                {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.alignment: Qt.AlignHCenter|Qt.AlignVCenter

                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter

                    color: "black"

                    text: qsTr("TEST TEXT")

                    font.pointSize: 24
                }   // Text
            }   // RowLayout
        }   // RowLayout
    }   // Rectangle
}   // Window

问题是文本“ 测试文本”在屏幕中心未水平对齐,因为它具有邻居(按钮)。我如何在水平方向上居中放置此文本,而与邻居Button无关?这是问题的屏幕截图: Text misaligned

1 个答案:

答案 0 :(得分:1)

如果要以绝对位置放置项目,请不要使用布局。改用锚点:

Item {
    anchors.fill: parent
    Rectangle
    {
        anchors.fill: parent
        color: "#e4e4e4"
        border.width: 0
        border.color: "#e4e4e4"
        radius: 32
        ColumnLayout
        {
            anchors.fill: parent
            spacing: 8
            Item {
                Layout.fillWidth: true
                Rectangle
                {
                    id: buttonBack
                    color: "transparent"
                    anchors.fill: parent
                    Image
                    {
                        anchors.left: parent.left
                        anchors.verticalCenter: parent.verticalCenter
                        sourceSize.width: 128
                        sourceSize.height: 128
                        smooth: true
                        antialiasing: true
                        source: (buttonBack.isPressed===true)?"http://icons.iconarchive.com/icons/iconarchive/red-orb-alphabet/256/Letter-A-icon.png"
                                                             :"http://www.iconarchive.com/download/i14559/iconarchive/red-orb-alphabet/Arrow.ico"
                    }   // Image
                }   // Rectangle

                Text
                {
                    anchors.centerIn: parent
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    color: "black"
                    text: qsTr("TEST TEXT")
                    font.pointSize: 24
                }   // Text
            }
        }   // RowLayout
    }   // Rectangle
}

enter image description here