QML - 无法在“完成时"中获得宽度、高度等； [英] QML - Not able to get width,height etc in "On Completed"

问题描述

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

I need to get width and height of a Rectangle in Component.OnCompleted handler but if i print the same i am getting some unknown values, Following is the code:

- 添加了更多代码.

- Added more code.

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中获取宽度、高度?

How To get width, height in onCompleted?

推荐答案

好的，我再试试看:
你的问题是一种误解，隐藏在parent后面.

Ok, I'll try to start again:
Your problem is a misconception, what hides behind 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
    }
}

这里假设 someRect 的 parent 是 appWindow，因此，parent.width = appWindow.width = 600.这是错误的

Here you assume, parent for someRect is appWindow, and therefor, parent.width = appWindow.width = 600. This is wrong

someRect 的父对象不能是 appWindow，因为 appWindow 不是 Item 类型.其实someRect.parent === appWindow.contentItem，所以width: parent.width =>宽度:appWindow.contentItem.width.

The parent of someRect can't be appWindow, as appWindow is not of type Item. In fact, someRect.parent === appWindow.contentItem, so width: parent.width => width: appWindow.contentItem.width.

问题是，contentItem的宽度在创建时是0，只有在创建后才会重新调整为appWindow.width.

The problem is, that the width of the contentItem is 0 when created, and will reseized to appWindow.width only after creation.

这意味着，someRect.width 也是 0 直到 appWindow.contentItem 的宽度被调整为 600 - 在 Component.onCompleted 执行之前不会发生.

This means, that someRect.width is also 0 until the width of appWindow.contentItem has been resized to 600 - which won't happen until Component.onCompleted is executed.

解决方案是，缩短对 appWindow.contentItem 宽度的依赖，因为最终值从一开始就可用，在属性 appWindow.width.

The solution is, to shortcut the dependency on a width of appWindow.contentItem, as the final value is available from the start, in the property 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.

Here, the height will be set right from the start, while the width will change only as soon as appWindow.contentItem is being resized. So it is better to follow the way, I used for the height.

有许多 QML 组件，但它的父组件可能不在，看起来如何.对于自定义组件，例如所有使用 默认属性别名 将子项"推入嵌套的 Item 的组件.

There are many QML Components, where the parent might not be, what it seems. For custom Components that are, e.g. all Components that use default property alias to push "children" into nested Items.

这篇关于QML - 无法在“完成时"中获得宽度、高度等；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！