QMLイメージの表示サイズを調整する

Question

QMLウィンドウにネストされたRowLayoutがあります。内側の行には2つの画像があります。これらの画像のファイル.pngは（意図的に）かなり大きいです。これらの画像にheightプロパティを設定しようとすると、それらの画像が小さくなるように設定されても、大きな画像が描画されます。

所望の外観：

実際の外観：

私は彼らが小さくなるように取得することができた唯一の方法は、sourceSize.height:100代わりのheight:100を設定することです。しかし、これは私が望むものではありません。私は彼らがリロードすることなく上下に拡大縮小できるようにしたい。

画像が含まれている高さがRowLayoutになるようにQMLを修正するにはどうすればよいですか？

import QtQuick 2.7 
import QtQuick.Controls 2.0 
import QtQuick.Layouts 1.3 

ApplicationWindow { 
    width:600; height:300 
    visible:true 

    Rectangle { 
    color:'red' 
    anchors { top:header.bottom; bottom:footer.top; left:parent.left; right:parent.right } 
    } 

    header:RowLayout { 
    id:header 
    spacing:0 
    height:100; width:parent.width 

    RowLayout { 
     id:playcontrol 
     Layout.minimumWidth:200; Layout.maximumWidth:200; Layout.preferredWidth:200 
     height:parent.height 
     Image { 
     // I really want these to take on the height of their row 
     source:'qrc:/img/play.png' 
     width:100; height:100 
     fillMode:Image.PreserveAspectFit; clip:true 
     } 
     Image { 
     source:'qrc:/img/skip.png' 
     width:100; height:100 
     fillMode:Image.PreserveAspectFit; clip:true 
     } 
    } 

    Rectangle { 
     color:'#80CC00CC' 
     Layout.minimumWidth:200 
     Layout.preferredWidth:parent.width*0.7 
     Layout.fillWidth:true; Layout.fillHeight:true 
     height:parent.height 
    } 
    } 

    footer:Rectangle { height:100; color:'blue' } 
} 

Answer 1

レイアウトを使用して、widthまたはアイテムのheightを指定することはありません。代わりにLayoutプロパティを使用してください。レイアウト自体はwidthとheightに設定され、設定したものを効果的に上書きします。

だから、あなたのイメージのために、これはhere文書化されて

Layout.preferredWidth: 100 
Layout.preferredHeight: 100 

で

width:100; height:100 

を交換してください。具体的には、widthとheightは「最終的なフォールバック」としてのみ使用され、期待通りに動作しません。

この問題が発生したコード内の他の場所があります

• playcontrolセットheight: parent.heightは（親の幅と高さを埋めることはdefault behaviour for layoutsあるので、これはとにかく必要ありません）。
• playcontrolレイアウト内のRectangleもheight: parent.heightとなります。