调整 QML 图像显示大小

Posted 2023-02-16

【中文标题】调整 QML 图像显示大小

【英文标题】：Adjusting QML Image display size

【发布时间】：2016-08-17 01:46:14

【问题描述】：

我有一个带有嵌套 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' 

【参考方案1】：

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

所以，对于你的图片，替换

width:100; height:100

与

Layout.preferredWidth: 100
Layout.preferredHeight: 100

这已记录在 here。具体来说，width 和 height 仅用作“最终后备”，它们的行为不会像您预期的那样。

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

playcontrol 设置height: parent.height（填充父级的宽度和高度是default behaviour for layouts，所以无论如何这都不应该是必需的）。 playcontrol 布局中的Rectangle 还设置了height: parent.height。

【讨论】：

嗨，我的 QML 程序中有一个 .png 图像，我想使用 Layout.preferredWidth 和 Layout.preferredHeight 在程序中加载它时减小它的大小。但这些特征对其大小没有任何影响！请问为什么？