FluIconButton默认的verticalPadding和horizontalPadding 导致显示不齐

EveryOrigin commented 6 months ago

当我尝试使用width与height修改图标按钮的大小时, FluIcon并不居中

      FluIconButton {
        id: btn
        width: 26
        height: 26
        anchors.verticalCenter: parent.verticalCenter
        iconSize: 18
        iconSource: FluentIcons.Unlock
    }

示意图如下

示意图中黄色的框就是30*30的background, 红色是我指定的width,height

修改两个padding之后就可以了.. 好像是在图标设置大小比较小时，padding会使得contentItem里load的FluIcon异常偏移

FluIconButton {
        id: btn
        width: 26
        height: 26
        anchors.verticalCenter: parent.verticalCenter
        iconSize: 18
        iconSource: FluentIcons.Unlock
        text: "解锁手动控制"
        verticalPadding: 0
        horizontalPadding: 0
    }

还不清楚这两个值为什么默认是8

suterberg commented 6 months ago

总宽36 字体图片20*20 padding都是8，肯定要偏移8才能让图片到中心啊无标题7 无标题6

EveryOrigin commented 6 months ago

总宽36 字体图片20*20 padding都是8，肯定要偏移8才能让图片到中心啊

我的意思是既然提供了iconSize这个prop, 允许修改图标大小，那么padding调整为 (width-iconSize) / 2 会不会好一点呢

suterberg commented 6 months ago

可以自己改的试一下，没必要设置太小图标吧，看不清了都

---- 回复的原邮件 ----

发件人	*@.**>
日期	2024年01月04日 17:27
收件人	*@.**>
抄送至	*@.>、@.*>
主题	Re: [zhuzichu520/FluentUI] FluIconButton默认的verticalPadding和horizontalPadding 导致显示不齐 (Issue #395)

总宽36 字体图片20*20 padding都是8，肯定要偏移8才能让图片到中心啊

我的意思是既然提供了iconSize这个prop, 允许修改图标大小，那么padding调整为 (width-iconSize) / 2 会不会好一点呢

—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you commented.

EveryOrigin commented 6 months ago

可以自己改的试一下，没必要设置太小图标吧，看不清了都

呜呜我也觉得没必要啊设计的人干的好事。这个padding只是无关紧要的提议

suterberg commented 6 months ago

等我回去看看吧，这个应该设个property引出就行，但作者不一定采用

---- 回复的原邮件 ----

发件人	*@.**>
日期	2024年01月04日 17:46
收件人	*@.**>
抄送至	*@.>、@.*>
主题	Re: [zhuzichu520/FluentUI] FluIconButton默认的verticalPadding和horizontalPadding 导致显示不齐 (Issue #395)

Closed #395 as completed.

—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you commented.

suterberg commented 6 months ago

Button { display: Button.IconOnly property int iconSize: 20 property int userpadding: 8 property int iconSource property bool disabled: false property int radius:4 property string contentDescription: "" property color hoverColor: FluTheme.itemHoverColor property color pressedColor: FluTheme.itemPressColor property color normalColor: FluTheme.itemNormalColor property color disableColor: FluTheme.itemNormalColor property Component iconDelegate: com_icon property color color: { if(!enabled){ return disableColor } if(pressed){ return pressedColor } return hovered ? hoverColor : normalColor } property color iconColor: { if(FluTheme.dark){ if(!enabled){ return Qt.rgba(130/255,130/255,130/255,1) } return Qt.rgba(1,1,1,1) }else{ if(!enabled){ return Qt.rgba(161/255,161/255,161/255,1) } return Qt.rgba(0,0,0,1) } } property color textColor: FluTheme.fontPrimaryColor Accessible.role: Accessible.Button Accessible.name: control.text Accessible.description: contentDescription Accessible.onPressAction: control.clicked() id:control focusPolicy:Qt.TabFocus padding: 0 verticalPadding: control.userpadding horizontalPadding: control.userpadding

suterberg commented 6 months ago

FluIconButton{ disabled:icon_button_switch.checked iconDelegate: Image{ sourceSize: Qt.size(40,40) ; width: 20; height: 20; source: "qrc:/example/res/image/ic_home_github.png" } userpadding:12 onClicked:{ showSuccess("点击IconButton") } } 测试了一下可以使用,只需要修改userpadding 即可,外部尺寸是根据padding生成的

suterberg commented 6 months ago

需要把 implicitWidth: 20 implicitHeight: 20 设低一点,不然默认最小尺寸为30

zhuzichu520 / FluentUI

FluIconButton默认的verticalPadding和horizontalPadding 导致显示不齐 #395