调整 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】:使用布局时,切勿指定项目的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
在程序中加载它时减小它的大小。但这些特征对其大小没有任何影响!请问为什么?以上是关于调整 QML 图像显示大小的主要内容,如果未能解决你的问题,请参考以下文章
覆盖 QML 行的 MouseArea(或自动调整大小的图像+文本)
在 UITableViewCells 中显示之前调整图像大小和裁剪图像