QPushButton自定义样式 调整字体对齐方式 同时显示图片和文字 调整图片文字位置

QPushButton自定义样式介绍：

基本样式：

setStyleSheet("QPushButton{"

    "border: 1px solid black;"//边框宽度和颜色

    "border-radius: 5px;"//边框圆角

    "background-color:#083590;  "//背景颜色

    "color:red;                 "//字体颜色

    "}"

     );

 上面是基本的显示效果；

 

字体相关的样式：

setStyleSheet("QPushButton{"

    "color:red;                 "//字体颜色

    "font-size:14px;            "

    "text-align : top;         "//字体的对齐方式 left right top bottom center  默认居中对齐
    
    "}"

     );

 

 

举个例子，假如想让字体左对齐，边距是10的话，具体设置和显示效果如下：

setStyleSheet("QPushButton{"

                       "color:red;                 "//字体颜色

                       "font-size:14px;            "

                       "text-align : left;         "//字体的对齐方式 

                       "padding-left: 10px;"        //参考上面UI构造图
                       
                        "}"

                         );

 上面样式应用于自定义文字、对齐等；

 

背景图相关设置：

 

setStyleSheet("QPushButton{"

                       //"border-image:url(:src.png);"//这也可以设置背景图片，不过图片是拉伸填充的

                       "background-image: url(:src.png);"//自定义背景图片

                       "background-repeat: repeat-no-repeat;"//图片重复方式，参考CSS

                       "background-position: right;"//qss 支持top left 等，不支持数字；

                        "background-origin:content;"

                       "padding-right: 15px;"
                       
                        "}"

         );

  上面设置的背景图片，都是左右对齐，怎么设置图片边距呢，就是自定义设置图片的位置，方法如下：

  back-ground-origin:content;  padding-right:15px;  这两句是设置图片位置的关键；也就是图片位置放在content里面，调整padding的位置，就是调整图片的边距；

 显示效果如上图，背景图片右对齐，边距15px；

 

怎么调整图片上下结构呢？

tbn->setStyleSheet("QPushButton{"

                       "border: 1px solid #00d2ff; "

                       "min-height: 40px;          "

                       "color:red;                 "

                       "font-size:14px;            "

                       "text-align : bottom;         "

                       "background-image: url(:/Resources/qss/image/checkbox_parcial.png);"

                       "background-repeat: repeat-no-repeat;"

                       "background-position: top;"

                       "background-origin:content;"

                       "padding: 10px;"

                       "}"

         );

 样式表及显示效果如上图；

 

以上；转载请注明出处；