我需要一些像素完美的元素,以及其他应该可调整大小的元素,所以我尝试避免布局,只使用锚点。
如果我有一个固定大小的项目作为“主画布”,我可以为锚定目标做任何必要的事情。但是,它不适用于主窗口。如果我有一个锚定到主窗口的项目,则其大小报告为零
ApplicationWindow
{
id: mainWindow
width: 1024
height: 768
minimumWidth: 800
minimumHeight: 480
Component.onCompleted: { console.log("mainWindow width: " + width) }
Item
{
id: topLevelItem
anchors.fill: parent
Component.onCompleted: { console.log("topLevelItem width: " + width) }
}
}
有趣的是,topLevelItem
的宽度打印为0
,而mainWindow
的宽度打印为1024
。
我添加了一些元素,现在它变得很奇怪了:
ApplicationWindow
{
id: mainWindow
width: 1024
height: 768
minimumWidth: 800
minimumHeight: 480
Component.onCompleted: { console.log("mainWindow width: " + width) }
Item
{
id: topLevelItem
anchors.fill: parent
Component.onCompleted: { console.log("topLevelItem width: " + width) }
Rectangle
{
id: red
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
width: 100
color: "#FF0000"
Component.onCompleted: { console.log("red width: " + width) }
}
Rectangle
{
id: green
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: red.right
anchors.right: blue.left
color: "#00FF00"
Component.onCompleted: { console.log("green width: " + width) }
}
Rectangle
{
id: blue
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: parent.right
width: 50
color: "#0000FF"
Component.onCompleted: { console.log("blue width: " + width) }
}
}
}
一切都按原样显示。左边有一个100 px的垂直红条,右边有一个50 px的垂直蓝条,其余的都是绿色。
令人惊讶的是,尺寸错误:
qml: topLevelItem width: 0
qml: blue width: 50
qml: green width: -150
qml: red width: 100
qml: mainWindow width: 1024
除了mainWindow
之外,所有内容的高度都报告为零。
我需要访问大小,特别是中间区域的大小,因为它必须影响将放置哪种其他元素,具体取决于可用空间。
这种奇怪行为的原因是什么,我做错了什么?如何正确访问中间矩形的大小?
答案 0 :(得分:2)
QML是一种声明性语言,这意味着如果你试图过分依赖某些事物的评估顺序,你就会发现自己正在与它作斗争。如果您在width
更改时打印出topLevelItem
,您会发现它最终是正确的:
import QtQuick 2.7
import QtQuick.Controls 1.0
ApplicationWindow {
id: mainWindow
width: 1024
height: 768
minimumWidth: 800
minimumHeight: 480
visible: true
Component.onCompleted: console.log("mainWindow width: " + width)
Item {
id: topLevelItem
anchors.fill: parent
onWidthChanged: print("topLevelItem width: " + width)
Component.onCompleted: console.log("topLevelItem width: " + width)
}
}
输出:
qml: topLevelItem width: 0
qml: mainWindow width: 1024
qml: topLevelItem width: 1024
我不确定究竟会发生什么,但可能是窗口首先得到它的大小,然后告诉contentItem
它可以开始布置它的项目并给它们大小。这是异步发生的,也是在某些情况下不应依赖命令式代码的原因之一。
值得指出的是,在使用布局时,你可以拥有像素完美的项目和可调整大小的项目;使用例如<{1}}和Layout.minimumWidth
强制使用某些尺寸。