Qt之QSS（暗橙色）

最新推荐文章于 2024-05-01 22:13:13 发布
最新推荐文章于 2024-05-01 22:13:13 发布
阅读量1.2k 收藏 9
点赞数 1
文章标签： ui
原文链接：https://yq.aliyun.com/articles/119797
版权

简述

我觉得一个好看的 UI 可以潜意识地激励我们，不仅可以让我们工作的更高效、更有乐趣，而且可以让应用程序变得更漂亮、更直观。

我比较喜欢风格一致的产品，让所有的东西看起来像是一个大家庭，给人一种专业的视觉享受。当做出很专业的产品时，你甚至可以很自豪地称自己为一个艺术家。

版权所有：一去丶二三里，转载请注明出处：http://blog.csdn.net/liang19890820

故事情节

首先，感谢 Yasin，为我们提供了一套很经典的 QSS 样式 - Qt dark orange stylesheet 。暗橙色（橙色 + 深灰色）的配色和 Tech-Artists 的风格很像，这个搭配很棒。

在文章开头的时候，作者写道：

When I started with Qt I looked for a good looking stylesheet out there but I couldn’t find a single one, seems like people doesn’t like to share their styles.
当我开始使用 Qt，想要寻找一个好看的样式表，但却找不到，人们似乎不喜欢分享他们的样式风格。

这是一个很有趣的现象，值得思考！

开源，是一种精神。。。分享，是一种态度。。。
共享知识，分享成长！

再次感谢作者。。。

PS：真想对作者说快来参考我的博客，你要的样式统统都有O(∩_∩)O哈哈~

QSS 样式

这里写图片描述

QToolTip
{
     border: 1px solid black;
     background-color: #ffa02f;
     padding: 1px;
     border-radius: 3px;
     opacity: 100;
}

QWidget
{
    color: #b1b1b1;
    background-color: #323232;
}

QWidget:item:hover
{
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #ca0619);
    color: #000000;
}

QWidget:item:selected
{
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}

QMenuBar::item
{
    background: transparent;
}

QMenuBar::item:selected
{
    background: transparent;
    border: 1px solid #ffaa00;
}

QMenuBar::item:pressed
{
    background: #444;
    border: 1px solid #000;
    background-color: QLinearGradient(
        x1:0, y1:0,
        x2:0, y2:1,
        stop:1 #212121,
        stop:0.4 #343434/*,
        stop:0.2 #343434,
        stop:0.1 #ffaa00*/
    );
    margin-bottom:-1px;
    padding-bottom:1px;
}

QMenu
{
    border: 1px solid #000;
}

QMenu::item
{
    padding: 2px 20px 2px 20px;
}

QMenu::item:selected
{
    color: #000000;
}

QWidget:disabled
{
    color: #404040;
    background-color: #323232;
}

QAbstractItemView
{
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #4d4d4d, stop: 0.1 #646464, stop: 1 #5d5d5d);
}

QWidget:focus
{
    /*border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);*/
}

QLineEdit
{
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #4d4d4d, stop: 0 #646464, stop: 1 #5d5d5d);
    padding: 1px;
    border-style: solid;
    border: 1px solid #1e1e1e;
    border-radius: 5;
}

QPushButton
{
    color: #b1b1b1;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646);
    border-width: 1px;
    border-color: #1e1e1e;
    border-style: solid;
    border-radius: 6;
    padding: 3px;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
}

QPushButton:pressed
{
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525);
}

QComboBox
{
    selection-background-color: #ffaa00;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646);
    border-style: solid;
    border: 1px solid #1e1e1e;
    border-radius: 5;
}

QComboBox:hover,QPushButton:hover
{
    border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}


QComboBox:on
{
    padding-top: 3px;
    padding-left: 4px;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525);
    selection-background-color: #ffaa00;
}

QComboBox QAbstractItemView
{
    border: 2px solid darkgray;
    selection-background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}

QComboBox::drop-down
{
     subcontrol-origin: padding;
     subcontrol-position: top right;
     width: 15px;

     border-left-width: 0px;
     border-left-color: darkgray;
     border-left-style: solid; /* just a single line */
     border-top-right-radius: 3px; /* same radius as the QComboBox */
     border-bottom-right-radius: 3px;
 }

QComboBox::down-arrow
{
     image: url(:/down_arrow.png);
}

QGroupBox:focus
{
border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}

QTextEdit:focus
{
    border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}

QScrollBar:horizontal {
     border: 1px solid #222222;
     background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0.0 #121212, stop: 0.2 #282828, stop: 1 #484848);
     height: 7px;
     margin: 0px 16px 0 16px;
}

QScrollBar::handle:horizontal
{
      background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #ffa02f, stop: 0.5 #d7801a, stop: 1 #ffa02f);
      min-height: 20px;
      border-radius: 2px;
}

QScrollBar::add-line:horizontal {
      border: 1px solid #1b1b19;
      border-radius: 2px;
      background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #ffa02f, stop: 1 #d7801a);
      width: 14px;
      subcontrol-position: right;
      subcontrol-origin: margin;
}

QScrollBar::sub-line:horizontal {
      border: 1px solid #1b1b19;
      border-radius: 2px;
      background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0, stop: 0 #ffa02f, stop: 1 #d7801a);
      width: 14px;
     subcontrol-position: left;
     subcontrol-origin: margin;
}

QScrollBar::right-arrow:horizontal, QScrollBar::left-arrow:horizontal
{
      border: 1px solid black;
      width: 1px;
      height: 1px;
      background: white;
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal
{
      background: none;
}

QScrollBar:vertical
{
      background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0, stop: 0.0 #121212, stop: 0.2 #282828, stop: 1 #484848);
      width: 7px;
      margin: 16px 0 16px 0;
      border: 1px solid #222222;
}

QScrollBar::handle:vertical
{
      background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 0.5 #d7801a, stop: 1 #ffa02f);
      min-height: 20px;
      border-radius: 2px;
}

QScrollBar::add-line:vertical
{
      border: 1px solid #1b1b19;
      border-radius: 2px;
      background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
      height: 14px;
      subcontrol-position: bottom;
      subcontrol-origin: margin;
}

QScrollBar::sub-line:vertical
{
      border: 1px solid #1b1b19;
      border-radius: 2px;
      background: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #d7801a, stop: 1 #ffa02f);
      height: 14px;
      subcontrol-position: top;
      subcontrol-origin: margin;
}

QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical
{
      border: 1px solid black;
      width: 1px;
      height: 1px;
      background: white;
}


QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical
{
      background: none;
}

QTextEdit
{
    background-color: #242424;
}

QPlainTextEdit
{
    background-color: #242424;
}

QHeaderView::section
{
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #616161, stop: 0.5 #505050, stop: 0.6 #434343, stop:1 #656565);
    color: white;
    padding-left: 4px;
    border: 1px solid #6c6c6c;
}

QCheckBox:disabled
{
color: #414141;
}

QDockWidget::title
{
    text-align: center;
    spacing: 3px; /* spacing between items in the tool bar */
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #323232, stop: 0.5 #242424, stop:1 #323232);
}

QDockWidget::close-button, QDockWidget::float-button
{
    text-align: center;
    spacing: 1px; /* spacing between items in the tool bar */
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #323232, stop: 0.5 #242424, stop:1 #323232);
}

QDockWidget::close-button:hover, QDockWidget::float-button:hover
{
    background: #242424;
}

QDockWidget::close-button:pressed, QDockWidget::float-button:pressed
{
    padding: 1px -1px -1px 1px;
}

QMainWindow::separator
{
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #161616, stop: 0.5 #151515, stop: 0.6 #212121, stop:1 #343434);
    color: white;
    padding-left: 4px;
    border: 1px solid #4c4c4c;
    spacing: 3px; /* spacing between items in the tool bar */
}

QMainWindow::separator:hover
{

    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #d7801a, stop:0.5 #b56c17 stop:1 #ffa02f);
    color: white;
    padding-left: 4px;
    border: 1px solid #6c6c6c;
    spacing: 3px; /* spacing between items in the tool bar */
}

QToolBar::handle
{
     spacing: 3px; /* spacing between items in the tool bar */
     background: url(:/images/handle.png);
}

QMenu::separator
{
    height: 2px;
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:0 #161616, stop: 0.5 #151515, stop: 0.6 #212121, stop:1 #343434);
    color: white;
    padding-left: 4px;
    margin-left: 10px;
    margin-right: 5px;
}

QProgressBar
{
    border: 2px solid grey;
    border-radius: 5px;
    text-align: center;
}

QProgressBar::chunk
{
    background-color: #d7801a;
    width: 2.15px;
    margin: 0.5px;
}

QTabBar::tab {
    color: #b1b1b1;
    border: 1px solid #444;
    border-bottom-style: none;
    background-color: #323232;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 2px;
    margin-right: -1px;
}

QTabWidget::pane {
    border: 1px solid #444;
    top: 1px;
}

QTabBar::tab:last
{
    margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
    border-top-right-radius: 3px;
}

QTabBar::tab:first:!selected
{
 margin-left: 0px; /* the last selected tab has nothing to overlap with on the right */


    border-top-left-radius: 3px;
}

QTabBar::tab:!selected
{
    color: #b1b1b1;
    border-bottom-style: solid;
    margin-top: 3px;
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:1 #212121, stop:.4 #343434);
}

QTabBar::tab:selected
{
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    margin-bottom: 0px;
}

QTabBar::tab:!selected:hover
{
    /*border-top: 2px solid #ffaa00;
    padding-bottom: 3px;*/
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background-color: QLinearGradient(x1:0, y1:0, x2:0, y2:1, stop:1 #212121, stop:0.4 #343434, stop:0.2 #343434, stop:0.1 #ffaa00);
}

QRadioButton::indicator:checked, QRadioButton::indicator:unchecked{
    color: #b1b1b1;
    background-color: #323232;
    border: 1px solid #b1b1b1;
    border-radius: 6px;
}

QRadioButton::indicator:checked
{
    background-color: qradialgradient(
        cx: 0.5, cy: 0.5,
        fx: 0.5, fy: 0.5,
        radius: 1.0,
        stop: 0.25 #ffaa00,
        stop: 0.3 #323232
    );
}

QCheckBox::indicator{
    color: #b1b1b1;
    background-color: #323232;
    border: 1px solid #b1b1b1;
    width: 9px;
    height: 9px;
}

QRadioButton::indicator
{
    border-radius: 6px;
}

QRadioButton::indicator:hover, QCheckBox::indicator:hover
{
    border: 1px solid #ffaa00;
}

QCheckBox::indicator:checked
{
    image:url(:/images/checkbox.png);
}

QCheckBox::indicator:disabled, QRadioButton::indicator:disabled
{
    border: 1px solid #444;
}

更多参考

weixin_33852020
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
QSS：QT样式表模板
02-05
QSS：QT样式表模板
qt中漂亮的几款 qss 样式
热门推荐
lvmengzou的专栏
10-17 1万+
Qt中漂亮的几款QSS /* === Shared === */ QStackedWidget, QLabel, QPushButton, QRadioButton, QCheckBox, QGroupBox, QStatusBar, QToolButton, QComboBox, QDialog { background-color: #222222; color: #BBB...
Qt界面美化之自定义qss样式表
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
03-02 4265
原生的QT界面不好看，有时候需要根据美工的设计图修改样式。如果使用QML的话搞界面是快，但是QML有点儿吃内存，有时简单的功能还是用传统c++的widget方便些。好在有qss，传统界面也可以美化的。QSS称为Qt Style Sheets也就是Qt样式表，它是Qt提供的一种用来自定义控件外观的机制。QSS大量参考了CSS的内容，只不过QSS的功能比CSS要弱很多，体现在选择器要少，可以使用的QSS属性也要少很多，并且并不是所有的属性都可以用在Qt的所有控件上。
QT控件样式设计，Qt中漂亮的几款QSS
扬灵的博客
08-25 3778
Qt中漂亮的几款QSS /* === Shared === */ QStackedWidget, QLabel, QPushButton, QRadioButton, QCheckBox,  QGroupBox, QStatusBar, QToolButton, QComboBox, QDialog {     background-color: #222222;     c
dark QSS
09-28 287
/*设置背景色和前景色*/ QMainWindow,  QAbstractItemView,   QTreeView::branch,  QStackWidget, QTabBar::tab{         color: #EAEAEA;         background: rgb(37, 37, 37);  } /*设置QAbstractItemView的派生类的item
qss样式表模板，包括了17种样式表。
03-03
qss样式表模板，包括了17种样式表。
qt qss 10套模板(收集)
活下去,学下去
11-12 1万+
1 /* Style by evilworks, 2012-2013. [email protected] This file is Public Domain. */ /* === Shared === */ QStackedWidget, QLabel, QPushButton, QRadioButton, QCheckBox, QGroupBox, QStatusBar, QToolButton, QComboBox, QDialog, QTabBar { font-f
QT各种控件常用样式表qss示例
野生猿-群号1025127672
07-11 2375
如上图所示，表头的文字区域，变成了颜色更深的深绿色，这是因为这个区域的颜色，实际上是3层颜色的叠加：QTableView整体的绿色+QHeadView表头整体的黑色半透明+section表头文字区域黑色半透明。这个控件比较复杂，里面包含了滑动条、表头（又细分为内容区/空白区）、表格、整体、左上角按钮等多种不同的元素，他们之间有复杂的叠层关系。下面设置表头背景色，黑色，半透明，透明度为50。发现这个绿色背景并没有作用于整体，表头部分仍然为白色，那是因为表头在顶层，遮住了QTableView的绿色背景。
qt -- 常用的qss样式总结
ccr的博客
12-06 5793
设置背景颜色 在构造函数里添加： setAutoFillBackground(true);//必须有这条语句 setPalette(QPalette(QColor(250,250,200)));
Qt之QSS文件使用.rar
09-23
5.保证无毒 1.简单,方便,实用 3.实例可以自行改用 1.如有非法,本人无法律责任！ 8.更多作品,查找标签“朱建强”7.... 4.如需联系我请看左边数字！1.如不知代表何物，那就放弃计算机吧！ 0....CSDN老板不让我上传联系方式。
好用的QT-qss漂亮界面
10-25
三总效果，切换方便，含代码和图片
Qt之QSS（白色靓丽）
03-26
Qt之QSS（白色靓丽）
qt主题qss收集.rar
06-21
本资源内qss可直接添加到工程中我的资源，然后调用即可一键换肤
Qt使用QSS对界面进行美化
11-23
使用QSS对界面进行美化 ；点击按钮，进行界面样式切换（银色和黑色）
鸿蒙launcher浅析
xianrenli38的博客
04-28 723
launcher的ui加载 是这样的，使用的不是UIAbility，而是没见过的ServiceExtension.,如此，添加的UI。product 业务形态层：区分不同产品、不同屏幕的各形态桌面，含有桌面窗口、个性化业务，组件的配置，以及个性化资源包。之前做过Android launcher，所以对鸿蒙的launcher挺好奇的，看看和普通鸿蒙应用有何区别。feature 公共特性层：抽象的公共特性组件集合，可以被各桌面形态引用。common 公共能力层：基础能力集，每个桌面形态都必须依赖的模块。
在UI界面中播放视频_unity基础开发教程
最新发布
成长之路，任重道远，期待你的关注！
05-01 659
之前我写过一篇在场景中播放视频的文章，但是在开发中有时候也会在UI的界面中播放视频，这期我们做一下在UI的界面中播放视频。操作步骤比较简单，到这里就完成了，如果有问题的话可以在评论区留言，下期见，拜拜！
xs9922b_colorbar.bat
自由软件的天堂
04-28 324
通过用户空间I2C操作让XS9922B输出彩条
移植 SquareLine 导出的 UI 源码到 HMI-Board
嵌入式小菜鸟一枚~
04-28 1035
移植 SquareLine Studio 设计 UI 到 HMI-Board
Qt之QSS（QTreeView）
06-02
QSS（Qt Style Sheets）是一种用于设置 Qt 应用程序样式的机制，可以通过 QSS 来改变应用程序的外观和布局。在 QTreeView 中，可以通过 QSS 来设置 QTreeView 的样式，包括背景颜色、字体、边框、选中项样式等。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值