精华内容
下载资源
问答
  • QT styleSheet

    2019-01-17 13:03:28
    QT 中的QPushButton和QLabel的样式表设置, 设置背景图片
  • 这是一个大神总结的一些Qt界面美化的实例 每一种方式大神都有实例代码, 可以好好借鉴一下 希望大家共同进步
  • Qt stylesheet

    2012-05-28 15:25:27
    Qt stylesheet 感觉还不错。I think this is a good resoure for qt stylesheet new leaner.
  • Qt样式表Qt StyleSheet(QSS)用法和例程 QT样式表setStyleSheet使用例程,包含13种不同的样式,实现简单换皮肤效果。 主要修改: 1.button/edit/label/widget等样式更改。 2.去除窗口标题,自绘标题栏并实现最小最大...

    Qt样式表Qt StyleSheet(QSS)用法和例程

    QT样式表setStyleSheet使用例程,包含13种不同的样式,实现简单换皮肤效果。

    主要修改:
    1.button/edit/label/widget等样式更改。
    2.去除窗口标题,自绘标题栏并实现最小最大关闭功能。
    3.支持手动修改颜色值,设置后查看效果。

    补充说明:颜色风格和使用方法感谢网上的各路大神,我这边只是做了简单的整合和测试,代码小白级别,望见谅。

    Demo链接(白嫖): https://download.csdn.net/download/long00000kid/15900563.


    效果示例

    自定义风格
    自定义风格
    淡蓝色风格
    淡蓝色风格
    浅灰色风格
    浅灰色风格

    调用方式

    示例如下:

    	QString stylesheet = "QLineEdit,QTextEdit,QTableWidget{color:#DCDCDC;background: #444444;}";
    	this->setStyleSheet(stylesheet);
    

    部分代码

    设置无边框和界面透明:

        this->setWindowFlags(Qt::FramelessWindowHint);   //设置无边框窗口//
    //   this->setWindowFlags(Qt::CustomizeWindowHint);   //设置无标题窗口//
        this->setWindowOpacity(0.98);//设置程序界面透明//
    

    样式风格:

    void MainWindow::SelectStyle(int style)
    {
        switch (style) {
        case 0://自定义风格//
            SetStyle(m_styleUser[0], m_styleUser[1], m_styleUser[2], m_styleUser[3], m_styleUser[4], m_styleUser[5], m_styleUser[6], m_styleUser[7]);
            break;
        case 1://银色风格//
            SetStyle("#000000", "#F5F5F5", "#B2B6B9", "#E1E4E6", "#CCD3D9", "#F2F3F4", "#E7E9EB", "#00BB9E");
            break;
        case 2://蓝色风格//
            SetStyle("#324C6C", "#CFDDEE", "#7F9AB8", "#C0D3EB", "#BCCFE7", "#D2E3F5", "#CADDF3", "#00BB9E");
            break;
        case 3://淡蓝色风格//
            SetStyle("#386487", "#EAF7FF", "#C0DCF2", "#DEF0FE", "#C0DEF6", "#F2F9FF", "#DAEFFF", "#00BB9E");
            break;
        case 4://深蓝色风格//
            SetStyle("#7AAFE3", "#0E1A32", "#132743", "#133050", "#133050", "#033967", "#033967", "#00BB9E");
            break;
        case 5://灰色风格//
            SetStyle("#000000", "#F0F0F0", "#A9A9A9", "#E4E4E4", "#A2A2A2", "#DBDBDB", "#C1C1C1", "#00BB9E");
            break;
        case 6://浅灰色风格//
            SetStyle("#6F6F6F", "#E6E6E6", "#D4D0C8", "#EEEEEE", "#E5E5E5", "#FCFCFC", "#F7F7F7", "#00BB9E");
            break;
        case 7://深灰色风格//
            SetStyle("#5D5C6C", "#EBECF0", "#A9ACB5", "#D8D9DE", "#C8C8D0", "#EFF0F4", "#DDE0E7", "#00BB9E");
            break;
        case 8://黑色风格//
            SetStyle("#F0F0F0", "#464646", "#353535", "#4D4D4D", "#292929", "#636363", "#575757", "#00BB9E");
            break;
        case 9://浅黑色风格//
            SetStyle("#E7ECF0", "#616F76", "#738393", "#667481", "#566373", "#778899", "#708090", "#00BB9E");
            break;
        case 10://深黑色风格//
            SetStyle("#D7E2E9", "#1F2026", "#111214", "#242629", "#141518", "#007DC4", "#0074BF", "#00BB9E");
            break;
        case 11://PS黑色风格//
            SetStyle("#DCDCDC", "#444444", "#242424", "#484848", "#383838", "#646464", "#525252", "#00BB9E");
            break;
        case 12://黑色扁平//
            SetStyle("#BEC0C2", "#2E2F30", "#67696B", "#404244", "#404244", "#262829", "#262829", "#00BB9E");
            break;
        case 13://白色扁平//
            SetStyle("#57595B", "#FFFFFF", "#B6B6B6", "#E4E4E4", "#E4E4E4", "#F6F6F6", "#F6F6F6", "#00BB9E");
            break;
        default:
            break;
        }
    }
    

    自定义风格:

    	QString stylesheet =
    		"QWidget{background:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #585858, stop: 1.0 #484848);}"
    		"QLineEdit,QTextEdit,QTableWidget{color:#DCDCDC;background: #444444;selection-color:black;selection-font:bold;selection-background-color:white;border-radiusx:2px}"
    		//普通态//
    		"QComboBox, QPushButton{color:#DCDCDC;background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, "
    		"stop: 0 #484848, stop: 0.4 #424242,"
    		"stop: 0.5#525252, stop: 1.0 #646464);border:2px groove gray;border-radius:6px;padding:2px 6px;}"
    		//停留态//
    		"QPushButton:hover{color:rgb(250,250,240);background-color:rgb(15,80,138);font:bold;}"
    		"QLineEdit:hover{color:rgb(250,250,240);background-color:rgb(15,80,138);font:bold;}"
    		"QTextEdit:hover{color:rgb(250,250,240);background-color:rgb(15,80,138);font:bold;}"
    		//按下态//
    		"QPushButton:pressed{background-color:rgb(13,69,119);padding-left:8px;padding-top:4px;}"
    		"QLabel{color:#DCDCDC;}";
    	this->setStyleSheet(stylesheet);
    

    总结

    用到的东东并不多,来来去去就几种,具体的解释和效果建议直接测试,或者找度娘,一查一个准。
    如果想程序更加美观好看,找美工吧,贴图效果更好,如果没这个精力,现在这种方法比较简单快捷。

    展开全文
  • qt stylesheet

    千次阅读 2016-04-08 13:19:53
    Qtstylesheet 用法, QSS实例 规则见帮助文档 背景图片九宫格 border-width: 5px;  border-image: url(./run/images/news/group_normal.png) 5 5 5 5 stretch stretch; border-width必须要加上,用...

    Qt 之 stylesheet 用法, QSS实例

    规则见帮助文档


    背景图片九宫格
    border-width: 5px; 
    border-image: url(./run/images/news/group_normal.png) 5 5 5 5 stretch stretch;

    border-width必须要加上,用border-image来自动根据大小扩展,而不用background-image

    字体颜色
    color: white;

    按钮3种状态:正常,鼠标置上,按下
    QPushButton
    QPushButton:hover
    QPushButton:checked
    对于checked,要把QPushButton设置为可checkable。(setCheckable(true))



    实例: http://blog.csdn.net/xuhongtao123459/archive/2010/09/10/5875614.aspx

    01.* {   
    02.  font-size
    :13px;   
    03.  color
    :white;   
    04.  font-family
    :"宋体";   
    05.
    }
       
    06.CallWidget QLineEdit#telEdt  
    07.
    {   
    08.  font-size
    :24px;   
    09.
    }
       
    10.QMainWindow,QDialog
    {   
    11.     background
    : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,   
    12.                                 stop: 0 #1B2534, stop: 0.4 #010101,   
    13.                                 stop: 0.5 #000101, stop: 1.0 #1F2B3C)
    ;   
    14.
    }
       
    15.QWidget
    {   
    16.    background
    :#121922;   
    17.
    }
       
    18.QLabel
    {   
    19.   background
    :transparent;   
    20.
    }
       
    21.DailForm QLineEdit#phoneLineEdt
    {   
    22.  font-size
    :36px;   
    23.  font-weight
    : bold;   
    24.
    }
       
    25.QPushButton,QToolButton
    {   
    26.    background
    : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,   
    27.                                 stop: 0 #5B5F5F, stop: 0.5 #0C2436,   
    28.                                 stop: 1.0 #27405A)
    ;   
    29.    border-style
    : outset;   
    30.    border-width
    : 1px;   
    31.    border-radius
    : 5px;   
    32.    border-color
    : #11223F;   
    33.    padding
    : 1px;   
    34.
    }
       
    35.QPushButton::hover,QToolButton::hover
    {   
    36.    background
    : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,   
    37.                                 stop: 0 #758385, stop: 0.5 #122C39,   
    38.                                 stop: 1.0 #0E7788)
    ;   
    39.    border-color
    : #11505C;   
    40.
    }
       
    41.QPushButton::pressed,QToolButton::pressed
    {   
    42.    background
    : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,   
    43.                                 stop: 0 #969B9C, stop: 0.5 #16354B,   
    44.                                 stop: 1.0 #244F76)
    ;   
    45.    border-color
    : #11505C;   
    46.
    }
       
    47.QPushButton::disabled,QToolButton::disabled
    {   
    48.    background
    : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,   
    49.                                 stop: 0 #282B2C, stop: 0.5 #09121A,   
    50.                                 stop: 1.0 #111D29)
    ;   
    51.    border-color
    : #0A1320;   
    52.    color
    :#6A6864;   
    53.
    }
       
    54.QDialog QPushButton,QDialog QToolButton
    {   
    55.  min-width
    :30px;   
    56.  min-height
    :23px;   
    57.
    }
       
    58.QToolButton[objectName="minimizeToolBtn"] 
    {   
    59.    background
    : transparent;   
    60.    border
    :none;   
    61.    image
    :url(qss/minimize.png)   
    62.
    }
       
    63.QToolButton[objectName="minimizeToolBtn"]:hover,QToolButton[objectName="minimizeToolBtn"]:pressed 
    {   
    64.    image
    :url(qss/minimize_hover.png)   
    65.
    }
       
    66.QToolButton[objectName="maximizeToolBtn"] 
    {   
    67.    background
    : transparent;   
    68.    border
    :none;   
    69.    image
    :url(qss/maximize.png)   
    70.
    }
       
    71.QToolButton[objectName="maximizeToolBtn"]:hover,QToolButton[objectName="maximizeToolBtn"]:pressed 
    {   
    72.    image
    :url(qss/maximize_hover.png)   
    73.
    }
       
    74.QToolButton[objectName="closeToolBtn"],QToolButton[objectName="customCloseWindow"] 
    {   
    75.    background
    : transparent;   
    76.    border
    :none;   
    77.    image
    :url(qss/close.png)   
    78.
    }
       
    79.QToolButton[objectName="closeToolBtn"]:hover,QToolButton[objectName="closeToolBtn"]:pressed
    {   
    80.    image
    :url(qss/close_hover.png)   
    81.
    }
       
    82.QToolButton[objectName="customCloseWindow"]:hover,QToolButton[objectName="customCloseWindow"]:pressed
    {   
    83.    image
    :url(qss/close_hover.png)   
    84.
    }
       
    85.QToolButton[objectName="titleSetUpToolBtn"]
    {   
    86.    background
    : transparent;   
    87.    border
    :none;   
    88.    image
    :url(qss/setup.png)   
    89.
    }
       
    90.DailForm QToolButton#oneToolBtn,QToolButton#OneToolBtn,QToolButton#twoToolBtn,QToolButton#threeToolBtn,   
    91.         QToolButton#fourToolBtn,QToolButton#fiveToolBtn,QToolButton#sixToolBtn,   
    92.         QToolButton#sevenToolBtn,QToolButton#eightToolBtn,QToolButton#nineToolBtn,   
    93.         QToolButton#starToolBtn,QToolButton#zeroToolBtn,QToolButton#sharpToolBtn 
    {   
    94.    font-size
    :36px;   
    95.    border-radius
    : 10px;   
    96.
    }
       
    97.DailForm QToolButton#delToolBtn
    {   
    98.    border-radius
    : 10px;   
    99.
    }
       
    100.QFrame
    {   
    101.    border-color
    :#32435E;   
    102.    border-width
    :1px;   
    103.    border-radius
    : 3px;   
    104.
    }
       
    105.QLineEdit,QTextEdit 
    {   
    106.    border
    : 1px solid #32435E;   
    107.    border-radius
    : 3px;   
    108.    
    /* padding: 0 8px; */  
    109.    background
    : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,   
    110.                                 stop: 0 #080B10,   
    111.                                 stop: 1.0 #212C3F)
    ;   
    112.    selection-background-color
    : #0A246A;   
    113.
    }
       
    114.QLineEdit::hover
    {   
    115.  border-color
    :#5D8B9E;   
    116.
    }
       
    117.QLineEdit[echoMode="3"] 
    {   
    118.     lineedit-password-character
    : 9679;   
    119.
    }
       
    120.#QLineEdit:read-only 
    {   
    121.     background
    : #543F7C;   
    122.
    }
       
    123.QTabWidget::pane 
    { /* The tab widget frame */  
    124.     border
    : 0px solid #32435E;   
    125.     position
    : absolute;   
    126.     left
    : -0.1em;   
    127.
    }
       
    128.QTabWidget#MainTabWidget::tab-bar 
    {   
    129.     left
    : -3px; /* move to the right by 5px */  
    130.
    }
       
    131.QTabWidget#MainTabWidget QTabBar::tab 
    {   
    132.     height
    : 14ex;   
    133.     width
    : 14ex;   
    134.
    }
       
    135.QTabBar::tab 
    {   
    136.     background
    : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,   
    137.                                 stop: 0 #292F31, stop: 1 #0C131E)
    ;   
    138.
    }
       
    139.QTabBar::tab:selected
    {   
    140.     background
    : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,   
    141.                                 stop: 0 #113845,  stop: 1.0 #15A8FF)
    ;   
    142.
    }
       
    143.QTabBar::tab:hover 
    {   
    144.     background
    : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,   
    145.                                 stop: 0 #113845,  stop: 1.0 #0E6F80)
    ;   
    146.
    }
       
    147.#QTabBar::tab:selected 
    {   
    148.     border-color
    : #32435E;   
    149.     border-right-color
    : #32435E; /* same as pane color */  
    150.
    }
       
    151.#QTabBar::tab:!selected 
    {   
    152.     margin-left
    : 2px; /* make non-selected tabs look smaller */  
    153.
    }
       
    154.#QTabBar:tab:first:selected 
    {   
    155.    margin-top
    : 0;   
    156.
    }
       
    157.QTabBar:tab:last:selected 
    {   
    158.    margin-right
    : 0;   
    159.
    }
       
    160.QTabBar:tab:only-one 
    {   
    161.     margin
    : 0;   
    162.
    }
       
    163.QListWidget
    {   
    164.    border
    : 1px solid #32435E;   
    165.    background
    :#050609;   
    166.
    }
       
    167.QListWidget::item:selected 
    {   
    168.     
    /*border: 0px solid #33CCFF;*/  
    169.     border
    :none;   
    170.     background
    : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,   
    171.                                 stop: 0 #6A848C,  stop: 1.0 #0F9EAF)
    ;   
    172.     padding
    :0px;   
    173.     margin
    :0px;   
    174.
    }
       
    175.#QListWidget::item:selected:!active 
    {   
    176.     border-width
    : 0px ;   
    177.
    }
       
    178.#QListWidget::item:selected:active 
    {   
    179.     border-width
    : 1px;   
    180.
    }
       
    181.  
    182.QComboBox 
    {   
    183.     border
    : 1px solid #32435E;   
    184.     border-radius
    : 3px;   
    185.     padding
    : 1px 18px 1px 3px;   
    186.     min-width
    : 6em;   
    187.
    }
       
    188.QComboBox::hover
    {   
    189.  border-color
    :#5D8B9E;   
    190.
    }
       
    191.QComboBox:editable 
    {   
    192.     background
    : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,   
    193.                                 stop: 0 #080B10,   
    194.                                 stop: 1.0 #212C3F)
    ;   
    195.
    }
       
    196.QComboBox:!editable, QComboBox::drop-down:editable 
    {   
    197.      background
    : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,   
    198.                                 stop: 0 #080B10,   
    199.                                 stop: 1.0 #212C3F)
    ;   
    200.
    }
       
    201.
    /* QComboBox gets the "on" state when the popup is open */   
    202.QComboBox:!editable:on, QComboBox::drop-down:editable:on 
    {   
    203.     background
    : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,   
    204.                                 stop: 0 #080B10,   
    205.                                 stop: 1.0 #212C3F)
    ;;   
    206.
    }
       
    207.QComboBox:on 
    { /* shift the text when the popup opens */  
    208.     padding-top
    : 3px;   
    209.     padding-left
    : 4px;   
    210.
    }
       
    211.QComboBox::drop-down 
    {   
    212.     subcontrol-origin
    : padding;   
    213.     subcontrol-position
    : top right;   
    214.     width
    : 15px;   
    215.     border-left-width
    : 1px;   
    216.     border-left-color
    : 32435E;   
    217.     border-left-style
    : solid; /* just a single line */  
    218.     border-top-right-radius
    : 3px; /* same radius as the QComboBox */  
    219.     border-bottom-right-radius
    : 3px;   
    220.
    }
       
    221.QComboBox::down-arrow 
    {   
    222.     image
    : url(qss/downarrow.png);   
    223.
    }
       
    224.QComboBox::down-arrow:on 
    { /* shift the arrow when popup is open */  
    225.     top
    : 1px;   
    226.     left
    : 1px;   
    227.
    }
       
    228.QComboBox QAbstractItemView 
    {   
    229.     border
    : 2px solid #32435E;   
    230.     selection-background-color
    : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,   
    231.                                 stop: 0 #506B79,   
    232.                                 stop: 1.0 #0D95A6)
    ;   
    233.    background
    : qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,   
    234.                                 stop: 0 #1B2534, stop: 0.4 #010101,   
    235.                                 stop: 0.5 #000101, stop: 1.0 #1F2B3C)
    ;   
    236.
    }
      
    展开全文
  • Qt StyleSheet详解

    千次阅读 2019-01-22 11:02:22
    在涉及到Qt 美工的时候首先需要掌握CSS 级联样式表。 下面将通过几个例子来介绍一下怎样使用Qt中的部件类型设计。自定义的前台背景与后台背景的颜色: 如果需要一个文本编辑器的背景变为黄色, 下面是代码行: ...

    在涉及到Qt 美工的时候首先需要掌握CSS 级联样式表。

    下面将通过几个例子来介绍一下怎样使用Qt中的部件类型设计。自定义的前台背景与后台背景的颜色:

    如果需要一个文本编辑器的背景变为黄色, 下面是代码行:

    qApp->setStyleSheet("QLineEdit { background-color: yellow }");

    针对一个对话框的内容中使用QLineEdit以及QLineEdit的子类的背景都变成黄色, 下面是代码:

    myDialog ->setStyleSheet("QLineEdit { background-color: yellow }");

    如果只需要制定一个QLineEdit的内容, 将使用QObject::setObjectName() 下面是一个实例:

    myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");

    同时也可以针对每一个指定的部件做直接的类型设置, 下面是一个实例:

    ui.nameEdit->setStyleSheet("background-color: yellow");

    为了做一个鲜明的对比, 将要为文本设置合适的颜色。

    nameEdit->setStyleSheet("color: blue; background-color: yellow");

    当然最好的办法还有针对选择的文本来进行设置, 下面设置了一个选择文本的类型属性: nameEdit->setStyleSheet("color: blue;"

                             "background-color: yellow;"

                             "selection-color: yellow;"

                             "selection-background-color: blue;");

    在有一些情况下, 不需要用户参与, 而有软件设计人员来自己制定样式, 即使这些是有违审美角度。  下面就从应用程序开发角度来设计样式。

    *[mandatoryField="true"] { background-color: yellow }

    上面的意思是一些强制的区域是需要用Qt 的属性管理来强制设置成为黄色的背景。

    这样一些强制的部件,将需要通过函数来设置当前的属性已经被强制设置, 下面是实现的代码:

    QLineEdit *nameEdit = new QLineEdit(this);

    nameEdit->setProperty("mandatoryField", true);

    QLineEdit *emailEdit = new QLineEdit(this);

    emailEdit->setProperty("mandatoryField", true);

    QSpinBox *ageSpinBox = new QSpinBox(this);

    ageSpinBox->setProperty("mandatoryField", true);

    QPushButton * evilButton = new QPushButton (this);

    evilButton ->setText("Button");

    下面我们将通过一个按钮的部件来设置属性样式:

    首先来设置一下样式:

    QPushButton#evilButton { background-color: red }

    说明设置的当前的按钮为红色。作为一个flat 平滑的按钮时没有边界的。 下面是来改进一下对边界的设置。

    QPushButton#evilButton {

         background-color: red;

         border-style: outset;

         border-width: 2px;

         border-color: beige;

     } 

    在这里设置了一个边界的类型与边界的宽度。  这样看上去就好多了,文档中无法展现图片, 有兴趣可以去Qt 的变成环境当中去尝试。即使这样设计, 按钮看上去也是显得混乱,与主部件没有办法分开。 首先是在边界设置出一个空间出来, 并且强制的制定最小宽度,与环绕的弧度, 并且提供一个按钮的字体设置, 似的按钮看上去比较好看。

    QPushButton#evilButton {

         background-color: red;

         border-style: outset;

         border-width: 2px;

         border-radius: 6px;

         border-color: beige;

         font: bold 14px;

         min-width: 10em;

         padding: 6px;

     }

    如此这样当我们点击按钮的时候按钮也不会发生什么样的深刻变化。  所以就需要指定一个合适的背景颜色与不一样的边界类型。

    QPushButton#evilButton {

         background-color: red;

         border-style: outset;

         border-width: 2px;

         border-radius: 10px;

         border-color: beige;

         font: bold 14px;

         min-width: 10em;

         padding: 6px;

    }

    QPushButton#evilButton:pressed {

         background-color: rgb(224, 0, 0);

         border-style: inset;

    }

    指定QPushButton 菜单指示器的子控制子控提供了访问子子元素的功能, 例如通常的时候一个按钮将会管理一个菜单, 

    QPushButton#evilButton::menu-indicator {

         image: url(myindicator.png);

    }

    同时如果美化一个按钮的话, 那么将可以通过定位符来确定美化按钮的路径, 通常可以是一个图片。 

    QPushButton::menu-indicator {

         image: url(myindicator.png);

         subcontrol-position: right center;

         subcontrol-origin: padding;

         left: -2px;

    }

    经过以上的设置那么QPushButton 将会在方格的中心显示一个myindicator.png 的图片。 

     

    复杂区域的例子:

    当应对于一个用户可编辑可输入的部件的时候, 将需要设计到用户选择区域的颜色设置, 与类型设置, 下面将通过使用QLineEdit 部件来进行演示:

    QLineEdit { color: red }

    QLineEdit[readOnly="true"]{color:gray}

    在团队开发的时候, 需要设计到不同颜色的设置, 或者说不同类型的设置,那么就需要在样式编辑当中有多种选择,将不需要的那部分,注释掉:

    QLineEdit { color: red }

    QLineEdit[readOnly="true"] { color: gray }

    #registrationDialog QLineEdit { color: brown }

    自定义制定的部件

    这个部分提供了一些自定义特殊部件的某种样式

    定制QAbstractScrollArea 

    比如说一些QAbstractScrollArea 类, 例如 QTextEdit 与QTextBrowser . 同时可以使用后台的属性来进行设置。 例如来设置一个 背景图片。 

    QTextEdit, QListView {

         background-color: white;

         background-image: url(draft.png);

         background-attachment: scroll;

    }

    下面的代码是让背景图片与可浏览的区域大小相同:

    QTextEdit, QListView {

         background-color: white;

         background-image: url(draft.png);

         background-attachment: fixed;

    }

    QCheckBox 与QRadioButton 具有想色的属性, 他们之间的不同时QCheckBox是返回当前的状态:

    QCheckBox {

         spacing: 5px;

    }

    QCheckBox::indicator {

         width: 13px;

         height: 13px;

     }

    QCheckBox::indicator:unchecked {

         image: url(:/images/checkbox_unchecked.png);

    }

    QCheckBox::indicator:unchecked:hover {

         image: url(:/images/checkbox_unchecked_hover.png);

    }

    QCheckBox::indicator:unchecked:pressed {

         image: url(:/images/checkbox_unchecked_pressed.png);

    }

    QCheckBox::indicator:checked {

         image: url(:/images/checkbox_checked.png);

    }

    QCheckBox::indicator:checked:hover {

         image: url(:/images/checkbox_checked_hover.png);

    }

    QCheckBox::indicator:checked:pressed {

         image: url(:/images/checkbox_checked_pressed.png);

    }

    QCheckBox::indicator:indeterminate:hover {

         image: url(:/images/checkbox_indeterminate_hover.png);

    }

    QCheckBox::indicator:indeterminate:pressed {

         image: url(:/images/checkbox_indeterminate_pressed.png);

    }

    下面是对QComboBox下拉列表框进行的样式设计:

    QComboBox {

         border: 1px solid gray;

         border-radius: 3px;

         padding: 1px 18px 1px 3px;

         min-width: 6em;

    }

    QComboBox:editable {

         background: white;

    }

    QComboBox:!editable, QComboBox::drop-down:editable {

          background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                      stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,

                                      stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);

    }

     /* QComboBox gets the "on" state when the popup is open */

    QComboBox:!editable:on, QComboBox::drop-down:editable:on {

         background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                     stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,

                                     stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);

    }

    QComboBox:on { /* shift the text when the popup opens */

         padding-top: 3px;

         padding-left: 4px;

    }

    QComboBox::drop-down {

         subcontrol-origin: padding;

         subcontrol-position: top right;

         width: 15px;

         border-left-width: 1px;

         border-left-color: darkgray;

         border-left-style: solid; /* 仅此一行 */

         border-top-right-radius: 3px; 

         border-bottom-right-radius: 3px;

    }

    QComboBox::down-arrow {

         image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);

    }

    QComboBox::down-arrow:on { /* shift the arrow when popup is open */

         top: 1px;

         left: 1px;

    }

    自定的QSpinBox

    QSpinBox {

         padding-right: 15px; /* make room for the arrows */

         border-image: url(:/images/frame.png) 4;

         border-width: 3;

    }

    QSpinBox::up-button {

         subcontrol-origin: border;

         subcontrol-position: top right; /* position at the top right corner */

         width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */

         border-image: url(:/images/spinup.png) 1;

         border-width: 1px;

    }

    QSpinBox::up-button:hover {

         border-image: url(:/images/spinup_hover.png) 1;

     }

    QSpinBox::up-button:pressed {

         border-image: url(:/images/spinup_pressed.png) 1;

    }

    QSpinBox::up-arrow {

         image: url(:/images/up_arrow.png);

         width: 7px;

         height: 7px;

    }

    QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off { /* off state when value is max */

        image: url(:/images/up_arrow_disabled.png);

    }

    QSpinBox::down-button {

         subcontrol-origin: border;

         subcontrol-position: bottom right; /* position at bottom right corner */

         width: 16px;

         border-image: url(:/images/spindown.png) 1;

         border-width: 1px;

         border-top-width: 0;

    }

    QSpinBox::down-button:hover {

         border-image: url(:/images/spindown_hover.png) 1;

    }

    QSpinBox::down-button:pressed {

         border-image: url(:/images/spindown_pressed.png) 1;

    }

    QSpinBox::down-arrow {

         image: url(:/images/down_arrow.png);

         width: 7px;

         height: 7px;

    }

    QSpinBox::down-arrow:disabled,

     QSpinBox::down-arrow:off { /* off state when value in min */

        image: url(:/images/down_arrow_disabled.png);

    }

    自定义的 QFrame

    QFrame, QLabel, QToolTip {

         border: 2px solid green;

         border-radius: 4px;

         padding: 2px;

         background-image: url(images/welcome.png);

    }

    定制QGroupbox

    QGroupBox {

         background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                           stop: 0 #E0E0E0, stop: 1 #FFFFFF);

         border: 2px solid gray;

         border-radius: 5px;

         margin-top: 1ex; /* leave space at the top for the title */

    }

    QGroupBox::title {

         subcontrol-origin: margin;

         subcontrol-position: top center; /* position at the top center */

         padding: 0 3px;

         background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                           stop: 0 #FFOECE, stop: 1 #FFFFFF);

    }

    对于有一个可选择的QGroupBox , 使用{#indicator-sub}{::indicator}  他的类型控制就类似于QCheckBox.

     

    QGroupBox::indicator {

         width: 13px;

         height: 13px;

    }

    QGroupBox::indicator:unchecked {

         image: url(:/images/checkbox_unchecked.png);

    }

    定制 QHeaderView

    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;

    }

     /* style the sort indicator */

    QHeaderView::down-arrow {

         image: url(down_arrow.png);

    }

    QHeaderView::up-arrow {

         image: url(up_arrow.png);

    }

    定制QLineEdit

    QLineEdit {

         border: 1px solid gray;

         border-radius: 4px;

         padding: 0 8px;

         background: white;

         selection-background-color: darkgray;

    }

    当一个QLineEdit 需要使用一个密码的模式的话那么将设置成为QLineEdit::Password  这样属性就被使用了。

    QLineEdit[echoMode="2"] {

         lineedit-password-character: 9679;

    }

    QLineEdit:read-only {

         background: lightblue;

    }

    定制QMenu

    QMenu {

         background-color: #ABABAB; /* 设置菜单的背景 */

         border: 1px solid black;

    }

    QMenu::item {

         /*  设置菜单的项目的背景         */

         background-color: transparent;

    }

    QMenu::item:selected { /* 当用户使用鼠标活着键盘进行选择的时候选择项的颜色 */

         background-color: #654321;

    }

    对于菜单部件的一些其他的选项, 下面提供了许多高级的设置:

    QMenu {

         background-color: white;

         margin: 2px; /* 围绕菜单的一些空间 */

    }

    QMenu::item {

         padding: 2px 25px 2px 20px;

         border: 1px solid transparent; /* reserve space for selection border */

    }

    QMenu::item:selected {

         border-color: darkblue;

         background: rgba(100, 100, 100, 150);

    }

    QMenu::icon:checked { /* appearance of a 'checked' icon */

         background: gray;

         border: 1px inset gray;

         position: absolute;

         top: 1px;

         right: 1px;

         bottom: 1px;

         left: 1px;

    }

    QMenu::separator {

         height: 2px;

         background: lightblue;

         margin-left: 10px;

         margin-right: 5px;

    }

    QMenu::indicator {

         width: 13px;

         height: 13px;

    }

     /* non-exclusive indicator = check box style indicator (see QActionGroup::setExclusive) */

    QMenu::indicator:non-exclusive:unchecked {

         image: url(:/images/checkbox_unchecked.png);

    }

    QMenu::indicator:non-exclusive:unchecked:selected {

         image: url(:/images/checkbox_unchecked_hover.png);

    }

    QMenu::indicator:non-exclusive:checked {

         image: url(:/images/checkbox_checked.png);

    }

    QMenu::indicator:non-exclusive:checked:selected {

         image: url(:/images/checkbox_checked_hover.png);

    }

     /* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */

    QMenu::indicator:exclusive:unchecked {

         image: url(:/images/radiobutton_unchecked.png);

    }

    QMenu::indicator:exclusive:unchecked:selected {

         image: url(:/images/radiobutton_unchecked_hover.png);

    }

    QMenu::indicator:exclusive:checked {

         image: url(:/images/radiobutton_checked.png);

    }

    QMenu::indicator:exclusive:checked:selected {

         image: url(:/images/radiobutton_checked_hover.png);

    }

    定制菜单条

    QMenuBar {

         background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,

                                           stop:0 lightgray, stop:1 darkgray);

    }

    QMenuBar::item {

         spacing: 3px; /* 菜单栏项目空间大小 */

         padding: 1px 4px;

         background: transparent;

         border-radius: 4px;

    }

     QMenuBar::item:selected { /* 当用键盘或者鼠标选择的时候的背景 */

         background: #a8a8a8;

    }

    QMenuBar::item:pressed {

         background: #888888;

    }

    定制进度条

    QProgressBar {

         border: 2px solid grey;

         border-radius: 5px;

    }

    QProgressBar::chunk {

         background-color: #05B8CC;

         width: 20px;

    }

    QProgressBar {

         border: 2px solid grey;

         border-radius: 5px;

         text-align: center;

    }

    QProgressBar::chunk {

         background-color: #CD96CD;

         width: 10px;

         margin: 0.5px;

    }

    定制按钮

    QPushButton {

             border: 1px solid #8f8f91;

             border-radius: 3px;

             background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                               stop: 0 #f6f7fa, stop: 1 #dadbde);

             min-width: 80px;

    }

    QPushButton:pressed {

             background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                               stop: 0 #dadbde, stop: 1 #f6f7fa);

    }

    QPushButton:flat {

            border: none; /*  没有边框的按钮 */

    }

    QPushButton:default {

             border-color: navy; /* 使得按钮显示变得更加突出 */

    }

    QPushButton:open { /* when the button has its menu open */

             background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                               stop: 0 #dadbde, stop: 1 #f6f7fa);

    }

    QPushButton::menu-indicator {

             image: url(menu_indicator.png);

             subcontrol-origin: padding;

             subcontrol-position: bottom right;

    }

    QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open {

             position: relative;

             top: 2px; left: 2px; /* shift the arrow by 2 px */

    }

    定制 QRadioButton 

    QRadioButton::indicator {

             width: 13px;

             height: 13px;

     }

    QRadioButton::indicator::unchecked {

             image: url(:/images/radiobutton_unchecked.png);

    }

    QRadioButton::indicator:unchecked:hover {

             image: url(:/images/radiobutton_unchecked_hover.png);

    }

    QRadioButton::indicator:unchecked:pressed {

             image: url(:/images/radiobutton_unchecked_pressed.png);

    }

    QRadioButton::indicator::checked {

             image: url(:/images/radiobutton_checked.png);

    }

    QRadioButton::indicator:checked:hover {

             image: url(:/images/radiobutton_checked_hover.png);

    }

    QRadioButton::indicator:checked:pressed {

             image: url(:/images/radiobutton_checked_pressed.png);

    }

    定制ScrollBar

    下面是一个填充的实体的灰色边框的滚动条

    QScrollBar:horizontal {

             border: 2px solid grey;

             background: #32CC99;

             height: 15px;

             margin: 0px 20px 0 20px;

    }

    QScrollBar::handle:horizontal {

             background: white;

             min-width: 20px;

    }

    QScrollBar::add-line:horizontal {

             border: 2px solid grey;

             background: #32CC99;

             width: 20px;

             subcontrol-position: right;

             subcontrol-origin: margin;

    }

    QScrollBar::sub-line:horizontal {

             border: 2px solid grey;

             background: #32CC99;

             width: 20px;

             subcontrol-position: left;

             subcontrol-origin: margin;

    }

    左箭头与右箭头都分别设置成为灰色的边框与白色的背景,所以,两边都可以设置一个嵌入的图片。

    QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {

             border: 2px solid grey;

             width: 3px;

             height: 3px;

             background: white;

    }

    QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {

             background: none;

    }

    如果希望两个箭头都在同一个方向, 例如苹果机的界面, 将使用下面的设置模式:

    QScrollBar:horizontal {

             border: 2px solid green;

             background: cyan;

             height: 15px;

             margin: 0px 40px 0 0px;

    }

    QScrollBar::handle:horizontal {

             background: gray;

             min-width: 20px;

    }

    QScrollBar::add-line:horizontal {

             background: blue;

             width: 16px;

             subcontrol-position: right;

             subcontrol-origin: margin;

             border: 2px solid black;

    }

    QScrollBar::sub-line:horizontal {

             background: magenta;

             width: 16px;

             subcontrol-position: top right;

             subcontrol-origin: margin;

             border: 2px solid black;

             position: absolute;

             right: 20px;

    }

    QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {

             width: 3px;

             height: 3px;

             background: pink;

    }

    QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {

             background: none;

    }

    定制QSizeGrip

    一般讲通过一个图片进行设置 :

    QSizeGrip {

             image: url(:/images/sizegrip.png);

             width: 16px;

             height: 16px;

    }

    定制QSlider

    下面的横向的slider  

    QSlider::groove:horizontal {

             border: 1px solid #999999;

             height: 8px; /* the groove expands to the size of the slider by default. by giving it a height, it has a fixed size */

             background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);

             margin: 2px 0;

    }

    QSlider::handle:horizontal {

             background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);

             border: 1px solid #5c5c5c;

             width: 18px;

             margin: -2px 0; /* handle is placed by default on the contents rect of the groove. Expand outside the groove */

             border-radius: 3px;

    }

    QSlider::groove:vertical {

             background: red;

             position: absolute; /* absolutely position 4px from the left and right of the widget. setting margins on the widget should work too... */

             left: 4px; right: 4px;

    }

    QSlider::handle:vertical {

             height: 10px;

             background: green;

             margin: 0 -4px; /* expand outside the groove */

    }

    QSlider::add-page:vertical {

             background: white;

    }

    QSlider::sub-page:vertical {

             background: pink;

    }

    定制QSplitter

    QSplitter::handle {

             image: url(images/splitter.png);

    }

    QSplitter::handle:horizontal {

             height: 2px;

    }

    QSplitter::handle:vertical {

             width: 2px;

    }

    定制状态条 QStatusBar

    将提供一个状态栏的边框与项目的定制:

    QStatusBar {

             background: brown;

    }

    QStatusBar::item {

             border: 1px solid red;

             border-radius: 3px;

    }

    定制 QTabWidget 与QTabBar

    QTabWidget::pane { /* The tab widget frame */

             border-top: 2px solid #C2C7CB;

    }

    QTabWidget::tab-bar {

             left: 5px; /* move to the right by 5px */

    }

    /* Style the tab using the tab sub-control. Note thatt reads QTabBar _not_ QTabWidget */

    QTabBar::tab {

             background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                         stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,

                                         stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);

             border: 2px solid #C4C4C3;

             border-bottom-color: #C2C7CB; /* same as the pane color */

             border-top-left-radius: 4px;

             border-top-right-radius: 4px;

             min-width: 8ex;

             padding: 2px;

    }

    QTabBar::tab:selected, QTabBar::tab:hover {

             background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                         stop: 0 #fafafa, stop: 0.4 #f4f4f4,

                                         stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);

    }

    QTabBar::tab:selected {

             border-color: #9B9B9B;

             border-bottom-color: #C2C7CB; /* same as pane color */

    }

    QTabBar::tab:!selected {

             margin-top: 2px; /* make non-selected tabs look smaller */

    }

    QTabWidget::pane { /* The tab widget frame */

             border-top: 2px solid #C2C7CB;

    }

    QTabWidget::tab-bar {

             left: 5px; /* move to the right by 5px */

    }

    /* Style the tab using the tab sub-control. Note that it reads QTabBar _not_ QTabWidget */

    QTabBar::tab {

             background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                         stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,

                                         stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);

             border: 2px solid #C4C4C3;

             border-bottom-color: #C2C7CB; /* same as the pane color */

             border-top-left-radius: 4px;

             border-top-right-radius: 4px;

             min-width: 8ex;

             padding: 2px;

    }

    QTabBar::tab:selected, QTabBar::tab:hover {

             background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                         stop: 0 #fafafa, stop: 0.4 #f4f4f4,

                                         stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);

    }

    QTabBar::tab:selected {

             border-color: #9B9B9B;

             border-bottom-color: #C2C7CB; /* same as pane color */

    }

     

    QTabBar::tab:!selected {

             margin-top: 2px; /* make non-selected tabs look smaller */

    }

    /* make use of negative margins for overlapping tabs */

    QTabBar::tab:selected {

             /* expand/overlap to the left and right by 4px */

             margin-left: -4px;

             margin-right: -4px;

    }

    QTabBar::tab:first:selected {

             margin-left: 0; /* the first selected tab has nothing to overlap with on the left */

    }

    QTabBar::tab:last:selected {

             margin-right: 0; /* the last selected tab has nothing to overlap with on the right */

    }

    QTabBar::tab:only-one {

             margin: 0; /* if there is only one tab, we don't want overlapping margins */

    }

    QTabWidget::pane { /* The tab widget frame */

             border-top: 2px solid #C2C7CB;

             position: absolute;

             top: -0.5em;

    }

    QTabWidget::tab-bar {

             alignment: center;

    }

    /* Style the tab using the tab sub-control. Note that it reads QTabBar _not_ QTabWidget */

    QTabBar::tab {

             background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                         stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,

                                         stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);

             border: 2px solid #C4C4C3;

             border-bottom-color: #C2C7CB; /* same as the pane color */

             border-top-left-radius: 4px;

             border-top-right-radius: 4px;

             min-width: 8ex;

             padding: 2px;

    }

    QTabBar::tab:selected, QTabBar::tab:hover {

             background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                         stop: 0 #fafafa, stop: 0.4 #f4f4f4,

                                         stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);

    }

    QTabBar::tab:selected {

             border-color: #9B9B9B;

             border-bottom-color: #C2C7CB; /* same as pane color */

    }

    定制QTableWidget 

    下面将设置QTableWidget  的粉色选中区域, 与白色背景。

    QTableWidget {

             selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5,

                                         stop: 0 #FF92BB, stop: 1 white);

    }

    QTableWidget QTableCornerButton::section {

             background: red;

             border: 2px outset red;

         }

    定制工具条

    下面是对工具条的一些选项进行定制

    QToolBar {

             background: red;

             spacing: 3px; /* spacing between items in the tool bar */

    }

    QToolBar::handle {

             image: url(handle.png);  //可以设置工具条的背景图片

    }  

    定制QToolBox

    将使用到 tab  的子控部分

    QToolBox::tab {

             background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                         stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,

                                         stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);

             border-radius: 5px;

             color: darkgray;

    }

    QToolBox::tab:selected { /* italicize selected tabs */

             font: italic;

             color: white;

    }

     定制QToolButton 

    QToolButton { /* all types of tool button */

             border: 2px solid #8f8f91;

             border-radius: 6px;

             background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                               stop: 0 #f6f7fa, stop: 1 #dadbde);

    }

    QToolButton[popupMode="1"] { /* only for MenuButtonPopup */

             padding-right: 20px; /* make way for the popup button */

    }

    QToolButton:pressed {

             background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,

                                               stop: 0 #dadbde, stop: 1 #f6f7fa);

    }

    /* the subcontrols below are used only in the MenuButtonPopup mode */

    QToolButton::menu-button {

             border: 2px solid gray;

             border-top-right-radius: 6px;

             border-bottom-right-radius: 6px;

             /* 16px width + 4px for border = 20px allocated above */

             width: 16px;

    }

    QToolButton::menu-arrow {

             image: url(downarrow.png);

    }

    QToolButton::menu-arrow:open {

             top: 1px; left: 1px; /* shift it a bit */

    }

    定制QTreeView 

    QTreeView::branch {

                 background: palette(base);

    }

    QTreeView::branch:has-siblings:!adjoins-item {

                 background: cyan;

    }

    QTreeView::branch:has-siblings:adjoins-item {

                 background: red;

    }

    QTreeView::branch:!has-children:!has-siblings:adjoins-item {

                 background: blue;

    }

    QTreeView::branch:closed:has-children:has-siblings {

                 background: pink;

    }

    QTreeView::branch:has-children:!has-siblings:closed {

                 background: gray;

    }

    QTreeView::branch:open:has-children:has-siblings {

                 background: magenta;

    }

    QTreeView::branch:open:has-children:!has-siblings {

                 background: green;

    }

    下面是几个样式, 当选择颜色的时候可使用十六进制的数据来表达:

    QRadioButton{

          background:#5F7536;

          color:#CBF57D;

          font:bold;

    }

    展开全文
  • Qt5-stylesheet-样式表

    2020-04-05 18:28:42
    配合本人博客Qt开发总结(29)——样式表的例子,内含三个典型的样式表,几乎涵盖了Qt样式表的所有语法规则。具体内容可以移步到我的个人博客下学习。
  • Qt Stylesheet

    2017-04-11 10:35:17
    Qt样式表 (Qt StyleSheet )总结1.状态 伪状态 描述 :checked button部件被选中 :disabled 部件被禁用 :enabled 部件被启用 :focus 部件获得焦点 :hover 鼠标位于部件上 :indeterminate checkbox或...

    Qt样式表 (Qt StyleSheet )总结

    1.状态

    伪状态描述
    :checkedbutton部件被选中
    :disabled部件被禁用
    :enabled部件被启用
    :focus部件获得焦点
    :hover鼠标位于部件上
    :indeterminatecheckbox或radiobutton被部分选中
    :off部件可以切换,且处于off状态
    :on部件可以切换,且处于on状态
    :pressed部件被鼠标按下
    :uncheckedbutton部件未被选中

    2.样式

    子部件描述
    ::down-arrowcombo box或spin box的下拉箭头
    ::down-buttonspin box的向下按钮
    ::drop-downcombo box的下拉箭头
    ::indicatorcheckbox、radio button或可选择group box的指示器
    ::itemmenu、menu bar或status bar的子项目
    ::menu-indicatorpush button的菜单指示器
    ::titlegroup box的标题
    ::up-arrowspin box的向上箭头
    ::up-buttonspin box的向上按钮

    3.其它

    margin与padding区别:

    margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。

    展开全文
  • QT StyleSheet常见用法和样式

    千次阅读 2015-11-04 09:30:10
    QT styleSheet是快速美化界面的神器,本文简单介绍并记录本人经常使用的几种styleSheet使用习惯。 单一控件很简单,不详细说明,操作方法是: 控件上右键,如图选择并设置 1.触发式UI随鼠标事件改变 关键词:...
  • Qt stylesheet 详解

    千次阅读 2015-12-19 11:34:12
    stylesheet 本文不准备谈样式表的使用。因为Manual中介绍的很清楚了,给的例子也都很不错。再就是我本身对CSS语法不太熟,术语把握不好,qss用的不多。 不过,有两个问题新手似乎特容易迷惑,简单提一下: ...
  • Qt StyleSheet使用的一些注意事项

    千次阅读 2016-12-19 12:04:30
    使用Stylesheet 优化界面,常常会因为过滤器不正确或语法有一点错误导致达不到想要的效果。 版本: Qt Creator 2.5.2 qmake 4.8.5 对于不是集成QFrame的窗口类,盒子模型等语法可能不起作用,需要使用...
  • Qt Stylesheet 设置 qlabel 背景图片

    千次阅读 2019-12-14 22:05:27
    https://stackoverflow.com/questions/4458201/unable-to-set-the-background-image-in-qt-stylesheet 把图片加入资源用 setStyleSheet("background-image: url(:/images/sunset.jpg);"); 没加入资源,使用相对...
  • Qt StyleSheet 汇总

    2021-03-17 15:03:31
    } #qt_calendar_navigationbar { background-color: rgba(68,84,106,1); } QToolButton#qt_calendar_prevmonth { background: transparent; border: none; width: 40px; qproperty-icon: url(:/images/images/...
  • Qt StyleSheet样式表实例

    千次阅读 2016-08-02 15:55:56
    在涉及到Qt 美工的时候首先需要掌握CSS 级联样式表。 下面将通过几个例子来介绍一下怎样使用Qt中的部件类型设计。自定义的前台背景与后台背景的颜色: 如果需要一个文本编辑器的背景变为黄色, 下面是代码...
  • 关于QT stylesheet的使用的一点见解

    千次阅读 2017-12-19 19:48:18
    在编写QT程序时,我们可以通过palette调色板来设置各个颜色,但是这个是受限于平台的,而stylesheet是可以根据平台而进行渲染的,具体的实现我没有看过源代码,这里写一写在使用stylesheet过程中遇到的问题,以及...
  • 四、Qt 中获取字体的像素高度和宽度 QLabel::fontMetrics().width(QString s): 获取字符串s的总像素宽度。 int QFontMetrics::width ( const QString & text, int len = -1 ) const Returns the ...
  • Qt StyleSheet的使用

    千次阅读 2014-11-21 19:28:20
    //z *{  font-size:16px;  color:white; } JointCalibrationWidget {  background-color: rgb(75,75,75);  color: white; } QPushButton {  background-color: red;... border-style:
  • QT stylesheet 样式

    2019-02-18 11:40:02
    参考 http://blog.csdn.net/what951006/article/details/51689142 组合框样式 QComboBox { font:30px; /*字体大小*/ ... /* 设置这个,QComboBox::drop-down的图标才正常。padding是指自身边框到自身内...
  • QT stylesheet操作

    2017-03-24 22:43:38
    QT stylesheet操作
  • Qt4.8.4,利用StyleSheet更改大部分默认控件外观,对于个性化界面比较有帮助
  • Qt styleSheet 设置

    千次阅读 2012-01-02 21:21:44
    /** Estilo por defecto de OpenCoffee **/ 2 /*TODO: tratar de usar menos imágenes para hacer más rápida la aplicación...*/ 3   4 QPushButton { 5 ...
  • QT StyleSheet(二)

    万次阅读 2011-12-23 15:41:00
    2011-09-15 13:49 ...除了子类化Style类,使用QT样式表(QStyleSheet)是另一种快速改变QT程序UI风格的方法
  • 文章目录 按钮的状态图片通常集中在一张上。例如: 怎么设置呢 QPushButton#pushButton_11 { border-image:url(:/skin/main_menu_btn.png) 0 50 0 0; } ...QPushButton#pushButton_11:hover ... border-image:url(:/skin...
  • Qt stylesheet 源码学习

    万次阅读 2011-10-15 09:48:25
    stylesheet 本文不准备谈样式表的使用。因为Manual中介绍的很清楚了,给的例子也都很不错。再就是我本身对CSS语法不太熟,术语把握不好,qss用的不多。 不过,有两个问题新手似乎特容易迷惑,简单提一下: ...
  • Qt StyleSheet 控件的几种风格设计

    千次阅读 2013-11-11 22:45:20
    今天来分享一下我在项目里面画界面的时候用到的几种Qt库控件的stylesheetQt的UI之所以好看控件的风格设计很重要,以下面的主界面为例,我分享一下各个控件如QPushbutton,QToolbox等的风格,在我看来还是挺好看的...
  • Qt5stylesheet

    2015-10-29 17:32:40
    Qt5环境下实现style和stylesheet换窗口背景色和控件背景色,功能强大!
  • QT之样式styleSheet

    千次阅读 2016-12-11 21:14:47
    QT之样式styleSheetQT之样式styleSheet 开场白 样式效果 上样式代码 闲扯两句 下代码 结尾开场白 俗话说,人要衣装,佛要金装。我们做界面设计也同样如此,不仅仅代码得写好了,界面效果也要杠杠的!是不是很有道理...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,029
精华内容 1,611
关键字:

qtstylesheet