QPushbutton设置按钮文字位置(上图下字),有些版本text-align:bottom不生效

目标: QPushbutton上面显示图标下面显示文字

一般来说,qss里使图片上对齐,文字下对齐即可   text-align:bottom;   background-position: top;

qss与web上css3有差异:

1. background-origin是确定背景填充的范围的,qt里content可以生效?css3写法应该是content-box

2. background-repeat的repeat-no-repeat这个写法也和css3不太一样,css3写法是no-repeat

3. text-align在css3也没有bottom, 似乎要用其他方式使文本在div底部:html文字位置底部,css文字在底部怎么写_奀翊的博客-CSDN博客

※ 注意: 有些版本里(如qt5.15.2,creator8.0.1)“ text-align:bottom;” 在编译后显示到窗口时不生效,而left/right/top可以生效,无论是用new还是用ui->pushbutton创建的按钮都是这样;(designer里预览时是有效的),这应该是个版本bug。(在5.9.9+低版本creator是正常的)

非要在有bug的版本使用时,可以考虑用background-origin:padding;padding:24px 0px 0px 12px;

注意四个参数的顺序在不同版本好像不太一样?按web顺序是上右下左,qt里有时是左上右下

.setStyleSheet("QPushButton{\
                    border: 1px solid #cccccc; \
                    color:black;                 \
                    font-size:14px;            \
                    border-radius:8px;\
                    padding: 2px 2px 0px 4px;\
                    text-align:bottom;
                    background-repeat: repeat-no-repeat;\
                    background-position: top;\
                    background-origin:content;\
                    background-color:#fff196;\
                    background-image: url(":/icon/help32.png");\
                }\
                QPushButton:hover{\
                    border: 1px solid #eceaa8; \
                    background-color:#f6e421;\
                    border-radius:8px;\
                    color:black;                 \
                    opacity:0.3;\
                }\
                QPushButton:pressed{\
                    border: 1px solid #eceaa8; \
                    background-color:#e3766d;\
                    border-radius:8px;\
                    color:#FFFFFF;    \
                }");

 

猜你喜欢

转载自blog.csdn.net/starfire_hit/article/details/126945251