[英]Qt QML RoundButton icon doesn't fill the item
當在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>
IconLabel
是RoundButton
的contentItem
。 contentItem
將由指定的padding
屬性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
: <path to>/Qt/5.12.3/gcc_64/qml/QtQuick/Controls.2/RoundButton.qml
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.