QT样式的添加方法和box mode

上一篇QT样式表语法（The Style Sheet Syntax）学习记录记录了样式表的语法，这一篇就说下具体的使用
参考：Customizing Qt Widgets Using Style Sheets

一 设置方法

样式表可以直接用QT设计器，选中控件右键单击选择change stylesheet或者使用setStylesheet命令，这个没什么说的。

二 控件的盒子模型

• 在qss中，所有控件都被当成一个有4个相同轴心矩形的盒子。
  

  • margin：外边距，位于border边界图形和控件边界（下方效果图中的8个白点，蓝色是设计界面的背景）之间，只是一个距离量，所以只能调整其位置，没有图形;
  • border: 边界，在margin和padding之间的界线，是一个真实图形样式，（效果图中绿色图框）
  • padding:内边距，位于border边界图形和内容之间，也是一个距离量，只能调整其位置

  • content：容积，就是移除其它三个部分剩下的，一般起始位置在控件左侧。

    在qt文档中，我只找到了border可以设置style,color,width，radius信息，而margin，和padding只能设置间距，这也是图形和距离的差别。如下：

    background-color: rgb(0, 0, 0);margin-top:10;margin-right:20;margin-bottom:30;margin-left:40;border-bottom-right-radius:50px;border-color: rgb(33, 255, 114);border-width: 20px;border-style: solid;padding-top:10;padding-right:90;padding-bottom:40;padding-left:80;

    效果图：margin,padding都是透明看不见的，可以用来设置边界、content的距离。
    

• 在不设置的情况下，默认的margin,padding,border-width都为0，因此四个框是重合的。

• 盒子的图形属性说明，

  • background-image
    
    • 通用情况下背景图只能绘在边界border内，而且图形不会适应方框尺寸，
    • background-clip:　裁剪属性
    • background-repeat ：填充模式
    • background-origin：绘制的方框，就是上述盒子模型中的 margin，border，padding，content，默认padding
    • background－position:对齐方式
  • border-image
    
    • 该模式可以自适应方框大小。
    • 设置这个背景后可不用设置background-image，就算设置了也会被它覆盖。
  • image
    
    • 指定的图形不会平铺或拉伸，要想调整可用SVG格式的图像描述
    • 类似的，该图形会覆盖border层图形。
    • 在图形不形变时可用image-position选择对齐方式。

• 其它属性设置参看Qt Style Sheets Reference

  需要说下，一个控件有哪些子控件，一个便捷的方法，就是直接选中该控件，查看对象栏中有哪些类就行，如下图中QToolBox,你去上一讲中说的网页找属性去只能找到个tab标签，它的每而tab下的内容区背景完全找不到有没有？反正我直接看了下类型，设置QWidget背景就OK了，而且在此处可以直接设置你拖到QToolBox所有单选框控件（radioButton），不用在一个一个的设。
  

QWidget{        background-color: rgb(56, 126, 255);/*设置背景为蓝*/    border-top-right-radius: 28;}QToolBox#toolBox::tab{    border-color: rgb(56, 255, 53);    border-bottom-color: rgb(39, 76, 177);    border-width: 1px;    border-style: solid;    border-top-right-radius: 28;    font:italic 900 9pt;}QToolBox#toolBox::tab:selected{    background-color: rgb(156, 107, 255);}/*设置QToolBox下的所有QRadioButton类通用属性，每个QRadioButton的背景图单独到设置*/QRadioButton::indicator {    position: absolute;    border-radius: 15px;    border-width: 2px;}QRadioButton::indicator:unchecked:hover {    border-width: 0px;}