调整QML图像显示大小

Question

我有一个带嵌套RowLayout的QML窗口。在内排我有两个图像。这些图像的源.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' }
}

Answer 1

使用布局时，请勿指定项目的width或height;请改用Layout附加属性。布局本身将设置width和height，有效地覆盖您设置的任何内容。

因此，对于您的图片，请替换

width:100; height:100

与

Layout.preferredWidth: 100
Layout.preferredHeight: 100

记录在案here。具体来说，width和height仅用作＆＃34;最终后备＆＃34;，他们不会像您期望的那样行事。

代码中还有其他地方发生这种情况：

• playcontrol设置height: parent.height（填充父级的宽度和高度为default behaviour for layouts，因此无论如何都不需要这样做。）
• Rectangle布局中的playcontrol也设置height: parent.height。