Qt QML RoundButton 图标不填充项目

Question

当在 RoundButton 内显示 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>

Answer 1

IconLabel是contentItem的 RoundButton . contentItem将由指定的 padding 填充属性(property)。默认情况下，此值为 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