QML - 无法获得宽度，高度等在“完成”

Question

我需要获得一个矩形的宽度和高度在Component.OnCompleted处理程序，但如果我打印相同我得到一些未知的值，以下是代码：

[EDIT-1] - 增加了更多的代码。

import QtQuick 2.6 
import QtQuick.Controls 2.2 
import QtQuick.Window 2.3 

ApplicationWindow { 
    id: appWindow 
    visible: true 
    width: 600 
    height: 400 
    title: qsTr("test") 
    flags: Qt.Window | Qt.FramelessWindowHint 

    Rectangle{ 
     id:rectParent 
     width:parent.width * 0.75 
     height: parent.height * 0.70 
     Rectangle{ 
      id:rectChild 
      width:parent.width * 0.75 
      height: parent.height * 0.70 
      Component.onCompleted: { 
       console.log("Width=",width) //prints "0" . 
      } 
     } 
    } 
} 

如何获得宽度，高度onCompleted？

Answer 1

好吧，我会尝试再次启动：
你的问题是一个误解，什么隐藏背后parent。

import QtQuick 2.6 
import QtQuick.Controls 2.0 
ApplicationWindow { 
    id: appWindow 
    width: 600 
    height: 400 
    visible: true 
    Rectangle { 
     id: someRect 
     width: parent.width * 0.7 
     heigth: parent.height * 0.7 
    } 
} 

在这里，你承担，parent为someRect为appWindow，为此和，parent.width = appWindow.width = 600。 这是错误

的someRect父不能appWindow，为appWindow是Item类型的不行。其实someRect.parent === appWindow.contentItem，所以width: parent.width => width: appWindow.contentItem.width。

问题是，创建时contentItem的宽度为0，并且只有在创建后才会重新设置为appWindow.width。

这意味着，someRect.width也是0直到appWindow.contentItem宽度已被调整到600 - 直到执行Component.onCompleted这将不会发生。

的解决方案是，到快捷依赖上的appWindow.contentItem的宽度，作为最终的值可从一开始，在属性appWindow.width。

让我们来看看另一个例子：

import QtQuick 2.6 
import QtQuick.Controls 2.0 
ApplicationWindow { 
    id: appWindow 
    width: 600 
    height: 400 
    visible: true 
    Rectangle { 
     id: someRect 
     width: parent.width * 0.7 // depends on appWindow.contentItem.width -> initally 0, changing soon after 
     heigth: appWindow.height * 0.7 // depends on appWindow.height -> initially 400. 
     Component.onCompleted: console.log('someRect:', width, height) // prints: "someRect: 0 280" 
     Rectangle { 
      id: someOtherRect 
      width: parent.width * 0.7 // depends on someRect.width which is initally 0 as it depends on appWindow.contentItem.width 
      height: parent.height * 0.7 // depends on someRect.height which is initally 400 * 0.7 
      Component.onCompleted: console.log('someOtherRect:', width, height) // prints "someOtherRect: 0, 196" 
     } 
    } 
} 

这里，高度会从一开始就被设定，而宽度只有尽快appWindow.contentItem正在调整改变。所以最好遵循这个方法，我用于height。

有很多QML组件，其中父可能不是，看起来像什么。对于例如自定义组件所有使用default property alias将“children”推入嵌套Item的组件。

Answer 2

parent的项目，直接嵌套在窗口中的不是窗口，而是窗口的contentItem。

试试这个：

Rectangle{ 
     id:rect 
     width: appWindow.width * 0.75 
     height: appWindow.height * 0.70 
} 

这同样适用于你的“完整的代码”：

Rectangle{ 
     id:rectParent 
     width:appWindow.width * 0.75 
     height: appWindow.height * 0.70 
     Rectangle{ 
      id:rectChild 
      width:parent.width * 0.75 
      height: parent.height * 0.70 
      Component.onCompleted: { 
       console.log("Width=",width) //prints "Width= 337.5" 
      } 
     } 
    } 

可以在第二矩形使用parent，因为其父将是第一个矩形，但由于第一个嵌套在窗口内部，因此需要引用窗口而不是其父窗口来获取属性大小。