[解決済み] QMLイメージの表示サイズを調整する

質問事項

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

希望する外観 :

実際の外観 :

小さくする方法としては sourceSize.height:100 の代わりに height:100 しかし、これは私の望むところではありません。私は、リロードせずに拡大縮小ができるようにしたいのです。

どうすればQMLを修正し、画像に含まれる高さを適用させることができますか？ RowLayout ?

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

解決方法は？

レイアウトを使用する場合は、絶対に width または height を使用します。 Layout に付属するプロパティを使用します。レイアウト自体は width と height というように、設定した内容を効果的にオーバーライドします。

そこで、画像については、以下のように置き換えます。

width:100; height:100

と

Layout.preferredWidth: 100
Layout.preferredHeight: 100

これは文書化されています こちら . 具体的には width と height は最終的なフォールバックとしてのみ使用され、期待したような動作はしません。

あなたのコードには、この現象が起こる場所が他にもあります。

• playcontrol セット height: parent.height (親の幅と高さを埋めるのは レイアウトのデフォルト動作 ということで、これはいずれにせよ必要ないはずです)。
• は Rectangle の中で playcontrol レイアウトも height: parent.height .