ApplicationWindowに固定されたアイテムのサイズがゼロの理由は何ですか？

Question

ピクセルで完璧な要素とサイズ変更可能な要素が必要なので、アンカーだけを使ってレイアウトを避けようとします。

「メインキャンバス」として固定サイズのアイテムがある場合は、アンカーで目標に必要なことをすべて実行できます。ただし、メインウィンドウでは機能しません。私はメインウィンドウに固定されているアイテムがある場合mainWindowの幅が正しく1024として印刷されている間、そのサイズは、興味深いことに、topLevelItemの幅は0として印刷されるゼロ

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) } 
    } 
} 

として報告されます。

私はいくつかの要素を追加して、今では奇妙な取得します。それがあるべきよう

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ピクセルの縦の赤いバーがあり、右端に縦50ピクセルの青いバーがあり、残りは緑色で塗りつぶされています。驚くべきことである何

は、サイズが間違っているということです。

qml: topLevelItem width: 0 
qml: blue width: 50 
qml: green width: -150 
qml: red width: 100 
qml: mainWindow width: 1024 

mainWindowを除くすべての高さは、ゼロとして報告されます。

使用可能なスペースによっては、他の要素の種類に影響するため、サイズ、特に中間領域のサイズにアクセスする必要があります。

この奇妙な振る舞いの原因は何か、私は間違ったことをしましたか？中矩形のサイズに正しくアクセスするにはどうすればよいですか？

Answer 1

QMLは宣言型言語であり、特定のものの評価の順序にあまりにも頼りすぎると、自分自身と戦っていることがわかります。あなたがtopLevelItemのwidthを印刷した場合、それが変わると、あなたはそれが最終的に正しいことがわかります。

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およびLayout.maximumWidthを使用して特定のサイズを強制します。