QSS设置常见整理

目的

写这篇博客，主要是为了在设置样式表CSS文件中常见细节或者出现问题整理，希望能够对各位有些帮助, 后续会继续添加。

QSS

QSS(Qt Style Sheets)是Qt的样式表,为Qt提供许多的属性、伪状态、子控件等机制来自定义控件的外观,与HTML中的CSS类似。

CSS(层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力.

整理

1. 消除由于出现虚线框

QListWidget::item:focus {border : 0px ;}//焦点导致
outline: 0px;
或者 padding：-1px;

消除焦点框
去掉QTableView、QTreeView内item被选中时的虚线框

2. padding, margin 设置是采用顺时针，以及了解盒子模型

上 》右 》 下 》 左
margin和padding属性中四个值的先后顺序及区别

3. QGroupBox设置border后 标题下沉，主要是设置left, padding, margin值

QGroupBox
{
 margin-top:6px;  //越大标题的内容越往上
 margin-left:6px;//越大标题的内容越往左
}
QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position:top left;
    left: 7px;
    padding: 0px 5px 0px 5px;
}

4. 设置QAbstractView防止拖动

//view属于QAbstarctItemView
QScrollProperties prop = QSCroller::scroller(view)->scrollerProperties();
QVariant overshootPolicy = QVariant::fromvalue<QScrollerProperties::OverShootPolicy>(QScrollerProperties::OvershootAlwaysoff);
prop.setScrollMetric(QScrollerProperties::VerticalOvershootPolicy, overshootPolicy);
QScroller::scroller(view).setScrollerProperties(prop);
QScroller::grabGesture(view,QScroller::LeftMouseButtonGesture);

//对于listview 而言 还可以设置
//setMovement(QListVew::static);

5. 对某个控件设置同样效果样式影响顺序优先级 “UI界面设置styleSheet > QSS 文件里设置”

6. width height 指的是content的width 与 height

参考
border-radius设置理解

7. QPushButton设置点击样式，点击QPushButton没有样式效果

可能问题：
1： 样式表文件中存在不符合设置。
2：对应事件没有发送到对应的组件（也就是说点击事件没有传送到QPushButton)
我出现的原因是， 父组件中eventfilter通过捕获点击事件后，处理了所要处理的功能 然后return true，不再将事件传递给其子组件中，导致对应按钮没有点击效果样式出现。

滑动条样式设置

8.命令空间下的样式设置

命令空间–类名{样式语法}

QString style = "AQt--MyButton { background: #4395ff; border-radius: 5px;" }";
setStyleSheet(style);

9. 设置颜色以及带有透明度

若想设置（button，label，widget等）部件的透明度，可以采用rgba的颜色格式进行设置。
rgba 第四个参数是透明度参数 , 取值0~255(0-透明 255- 不透明). opacity 1是不透明，0是完全透明。
255,255,255 白色 0，0，0黑色

QLabel#minRangeScaleLabel, #maxRangeScaleLabel{
	border: none;
	color: rgba(222, 222, 223, 155);
	font-family: PingFangSC-Regular;
	font-size: 12px;
	font-weight: normal;
}

10.QSpinBox去掉小箭头

QSpinBox::up-button,QSpinBox::down-button
{
	width:0px;
}

11. Qt自定义QLineEdit时出现光标不显示问题

构造函数中要 调用 setFocusPolicy() ，一般是 setFocusPolicy(Qt::StrongFocus)。
如果小部件具有焦点代理，则焦点策略将传播给它。

void CustomQLineEdit::focusInEvent(QFocusEvent *e) // 自定义类获取焦点事件处理--一般处理键盘导致焦点
{
    QLineEdit::focusInEvent(e);   //很重要 不然没有光标
 }

12. 光标选中的区域设置选中背景色

selection-background-color 这个属性设置

以QLineEdit 为例

QLineEdit {
    border: 2px solid gray;
    border-radius: 10px;
    padding: 0 8px;
    background: yellow;
    selection-background-color: darkgray; //就是这
}

其他输入区域窗口也一样比如说QTextEdit

13. 屏蔽鼠标事件

setAttribute(Qt::WA_TransparentForMouseEvents, true);

14. 消除QTreeWidget 子item 显示三角图标

tree->setStyleSheet("QTreeView::branch:has-children:!has-siblings:closed,\
    QTreeView::branch:closed:has-children:has-siblings{border-image: none; image: none;}\
    QTreeView::branch:open:has-children:!has-siblings,\
    QTreeView::branch:open:has-children:has-siblings{border-image: none; image: none;}");

15. 由于QWidget或者父窗口样式设置导致自定义窗口设置样式被屏蔽

setAttribute(Qt::WA_StyledBackground,true); //设置即可
setStyleSheet("QWidget{ border:1px solid #4f5053; border-radius:2px; font-size: 13px;} QWidget:focus{border: 2px solid #26dede; border-radius:5px;}");

16. 设置部件border, padding, margin的某一边

border 为例

	border-left: 0px; 
	border-right: 0px; 
	border-top:0px;
	border-bottom: 0.5px solid #2A2B2E;

17. 设置Qtreewidget item border具体某个边属性

QTreeView::item {
border: 1px solid #d9d9d9;
border-top-color: transparent;
border-bottom-color: transparent;
}

18. 如果由于窗口有多个子控件， 子控件里有子控件， 在这种情况下容易产生通过qss设置对应控件样式结果不是符合预期的， 但是由于qss规则可能很产生矛盾(自己没弄清的)，可以直接通过对应控件设置即可。

 ui->treeWidget->setStyleSheet(".QTreeWidget{border: 1px solid #2c2d31;}");
//直接设置treeWidget样式， 如果通过对应的窗口设置可能由于继承性或者其他规则导致样式不符合预期 可直接对其样式设置 避免通过qss文件设置规则导致自己也没弄清楚

styleshee 5.10 具体可参考最新的
qss
qss 设置规则
qss 设置规则2
qss 设置规则3
qss 设置规则4
子控件::
:伪状态

19. 设置滑动条handle 为圆形

QSlider#audioVolumeSlider {
	background:transparent;
	border: none;
	border-radius: 5px; 
}

QSlider#audioVolumeSlider::add-page:Horizontal
{     
	background-color: rgba(255, 255, 255, 0.3);
	height: 2px;
	border-radius: 2px;
}

QSlider#audioVolumeSlider::sub-page:Horizontal 
{
	bbackground-color: #26dede;
	height: 2px;
	border-radius: 2px;
}

QSlider#audioVolumeSlider::groove:Horizontal 
{
	background:transparent;
	height: 4px; //注意groove height 与sub-page  add-page:height 不然会影响边角border设置
}

QSlider#audioVolumeSlider::handle:Horizontal 
{
	height: 12px;  //宽高一样 
	width: 12px;
	margin: -4px 0px -4px 0px;// 句柄(负的话 往外走 ，正的话往里走 )上右下左 逆时针 margin 上为三分之一到一半高宽 最好接近三分之一（-6 -3）
	border-radius: 5px;//这个也要设置至多为margin 绝对值+1 左右 具体需要设置 才能调整到圆形
	background-color: #b2b2b4;
}

20. 自定义QPushButton 并设置了其clicked ，release后样式 ，并且你实现了mouseReleaseEvent, 如果没有 QPushButton::mouseReleaseEvent(event); 其相关只有Button release 才有的样式是不会生效的

void KMoveButton::mouseReleaseEvent(QMouseEvent *event)
{
    mouseRelease(true);
    QPushButton::mouseReleaseEvent(event);// 其相关只有Button release 才有的样式会生效
}

21. QGraphicsDropShadowEffect setOffset偏移位置方向

setOffset ( qreal dx, qreal dy );
//设置阴影的偏移度,如果想实现整个界面上下左右都有阴影,则设为dx=0,dy=0.
//当dx为负时,表示偏移为左,反之为右
//当dy为负时,表示偏移为上,反之为下

22. 如果某个控件（QPushButton等按钮）是贴图的，其normal, press, hover, checked状态发现有明显的闪烁情况， 可以检测贴图时， 其不同状态的size是否是不一样的， 这样会容易造成由于大小不一致导致闪烁。