【Qt样式(qss)-1】手册小结(附例:软件深色模式)

背景:

项目中包装了电子表格QTableWidget,由于在选中状态下失去焦点时,被选中的单元格颜色变灰,导致被选状态背景色和文本看不清。于是上网查方法。

可以像网页一样直接用样式实现,于是加了这么一句:

setStyleSheet("selection-background-color:lightblue;selection-color:black;");

最开始写的时候,只知道使用setStyleSheet函数实现,但样式的具体写法并不只知道,只是凭借之前前端对css的了解,指定了背景色。后面那句字体颜色的指定,起初并没有写出来,我用的是font-color,不知道对不对,等于是在盲目测试。

同时看到网上也有人提问,该如何获得具体样式语法的定义和说明。其实不需要额外的手册,qt提供了两种方式。

根据学习,还总结了其它几篇:

【Qt样式(qss)-2】使用小结(软件换肤,比如暗黑模式)

【Qt样式(qss)-3】几套配色方案

【Qt样式(qss)-4】应用到QMdiArea不生效的解决

【Qt样式(qss)-5】qss混乱,错乱,不生效的一种原因-CSDN博客

方法一:

根据我是摸索,首先还是要熟悉前端的css语法,这方面的资料很多,随便一个相对完善的文档都够用了。但仅供参考。因为qt中的样式是否是和css完全一致,这一点我没有考证,也没有去查相关资料。

另一个方法就是利用qt creator的设计器,它本身就可以生成样式语句,随便做个窗体,右键修改样式,它会自动生成样式语句。比如还是以表格为例,在窗体上放一个QTableWidget部件,在上面鼠标右键:

【Qt样式(qss)-1】手册小结(附例:软件深色模式)_第1张图片

选择“改变样式表”。

 【Qt样式(qss)-1】手册小结(附例:软件深色模式)_第2张图片

根据需要自行选择,它就会生成语句了。

【Qt样式(qss)-1】手册小结(附例:软件深色模式)_第3张图片

 都是写程序的,只要语法知道了,剩下都好办,具体值如何表示就容易了。

方法二:

qt自己的手册中有相关内容。至于如何找到,其实也不难,本文开头的函数setStyleSheet,按F1定位到它的帮助。

e9383c297d4840d3a26b137eb68ef230.png

  注意红框的位置,它会提示你具体去看这个部分。点进去。

【Qt样式(qss)-1】手册小结(附例:软件深色模式)_第4张图片

  能看到关于它的主目录。其中有语法定义和使用方法。我个人认为,大家都是写程序的,语法简单一看就会,最主要是各种关键字的定义。也就是上图红框部分。点进去就看到了:

【Qt样式(qss)-1】手册小结(附例:软件深色模式)_第5张图片

 分别点进去就知道了,各种关键字都在里面,前提是先看懂语法。

【Qt样式(qss)-1】手册小结(附例:软件深色模式)_第6张图片

【Qt样式(qss)-1】手册小结(附例:软件深色模式)_第7张图片

【Qt样式(qss)-1】手册小结(附例:软件深色模式)_第8张图片

【Qt样式(qss)-1】手册小结(附例:软件深色模式)_第9张图片

【Qt样式(qss)-1】手册小结(附例:软件深色模式)_第10张图片

【Qt样式(qss)-1】手册小结(附例:软件深色模式)_第11张图片

使用 

有了上面这些手册,就得心应手了。如果以前做过前端css,基本上一个道理。这里我只说一下在qt当中的感受,如果大家有更好的想法,多交流。

先看一段我自己定义的样式:

/*background,font*/
*,QTabBar::tab,QTableView::item,QTableCornerButton::section,QHeaderView::section {
    background-color: rgb(30, 30, 30);
    color: rgb(0, 255, 0);
}

/*disabled*/
*:disabled {
    color: rgb(200, 200, 200);
}

/*selected*/
QTabBar::tab:selected,QTableView::item:selected {
    background-color: rgb(0, 80, 0);
}

/*hover*/
QComboBox,QDateTimeEdit:hover,QTabBar::tab:hover,
QToolButton:hover,QMenuBar::item:selected,QMenu::item:selected,
QTableView::item:hover,QPushButton:hover,QLineEdit:hover {
    background-color: rgb(0, 150, 0);
}

/*border*/
* {
    border: none;
    border-radius: 6px;
}

QComboBox,QDateTimeEdit,QGroupBox,
QLineEdit,QTextEdit,QListView,QTextBrowser,
QTableView,QTableView::item,QTableCornerButton::section,QHeaderView::section {
    border: 1px solid green;
}

QTableView,QTableView::item,QTableCornerButton::section,QHeaderView::section {
    border-radius: 0px;
}

/*button-color*/
QPushButton,QPushButton:pressed,QScrollBar::handle {
    background-color: rgb(0, 100, 0);
}

/*QScrollBar*/
QScrollBar::add-page,QScrollBar::sub-page {
    background-color: rgb(50, 50, 50);
}

/*QToolTip*/
QToolTip {
    color: black;
}

/*QGroupBox*/
QGroupBox {
    padding-top: 12px;
}

/*QPushButton*/
QPushButton {
    min-width: 80px;
    min-height: 25px;
}

/*QMessageBox*/
QMessageBox QPushButton {
    min-width: 100px;
    max-width: 100px;
    min-height: 30px;
    max-height: 30px;
}

这是我定义的一个软件的dark样式。

我是按样式特征分类写的。主要是希望如果要改某个颜色,只改一个地方就行了。

还能以控件为单位写,看起来整齐,但是代码量大很多。貌似不能像css那样定义变量。比如很多地方用到一种颜色,如果要改,就很麻烦。

/*background*/
* {
    background-color: rgb(30, 30, 30);
    color: rgb(0, 255, 0);
}

/*disabled*/
*:disabled {
    color: rgb(200, 200, 200);
}

/*QLabel*/
QLabel {
    border: none;
}

/*QLineEdit*/
QLineEdit {
    border: 1px solid green;
    border-radius: 6px;
}

QLineEdit:hover {
    background-color: rgb(0, 150, 0);
}

/*QTextEdit,QTextBrowser,QListView*/
QTextEdit,QTextBrowser,QListView {
    border: 1px solid green;
    border-radius: 6px;
}

/*QMenuBar,QMenu*/
QMenuBar::item {
    border: none;
}

QMenuBar::item:selected,QMenu::item:selected {
    background-color: rgb(0, 150, 0);
}

/*QDateTimeEdit*/
QDateTimeEdit {
    border: 1px solid green;
    border-radius: 6px;
}

QDateTimeEdit:hover {
    background-color: rgb(0, 150, 0);
}

/*QComboBox*/
QComboBox {
    background-color: rgb(0, 150, 0);
    border: 1px solid green;
    border-radius: 6px;
}

/*QTabWidget*/
QTabWidget:pane {
    border: none;
}

QTabBar::tab {
    background-color: rgb(30, 30, 30);
}

QTabBar::tab:selected {
    background-color: rgb(0, 80, 0);
}

QTabBar::tab:hover {
    background-color: rgb(0, 150, 0);
}

/*QPushButton*/
QPushButton {
    background-color: rgb(0, 100, 0);
}

QPushButton:hover {
    background-color: rgb(0, 150, 0);
}

QPushButton:pressed {
    background-color: rgb(0, 100, 0);
}

/*QScrollBar*/
QScrollBar::handle {
    background-color: rgb(0, 100, 0);
}

QScrollBar::add-page,QScrollBar::sub-page {
    background-color: rgb(50, 50, 50);
}

/*QToolTip*/
QToolTip {
    color: black;
}

/*QGroupBox*/
QGroupBox {
    padding-top: 12px;
    border: 1px solid green;
    border-radius: 6px;
}

/*QTableView*/
QTableCornerButton::section,QHeaderView::section {
    background-color: rgb(30, 30, 30);
    border: 1px solid green;
}

QTableView {
    border: 1px solid green;
    border-radius: 6px;
}

QTableView::item {
    background-color: rgb(30, 30, 30);
    border: 1px solid green;
}

QTableView::item:selected {
    background-color: rgb(0, 80, 0);
}

QTableView::item:hover {
    background-color: rgb(0, 150, 0);
}

好处就是,可以针对每个或者每一类控件修改样式,互不影响。所谓各有利弊。各位看官喜欢哪种呢?

一般而言,把相对共性的样式写在前面,越往后越具体比较合理。就像变量赋值一样,肯定是后赋值的效果覆盖前面的,所以写样式就好比画画,先画出大概轮廓,然后逐步描述每个细节。

有一点我没搞定的,就是按钮,只要样式里动了它的边框,所有不拉伸的位置,它会根据文本自动适应大小,尤其在MessageBox中的按钮,“yes”按钮会很窄,特别不爽。所以我规避了它,采用颜色区分达到视觉效果。

遇到具体哪一个细节不知道时,求助网络最快。结合上面的手册细节,可以说是随便玩。

Qt样式(qss)使用小结(软件换肤,比如暗黑模式)_大橘的博客-CSDN博客

Qt样式(qss)的几套配色方案_大橘的博客-CSDN博客

Qt样式(qss)应用到QMdiArea不生效的解决_大橘的博客-CSDN博客

注意:

使用中因为遇到了与画笔的冲突,所以提一下。如果界面上使用了画笔,这些样式是无法生效的。qt的ui默认都是样式优先生效,但如果使用了画笔绘制,样式就无法生效了。亲测。

你可能感兴趣的:(qt/c++,qt,开发语言)