我正在使用Qt 5.7开发某些软件,并且使用了简单的Rectangle,其中包含自定义Button
和Text:
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无关?这是问题的屏幕截图:
答案 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
}