调整 QML 图像显示大小
Adjusting QML Image display size
我有一个带有嵌套 RowLayout
的 QML window。在内排我有两张图片。这些图像的源 .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' }
}
使用布局时,切勿指定项目的 width
或 height
;请改用 Layout
附加属性。布局本身将设置 width
和 height
,有效地覆盖您设置的任何内容。
因此,对于您的图像,替换
width:100; height:100
和
Layout.preferredWidth: 100
Layout.preferredHeight: 100
这已记录在案 here。具体来说,width
和 height
仅用作 "final fallback",它们不会像您期望的那样运行。
您的代码中还有其他地方会发生这种情况:
playcontrol
设置height: parent.height
(填充父级的宽度和高度是default behaviour for layouts,所以这应该不是必需的)。
playcontrol
布局中的Rectangle
也设置了height: parent.height
。
我有一个带有嵌套 RowLayout
的 QML window。在内排我有两张图片。这些图像的源 .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' }
}
使用布局时,切勿指定项目的 width
或 height
;请改用 Layout
附加属性。布局本身将设置 width
和 height
,有效地覆盖您设置的任何内容。
因此,对于您的图像,替换
width:100; height:100
和
Layout.preferredWidth: 100
Layout.preferredHeight: 100
这已记录在案 here。具体来说,width
和 height
仅用作 "final fallback",它们不会像您期望的那样运行。
您的代码中还有其他地方会发生这种情况:
playcontrol
设置height: parent.height
(填充父级的宽度和高度是default behaviour for layouts,所以这应该不是必需的)。playcontrol
布局中的Rectangle
也设置了height: parent.height
。