调整 QML 图像显示大小

Posted

技术标签:

【中文标题】调整 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】:

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

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

width:100; height:100

Layout.preferredWidth: 100
Layout.preferredHeight: 100

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

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

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

【讨论】:

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

以上是关于调整 QML 图像显示大小的主要内容,如果未能解决你的问题,请参考以下文章

覆盖 QML 行的 MouseArea(或自动调整大小的图像+文本)

在 UITableViewCells 中显示之前调整图像大小和裁剪图像

调整大小的 opencv 图像在 QWidget C++ 上未正确显示

水平图像滚动,图像大小调整以适合高度显示空白空间

为视网膜显示调整图像大小

调整图像大小并显示而不保存