Qt学习笔记外观篇(一)～(四)

    我本来要找的是关于checkbox的自定义的。由于懒得做全部按钮，某些按钮还是直接拉pushbutton的，但是由于开发环境还是xp，系统的方案跟我的配色方案不太搭，于是就选择了QPlastiqueStyle这个样式，和我的整个主题比较搭，但是这个样式的checkbox选中之后是打叉叉的，始终担心这样子会造成误解。但是又不想换样式，还在尝试有没有办法，有的话再补上。

    当然其实可以也用label来做的，但是我之前程序已经写好了，用ButtonGroup建组，用id来区分，因为有十几个checkbox。如果用label感觉好费劲啊，当然如果最后没有办法，也只能这样了~

    偶然发现一篇文章，嗯准确来说是一个系列的文章，是专门写QT外观的。我之前也刚写完QT的自定义外观，但人家的是通过继承QStyle做一套自己的外观，瞬间觉得之前做的东西简直LOW爆了！！！

    好吧，又说了很多废话，这么高大上的东西怎么能不MARK呢，下面附上整个系列，主要那个继承QStyle的是（二）。。。

以下文章转自：wangyanphp的专栏  http://blog.csdn.net/wangyanphp

Qt学习笔记外观篇（一）：QPalette调色板     http://blog.csdn.net/wangyanphp/article/details/38532347

    窗口部件外观的自定义，一个很重要的方面就是颜色的指定：文本是什么颜色，背景是什么颜色等等。设置颜色的方式一是在绘制的时候，指定画笔，画刷的颜色进行绘制，另一个更加灵活，更加宏观的方法是使用调色板QPalette。

  每个窗口部件都可以拥有自己的调色板，也可以更加宏观的为应用程序指定一个调色板，调色板拥有三个颜色组，为窗口部件的 不同状态定义不同的颜色，三个工作组是：

1）Active组，用于·当前活跃的窗口，即具有键盘或鼠标焦点的窗口
2）Inactive组，其他窗口
3）Disabled组

QPalette指定我们最常使用的几种颜色：

1. 经常使用的颜色角色：  
2. QPalette::Window                    指定  窗口部件的背景色  
3. QPalette::WindowText                指定  窗口部件的前景色  
4. QPalette::Base                      文本输入窗口部件的背景色或者QComobBox下拉菜单的背景色  
5. QPalette::AlternateBase             主要是用于视图中各项的交替颜色  
6. QPalette::ToolTipBase               QToolTip QWhatThis的背景色  
7. QPalette::ToolTipText               QToolTip QWhatThis的前景色  
8. QPalette::Text                      与Base对照，主要是文本输入窗口的前景色  
9. QPalette::Button                    按钮的背景色  
10. QPalette::ButtonText                按钮的前景色  
11. QPalette::Highlight                 用于表示一个选中的item，默认为Qt::darkBlue  
12. QPalette::HighlightText             默认为white  
13. QPalette::Link                      未访问超链接的文本颜色  
14. QPalette::LinkVisited               已访问的超链接的文本颜色  
15. 为了使得调色板具有3D效果，还有以下的颜色角色  
16. QPalette::Light     
17. QPalette::Midlight  
18. QPalette::Dark    
19. QPalette::Mid     
20. QPalette::Shadow      

使用如下：

"font-family:Microsoft YaHei;font-size:14px;">    palette=QPalette(bronze);//QPalette::Window的初始颜色
    palette.setBrush(QPalette::Window,backgroundImage);
    palette.setBrush(QPalette::BrightText, Qt::white);
    palette.setBrush(QPalette::Base, veryLightBlue);
    palette.setBrush(QPalette::AlternateBase, lightBlue);
    palette.setBrush(QPalette::Highlight, darkBlue);
    palette.setBrush(QPalette::Disabled, QPalette::Highlight,Qt::darkGray);
    app.setPalette(palette);

Qt学习笔记外观篇（二）：QStyle              http://blog.csdn.net/wangyanphp/article/details/38532801

三种方法来重新定义Qt内置窗口部件的外观：
1）子类化QStyle或者一个预定义的风格，这种方法很好用，Qt本身就是用这种方法为它所支持的不同平台提供基于平台的外观的
2）子类化个别的窗口部件类，并且重新实现它的绘制和鼠标事件处理器。

3）Qt 样式表

QStyle类包装应用程序外观，对于应用程序的每个窗口部件，都会使用QStyle进行绘制。
QStyle API包含绘制图形元素[drawPrimitive(),drawControl(),drawComplexControl()等]函数，样式查询函数[pixelMetrics(),styleHint(),hitTest()等]。QStyle成员函数典型的带有QStyleOption对象，它包含绘制窗口部件的通用信息（例如调色板）以及特有信息（例如按钮的文字）。

下面解析如何子类化QStyle来实现自定义外观：

子类化QStyle一般是通过重新实现几个虚函数来实现的。

1）polish(QPalette& palette)：通常在此函数内指定配色方案，也即配置调色板

2）polish(QWidget*)&unpolish(QWidget*)：当样式应用到窗口部件时，polish(QWidget*)就会调用，从而允许我们进行最后的定制，当动态改变样式的时候，unpolish就会调用，来撤销polish的影响。polish(QWidget*)一般用做窗口部件的事件过滤器。

3）styleHint返回关于样式外观的提示

4）pixelMetric返回像素值，来影响窗口部件的绘制

5）drawPrimitive(),drawControl(),drawComplexControl()具体的执行绘制。

如何实现自定义样式使得左侧窗口成为右侧窗口？

首先是颜色，各个窗口部件的背景色发生了变化；然后是QSpinBox的形状发生了变化，QCheckBox的选取标志发生了变化还有就是Save&Cancel按钮的位置发生了变化。即实现：带渐变背景的圆角按钮、非传统的微调框、夸张的选取标志和“棕色画刷”背景。

类声明如下：

#include
class BronzeStyle : public QWindowsStyle
{
    Q_OBJECT
public:
    BronzeStyle(){}
    void polish(QPalette& palette);
    void polish(QWidget* widget);
    void unpolish(QWidget* widget);
    int  styleHint(StyleHint hint, const QStyleOption *opt, const QWidget *widget=0, QStyleHintReturn *returnData=0) const;
    int  pixelMetric(PixelMetric pm, const QStyleOption *option, const QWidget *widget=0) const;
    void drawPrimitive(PrimitiveElement which,const QStyleOption* option,QPainter* painter,const QWidget* widget=0)const;
    void drawComplexControl(ComplexControl which,const QStyleOptionComplex* option,QPainter* painter,const QWidget* widget=0)const;
    QRect subControlRect(ComplexControl cc, const QStyleOptionComplex *opt, SubControl sc, const QWidget *w=0) const;
public slots:
    QIcon standardIconImplementation(StandardPixmap standardIcon, const QStyleOption *option, const QWidget *widget=0) const;
private:
    void drawBronzeFrame(const QStyleOption* option,QPainter* painter)const;
    void drawBronzeBevel(const QStyleOption* option,QPainter* painter)const;
    void drawBronzeCheckBoxIndicator(const QStyleOption* option,QPainter* painter)const;
    void drawBronzeSpinBoxButton(SubControl which,const QStyleOptionComplex* option,QPainter* painter)const;

};

现在开始实现第一步：颜色配置

void BronzeStyle::polish(QPalette &palette)
{
    QPixmap backgroundImage(":/images/background.png");
    QColor bronze(207,155,95);
    QColor veryLightBlue(239,239,247);
    QColor lightBlue(223,223,239);
    QColor darkBlue(95,95,191);

    palette=QPalette(bronze);
    palette.setBrush(QPalette::Window,backgroundImage);
    palette.setBrush(QPalette::BrightText, Qt::white);
    palette.setBrush(QPalette::Base, veryLightBlue);
    palette.setBrush(QPalette::AlternateBase, lightBlue);
    palette.setBrush(QPalette::Highlight, darkBlue);
    palette.setBrush(QPalette::Disabled, QPalette::Highlight,Qt::darkGray);
}

根据前篇中对QPalette的介绍，我们很容易明白这里的设置。

第二步，来完成查询函数，提供绘制窗口部件所需要的信息：

int BronzeStyle::styleHint(StyleHint which, const QStyleOption *option, const QWidget *widget,
                           QStyleHintReturn *returnData) const
{
    switch(which){
    case SH_DialogButtonLayout:
        return int(QDialogButtonBox::MacLayout);
    case SH_EtchDisabledText:
        return int(true);
    case SH_DialogButtonBox_ButtonsHaveIcons:
        return int(true);
    case SH_UnderlineShortcut:
        return int(false);
    default:
        return QWindowsStyle::styleHint(which,option,widget,returnData);
    }
}

int BronzeStyle::pixelMetric(PixelMetric which, const QStyleOption *option, const QWidget *widget) const
{
    switch(which){
    case PM_ButtonDefaultIndicator:
        return 0;
    case PM_IndicatorHeight:
    case PM_IndicatorWidth:
        return 16;
    case PM_CheckBoxLabelSpacing:
        return 8;
    case PM_DefaultFrameWidth:
        return 2;
    default:
        return QWindowsStyle::pixelMetric(which,option,widget);
    }
}

其中的styleHint函数完成的样式外观的提示，对于SH_DialogButtonLayout，其返回MacLayout，从而实现OK键在Cancel的右侧；pixelMetric函数返回关于大小的提示：按钮Indicator值为0，checkbox指示器为16*16的正方形，checkbox指示器与文本的距离为8，FramwWidth为2。

第三步实现绘制：

QStyle绘制函数的参数形式一般是

1）一个enum成员指定需要绘制的图形元素

2）一个QStyleOption指定这个图形元素怎么画和在哪儿画

3）一个QPainter

4）一个可选参数QWidget，指定了图形元素是在哪一个窗口部件上绘制

void BronzeStyle::drawPrimitive(PrimitiveElement which, const QStyleOption *option,
                                QPainter *painter, const QWidget *widget) const
{
    switch(which){
    case PE_IndicatorCheckBox:
        drawBronzeCheckBoxIndicator(option,painter);
        break;
    case PE_PanelButtonCommand:
        drawBronzeBevel(option,painter);
        break;
    case PE_Frame:
        drawBronzeFrame(option,painter);
        break;
    case PE_FrameDefaultButton:
        break;
    default:
        QWindowsStyle::drawPrimitive(which,option,painter,widget);
    }
}

drawPrimitive（）绘制“基本的”用户界面元素，这些元素会被几个窗口部件使用。此处，我们要实现夸张的选择指示器和渐变的按钮，所以要用自定义的绘制函数实现对PE_IndicatorCheckBox和PE_PanelButtonCommand的绘制；

void BronzeStyle::drawComplexControl(ComplexControl which, const QStyleOptionComplex *option,
                                     QPainter *painter, const QWidget *widget) const
{
    if(which==CC_SpinBox){
        drawBronzeSpinBoxButton(SC_SpinBoxDown,option,painter);
        drawBronzeSpinBoxButton(SC_SpinBoxUp,option,painter);
        QRect rect=subControlRect(CC_SpinBox,option,SC_SpinBoxEditField).adjusted(-1,0,+1,0);
        painter->setPen(QPen(option->palette.mid(),1.0));
        painter->drawLine(rect.topLeft(),rect.bottomLeft());
        painter->drawLine(rect.topRight(),rect.bottomRight());
    }else{
        return QWindowsStyle::drawComplexControl(which,option,painter,widget);
    }
}

因为drawComplexControl函数绘制多重辅助控制器窗口部件而且我们需要非传统的SpinBox，所以此处实现对CC_SpinBox的自定义绘制：首先绘制两个按钮，然后在文本框两侧绘制两条线。注意此函数中调用了一个叫subControlRect的函数，此函数用于确定辅助控制器窗口部件的位置（所谓的辅助控制器即为窗口部件的某一组成部分，例如checkbox的指示器）。处理鼠标事件的时候也用它查找被单击的辅助控制器窗口部件。

QRect BronzeStyle::subControlRect(ComplexControl whichControl, const QStyleOptionComplex *option,
                                  SubControl whichSubControl, const QWidget *widget) const
{
    if(whichControl==CC_SpinBox){
        int frameWidth=pixelMetric(PM_DefaultFrameWidth,option,widget);
        int buttonWidth=16;
        switch(whichSubControl){
        case SC_SpinBoxFrame:
            return option->rect;
        case SC_SpinBoxEditField:
            return option->rect.adjusted(+buttonWidth,+frameWidth,-buttonWidth,-frameWidth);
        case SC_SpinBoxDown:
            return visualRect(option->direction,option->rect, QRect(option->rect.x(),option->rect.y(),
                                                       buttonWidth,option->rect.height()));
        case SC_SpinBoxUp:
            return visualRect(option->direction,option->rect, QRect(option->rect.right()-buttonWidth,
                                         option->rect.y(), buttonWidth,option->rect.height()));
        default:
            return QRect();
        }
    }else{
        return QWindowsStyle::subControlRect(whichControl,option,whichSubControl,widget);
    }

}

此处重新实现了对SpinBox的各个子部件的定位：左侧Down按钮（16*height），中间EditField，右侧Up按钮（16*height）。

上述的绘制函数完成了绘制任务的分派，下面是具体的绘制过程：

void BronzeStyle::drawBronzeFrame(const QStyleOption *option, QPainter *painter) const
{
    painter->save();
    painter->setRenderHint(QPainter::Antialiasing,true);

    painter->setPen(QPen(option->palette.foreground(),1.0));
    painter->drawRect(option->rect.adjusted(+1,+1,-1,-1));
    painter->restore();
}

void BronzeStyle::drawBronzeBevel(const QStyleOption *option, QPainter *painter) const
{
    QColor buttonColor=option->palette.button().color();
    int coeff=(option->state&State_MouseOver)?115:105;

    QLinearGradient gradient(0,0,0,option->rect.height());
    gradient.setColorAt(0.0,option->palette.light().color());
    gradient.setColorAt(0.2,buttonColor.lighter(coeff));
    gradient.setColorAt(0.8,buttonColor.darker(coeff));
    gradient.setColorAt(1.0,option->palette.dark().color());

    double penWidth=1.0;
    if(const QStyleOptionButton* buttonOpt=qstyleoption_cast<const QStyleOptionButton*>(option)){
        if(buttonOpt->features&QStyleOptionButton::DefaultButton)
            penWidth=2.0;
    }
    QRect roundRect=option->rect.adjusted(+1,+1,-1,-1);
    if(!roundRect.isValid())
        return;

    int diameter=12;
    int cx=100*diameter/roundRect.width();
    int cy=100*diameter/roundRect.height();

    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(gradient);
    painter->drawRoundRect(roundRect,cx,cy);

    if(option->state&(State_On|State_Sunken)){
        QColor slightlyOpaqueBlack(0,0,0,63);
        painter->setBrush(slightlyOpaqueBlack);
        painter->drawRoundRect(roundRect,cx,cy);
    }

    painter->setRenderHint(QPainter::Antialiasing,true);
    painter->setPen(QPen(option->palette.foreground(),penWidth));
    painter->setBrush(Qt::NoBrush);
    painter->drawRoundRect(roundRect,cx,cy);
    painter->restore();
}

注意对按钮圆角和渐变效果的实现：首先获得需要圆角的绘制区域，然后使用渐变颜色填充绘制，最后绘制边框。其中涉及到的一些变化是：1）鼠标是否放在了按钮上？如果是，那么颜色*coeff。2）按钮是否被按下？如果是，那么使用slightlyOpaqueBlack填充；3）是否是默认按钮？如果是，那么边框加粗；

void BronzeStyle::drawBronzeSpinBoxButton(SubControl which, const QStyleOptionComplex *option,
                                          QPainter *painter) const
{
    PrimitiveElement arrow=PE_IndicatorArrowLeft;
    QRect buttonRect=option->rect;
    if((which==SC_SpinBoxUp)!=(option->direction==Qt::RightToLeft)){
        arrow=PE_IndicatorArrowRight;
        buttonRect.translate(buttonRect.width()/2,0);
    }
    buttonRect.setWidth((buttonRect.width()+1)/2);

    QStyleOption buttonOpt(*option);

    painter->save();
    painter->setClipRect(buttonRect,Qt::IntersectClip);
    if(!(option->activeSubControls&which))
        buttonOpt.state&=~(State_MouseOver|State_On|State_Sunken);
    drawBronzeBevel(&buttonOpt,painter);

    QStyleOption arrowOpt(buttonOpt);
    arrowOpt.rect=subControlRect(CC_SpinBox,option,which).adjusted(+3,+3,-3,-3);
    if(arrowOpt.rect.isValid())
        drawPrimitive(arrow,&arrowOpt,painter);
    painter->restore();
}

此为绘制SpinBox按钮的过程：首先确定按钮arrow图像，然后先绘制好按钮的panel（渐变和圆角），然后再绘制arrow图像

void BronzeStyle::drawBronzeCheckBoxIndicator(const QStyleOption *option, QPainter *painter) const
{
    painter->save();
    painter->setRenderHint(QPainter::Antialiasing,true);
    if(option->state&State_MouseOver){
        painter->setBrush(option->palette.alternateBase());
    }else{
        painter->setBrush(option->palette.base());
    }
    painter->drawRoundRect(option->rect.adjusted(+1,+1,-1,-1));
    if(option->state&(State_On|State_NoChange)){
        QPixmap pixmap;
        if(!(option->state&State_Enabled)){
            pixmap.load(":/images/checkmark-disabled.png");
        }else if(option->state&State_NoChange){
            pixmap.load(":/images/checkmark-partial.png");
        }else{
            pixmap.load(":/images/checkmark.png");
        }
        QRect pixmapRect=pixmap.rect().translated(option->rect.topLeft()).translated(+2,-6);
        QRect painterRect=visualRect(option->direction,option->rect,pixmapRect);
        if(option->direction==Qt::RightToLeft){
            painter->scale(-1.0,+1.0);
            painterRect.moveLeft(-painterRect.right()-1);
        }
        painter->drawPixmap(painterRect,pixmap);
    }
    painter->restore();
}

此为checkbox的指示器的绘制过程，首先绘制指示器的边框，然后根据checkbox是否选中，绘制选中的图像（此处为“对勾号”）。

QStyle绘制的整体流程框架就是如此，下面是一些补充：

void BronzeStyle::polish(QWidget *widget)
{
    if(qobject_cast(widget)||qobject_cast(widget))
        widget->setAttribute(Qt::WA_Hover,true);
}

void BronzeStyle::unpolish(QWidget *widget)
{
    if(qobject_cast(widget)||qobject_cast(widget))
        widget->setAttribute(Qt::WA_Hover,false);
}

使得鼠标进出窗口部件都产生绘制事件。

应用：QApplication::setStyle(new BronzeStyle);

这里的代码约300行，然而要开发一种功能齐全的自定义样式是一项很大的工程，大约需要3000~5000行代码，所以对于轻量级的改动，我们一般不使用此方法，但是此框架是Qt窗口部件的基本的绘制原理。

Qt学习笔记外观篇（三）：Qt Style Sheet     http://blog.csdn.net/wangyanphp/article/details/38537735

  前文中讲到了自定义外观的QStyle方法，我们可以看做是自定义外观的基本原理，使用它进行定制，工程量很大。对于轻量级应用，我们更倾向于简单的Qt 样式表（Style Sheet）。Qt样式表与CSS基本相同，不需要任何的编程基础，唯一需要的就是艺术细胞了。其语法简单：

选择器 辅助控制器[可选] 状态[可选]

{

     样式属性:样式属性值;

}

选择器介绍：

1. 全局对象       *                  表示任意窗口部件  
2. 类型           QDial              给定类的实例，包括子类  
3. 类             .QDial             给定类的实例，不包括子类  
4. 标识           QDial#ageDial      给定对象名称的窗口部件  
5. Qt属性         QDial[y="0"]       为某些属性赋值的窗口部件  
6. 子对象         QFrame>QDial       给定窗口部件的直接子窗口部件  
7. 子孙对象       QFrame QDial       给定窗口部件的子孙窗口部件  

例：QFrame#frame>QPushButton[x="0"][y="0"]#okButton:选择名为okButton的QPushButton，他们的x和y属性值为0，为名为frame的QFrame的直接子对象；

*[mandatoryField="true"]：选择所有属性mandatoryField为true的窗口部件；

部分常用辅助控制器介绍：

::indicator              单选框、复选框、可选菜单项或可选群组项的指示器
::menu-indicator         按钮的菜单指示器
::item                   菜单、菜单栏或状态栏项
::up-button              微调框或滚动条的向下按钮
::down-button            微调框或滚动条的向上按钮
::up-arrow               微调框、滚动条或标题视图的向上按钮
::down-arrow             微调框、滚动条或标题视图的向下按钮
::drop-down              组合框的下拉箭头
::title                  群组框的标题

例QCheckBox::Indicator{   width=16px;height=16px; }指定了checkbox指示器的大小

几种常用的状态：

:disabled                   禁用的窗口部件
:enabled                    启用的窗口部件
:focus                      窗口部件有输入焦点
:hover                      鼠标在窗口部件上悬停
:pressed                    鼠标按键点击窗口部件
:checked                    按钮已被选中
:unchecked                  按钮未被选中
:indeterminate              按钮被部分选中
:open                       窗口部件处于打开或扩展的状态
:closed                     窗口部件处于关闭或销毁状态
:on                         窗口部件的状态是on
:off                        窗口部件的状态是on

例：QComboBox::drop-down:hover指定当鼠标在组合框的向下按钮上悬停时的样式

几种通用常用的属性：

颜色相关的属性的值的设定：Color Gradient PaletteRole。其中Color有四种方式设定：rgb（rgba），hsv（hsva），16进制值#rrggbb，color name；
Repeat属性值的设定：一般来说repeat指定了背景图片在何种方向上重复，有四种选择：repeat-x ，repeat-y ，repeat ，no-repeat
Position属性值的设定： top ，bottom ，left ，right ，center 

1）background：等价于background-color，background-image，background-repeat，background-position
2）background-attachment：背景图片是否随视口滑动
3）background-clip：确定background在何处绘制，其默认值为border。指定何处的background-color和background-image被clipped
4）background-origin；其默认值为padding
background-origin和background-clip的取值为：margin，border，padding，content

1）margin：等价于 margin-top, margin-right, margin-bottom, and margin-left.
（margin与border的区别：margin没有边，没有颜色填充，只有一个width）

2）border：等价于border-color，border-style，border-width
3）border-top：等价于border-top-color, border-top-style, and/or border-top-width
     同理还有border-left，border-right，border-bottom
4）border-color：指定border 边的颜色（border-top-color....）
5）border-style：指定border边的风格，取值有dashed，dot-dash，dot-dot-dash，dotted，double，groove，inset，outset，ridge，solid，none（border-top-style...）
6）border-width：指定border的长度（border-top-width...）
7）border-image：用于填充border的图片，此图片会被分为9个部分
8）border-radius：border角的半径，等价于border-top-left-radius,border-top-right-radius,border-bottom-right-radius, border-bottom-left-radius

9）padding：等价于padding-top, padding-right, padding-bottom, and padding-left.
（padding与margin类似）

1）color：用于渲染文字，默认值为QWidget::foregroundRole
2）gridline-color：QTableView中用于指定grid line的颜色

1）font：等价于font-family, font-size, font-style, and/or font-weight.
2）font-style：可能取值为normal，italic，oblique
3）font-weight：normal，bold ，100，200....900
4）text-align

1）position：可能取值relative，absolute
2）left，right，top，bottom（根据position的取值，移动subcontrol的位置）

1）subcontrol-origin：subcontrol的位置，默认为padding
2）subcontrol-position

1）button-layout：可能的取值 0 (WinLayout), 1 (MacLayout), 2 (KdeLayout), and 3 (GnomeLayout).主要用于QdialogButtonBox或者QMessageBox
2）dialogbuttonbox-buttons-have-icons：用于QDialogButtonBox决定按钮是否显示图标，1-显示，0-不显示。

最后，应用样式表的语句为：

widget->setStyleSheet("");

或：

    QFile file(":/qss/style.qss");
    file.open(QFile::ReadOnly);
    app.setStyleSheet(file.readAll());

下一篇将会分析一个实例。

Qt学习笔记外观篇（四）：Qt 样式表实例   http://blog.csdn.net/wangyanphp/article/details/38539767

将左侧的对话框变为右侧对话框的样式。

其中的变化：全部的矩形框都变为了圆角的、背景颜色改变了、两个组合框改变了。

1）实现颜色的改变：

QDialog {
    background-image: url(:/images/background.png);
}

/* R2 */
QLabel {
    font: 9pt;
    font-family:"Vrinda";
    color: rgb(0, 0, 127);
}

2）实现矩形框的圆角化：

/* R3 */
QComboBox:editable,
QLineEdit,
QListView {
    color: rgb(127, 0, 63);
    background-color: rgb(255, 255, 241);
    selection-color: white;
    selection-background-color: rgb(191, 31, 127);
    border: 2px groove gray;
    border-radius: 10px;
    padding: 0px;
}

3）

/* R5 */
QComboBox:!editable,
QPushButton {
    color: white;
    font: bold 10pt;
    border-image: url(:/images/button.png) 16;
    border-width: 10px;
    min-width: 60px;
    min-height: 32px;
    padding: -12px 0px;

}

4）组合框的定制

/* R8 */
QComboBox::down-arrow {
    image: url(:/images/down-arrow.png);
}

/* R9 */
QComboBox::down-arrow:on {
    top: 1px;
}

/* R10 */
QComboBox * {
    font: 9pt;
}

/* R11 */
QComboBox::drop-down:!editable {
    subcontrol-origin: padding;
    subcontrol-position: center right;
    width: 11px;
    height: 6px;
    background: none;
}

/* R12 */
QComboBox:!editable {
    padding-right: 15px;
}

/* R13 */
QComboBox::drop-down:editable {
    border-image: url(:/images/button.png) 16;
    border-width: 10px;
    subcontrol-origin:margin;
    subcontrol-position: center right;
    width: 7px;
    height: 6px;
}

/* R14 */
QComboBox::drop-down:editable:open {
    border-image: url(:/images/button-pressed.png) 16;
}

/* R15 */
QComboBox:editable {
    margin-right: 29px;
}