QPushButton自定义样式介绍:
基本样式:
setStyleSheet("QPushButton{" "border: 1px solid black;"//边框宽度和颜色 "border-radius: 5px;"//边框圆角 "background-color:#083590; "//背景颜色
上面是基本的显示效果;
字体相关的样式:
setStyleSheet("QPushButton{" "text-align : top; "//字体的对齐方式 left right top bottom center 默认居中对齐
举个例子,假如想让字体左对齐,边距是10的话,具体设置和显示效果如下:
setStyleSheet("QPushButton{" "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;"
上面设置的背景图片,都是左右对齐,怎么设置图片边距呢,就是自定义设置图片的位置,方法如下:
back-ground-origin:content; padding-right:15px; 这两句是设置图片位置的关键;也就是图片位置放在content里面,调整padding的位置,就是调整图片的边距;
显示效果如上图,背景图片右对齐,边距15px;
怎么调整图片上下结构呢?
tbn->setStyleSheet("QPushButton{" "border: 1px solid #00d2ff; " "background-image: url(:/Resources/qss/image/checkbox_parcial.png);" "background-repeat: repeat-no-repeat;" "background-position: top;" "background-origin:content;"
样式表及显示效果如上图;
以上;转载请注明出处;
|