调整QML图像显示大小

问题描述：

我有一个嵌套RowLayout的QML窗口。在内排我有两个图像。这些图像的源文件（有意）是相当大的。当我试图设置这些图像上的height属性以使它们变小时，它们仍然很大。调整QML图像显示大小

所需的外观：

实际外观：

我已经能够让他们小的唯一方法是设置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，有效地覆盖您设置的任何内容。

所以，为你的形象，与

Layout.preferredWidth: 100 
Layout.preferredHeight: 100

这是记录here更换

width:100; height:100

。具体而言，width和height仅用作“最终回退”，并且它们不会像您期望的那样运行。

有在你的代码的其他地方发生这种情况：

playcontrol套height: parent.height（填充母的宽度和高度为default behaviour for layouts，所以这不应该是必要反正）。
Rectangleplaycontrol布局内也设置height: parent.height。

调整QML图像显示大小

相关推荐