在圆形按钮内显示 svg 图像时,我最终会得到一个固定宽度(灰色(边框(svg 不会填充按钮(。
我使用的图标是圆形的;svg 大小设置为与该图像匹配。 我试过:
-
添加
background: undefined
:删除灰色边框(但不固定图标大小(,因此我们看到的是灰色背景。 -
修改按钮的大小:边框似乎总是相同的宽度,因此看起来分配了固定边距
-
将图标更改为正方形:相同的效果,顶部,底部,侧面的边框似乎是固定大小的。根据按钮的大小,正方形将包含在按钮内,或"伸出"。
RoundButton {
height: 45
width: height
anchors.top: parent.top
anchors.right: parent.right
icon.source: "qrc:/images/controls/roundInfo.svg"
icon.height: height
icon.width: width
}
如何摆脱图标周围的此边距?
提供简化的 svg 文件用于测试:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="10.6mm" height="10.6mm" version="1.1" viewBox="0 0 10.6 10.6" xmlns="http://www.w3.org/2000/svg">
<path transform="scale(.265)" d="m20 0c-7.4-3.71e-7 -13.9 4.05-17.3 10.1h34.7c-3.46-6-9.92-10.1-17.3-10.1zm-17.4 10.1c-1.69 2.93-2.67 6.32-2.67 9.95-3.32e-6 11 8.96 20 20 20l-17.4-30zm17.4 30c11 0 20-8.96 20-20 1e-6 -3.62-0.983-7.01-2.67-9.95l-17.4 30z" fill-rule="evenodd" style="paint-order:normal"/>
</svg>
IconLabel
是RoundButton
的contentItem
。contentItem
将由指定的padding
属性填充。默认情况下,此值为 12,这使得每个站点上的IconLabel
小 12 个像素(因此每个方向总共 24 个像素(。
请注意,这仅在图标宽度和高度设置为按钮大小时才有效,否则图像只会再次在按钮中居中
RoundButton {
height: 45
width: width
icon.source: "qrc:/image.svg"
icon.height: height
icon.width: width
padding: 0 //the trick
}
您可以通过查看安装Qt时获得的QML文件(甚至不是源代码变体(来找到答案:<path to>/Qt/5.12.3/gcc_64/qml/QtQuick/Controls.2/RoundButton.qml