着陆页按钮组织

Question

我正在使用模板创建一个使用QT Creator和QML的应用程序，我希望创建一个登陆页面，允许用户选择哪个"页面";他们想通过点击图标导航到。

我已经想出了如何在登陆页上放置一个按钮，并让它打开另一个页面。但是，我使用按钮的x和y位置，当窗口大小改变时，它不能正确缩放。

最终，我试图在登陆页上以一种正确缩放的方式放置6个按钮。

我已经附上了我理想的着陆页设计的图像，并附上了我已经拥有的代码。

我希望我能解释得足够好。如果我能说明什么，请告诉我。

import QtQuick 2.2
import QtQuick 2.6
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.4

import "components" as Components
//BACKGROUND COLOR
Rectangle {
signal signInClicked(string tourId)
color: "#242424"
AnimatedImage {
anchors.fill: parent
source: app.landingpageBackground
fillMode: Image.PreserveAspectCrop
visible: source > ""
}
Rectangle {
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.0; color: "#00000000";}
GradientStop { position: 1.0; color: "#00000000";}
}
}
//TITLE TEXT
Text {
id: titleText
anchors {
left: parent.left
right: parent.right
top: parent.top
topMargin: app.height/10
}
font.family: app.customTitleFont.name
text: app.info.title
font {
pointSize: 60
pointSize: app.titleFontSize * 1.4
}
color: "#00000000"
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.Wrap
}
Button {
id: signInButton
anchors {
horizontalCenter: parent.horizontalCenter
bottom: parent.bottom
bottomMargin: 60 * app.scaleFactor
}
opacity: 0.0
style: ButtonStyle {
id: btnStyle
property real width: parent.width
label: Text {
id: lbl
text: signInButton.text
anchors.centerIn: parent
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
width: parent.width
maximumLineCount: 2
elide: Text.ElideRight
wrapMode: Text.WordWrap
color: app.titleColor
font.family: app.customTextFont.name
font.pointSize: app.baseFontSize
}
background: Rectangle {
color: Qt.darker(app.headerBackgroundColor, 1.2)
border.color: app.titleColor
radius: app.scaleFactor * 2
}
}
height: implicitHeight < app.units(56) ? app.units(56) : undefined // set minHeight = 64, otherwise let it scale by content height which is the default behavior
width: Math.min(0.5 * parent.width, app.units(250))
text: qsTr("Let's Play!")
MouseArea{
anchors.fill: parent
onClicked: {
signInClicked("");
}
}
NumberAnimation{
id: signInButtonAnimation
target: signInButton
running: false
properties: "opacity"
from: 0.0
to: 1.0
easing.type: Easing.InQuad
duration: 1000
}
}
AboutPage {
id: aboutPage
}
NewsAndUpdates {
id: newsPage
}
ProgramsPage {
id: programsPage
}
Connections {
target: app
onUrlParametersChanged: {
if (app.urlParameters.hasOwnProperty("appid")) {
signInClicked(app.urlParameters.appid)
}
}
}
Component.onCompleted: {
signInButtonAnimation.start()
}
}

Answer 1

我想这份文件应该能帮到你。你还没有很好地定义你想要什么，但是我会给你看一些例子，这样你就可以从中得到你需要的东西。

QML有"定位器"的概念。和";layouts"。定位器帮助你在屏幕上整齐地自动定位你的对象。布局也尝试这样做，但也可以拉伸你的对象来填充可用空间。

行:

你可以把你所有的按钮排成一行，并水平居中。

Row {
anchors.horizontalCenter: parent.horizontalCenter
Button { id: btn1 }
Button { id: btn2 }
...
}

网格:

类似地，Grid是一个定位器，它将对象排列成一个网格:

Grid {
anchors.horizontalCenter: parent.horizontalCenter
columns: 3
Button { id: btn1 }
Button { id: btn2 }
...
}

GridLayout:

GridLayout就像Grid，但它也可以调整对象的大小来填充空间。我的观点是布局可以做更多的事情，但它们通常使用起来更棘手。在这个例子中，第一个按钮应该是一个固定的大小，而第二个按钮应该填充剩余的宽度。

GridLayout {
anchors.fill: parent
rows: 2
Button { id: btn1; Layout.preferredWidth: 200 }
Button { id: btn2; Layout.fillWidth: true}
...
}