导读

     正如web前端开发中CSS（Cascade Style Sheet）的作用一样，Qt开发中也可以使用修改版的QSS将逻辑业务和用户界面进行隔离。这样，美工设计人员和逻辑实现者可以各司其职而不受干扰。更重要的是，由于界面和逻辑处理是分离的，低耦合性使得代码重构的工作量可以减少到最小。QSS和CSS的语法几乎一致，除了Qt自身增加的一些属性之外，其余的属性都可以在CSS2或CSS3中找到对应的属性。因此，如果曾经有过CSS的使用经验，那么QSS的使用将游刃有余。关于QSS的使用实践，打算撰写一系列博客来记录使用过程中的一些技巧和方法。本篇是系列第一篇，主要探讨QPushButton及QMenu在QSS的作用下的效果。

QSS介绍

     QSS(Qt Style Sheet)借鉴于CSS的良好思想，实现了界面和逻辑的分离。QSS中引入了盒模型（Box Model）概念，这是样式表技术中的核心概念之一。具体的解释网上说的挺多的，Qt本身自带的文档也有较为详细的说明。在使用盒模型进行设计之前，我们得了解下Qt中哪些组件可以用盒模型进行布局设计：

应用实例

     下面看看如何用QSS对按钮及其关联菜单进行外观定制。我们首先用如下的代码初始化好按钮及其关联菜单，并在Windows 7默认主题下看看其效果：

ui.serviceType->setFixedWidth(95);
m_mainMenu = new QMenu(this);
m_osSubMenu = new QMenu(this);
m_appSubMenu = new QMenu(this);

m_details = new QAction(QStringLiteral("Details"),this);
m_details->setCheckable(true);
m_details->setChecked(true);
m_settings = new QAction(QStringLiteral("Settings"), this);
m_settings->setIcon(QIcon(":/misc/preference"));
m_settings->setShortcut(QKeySequence::Print);
m_os = new QAction(QStringLiteral("OS"), this);
m_app = new QAction(QStringLiteral("Applications"), this);

m_github = new QAction(QStringLiteral("Github"), this);
m_github->setIcon(QIcon(":/app/github"));
m_github->setShortcut(QKeySequence("Ctrl+G"));
m_amazon = new QAction(QStringLiteral("Amazon"), this);
m_amazon->setIcon(QIcon(":/app/amazon"));
m_photoshop = new QAction(QStringLiteral("Photoshop"), this);
m_photoshop->setIcon(QIcon(":/app/photoshop"));
m_facebook = new QAction(QStringLiteral("Facebook"), this);
m_facebook->setIcon(QIcon(":/app/facebook"));

m_apple = new QAction(QStringLiteral("Apple"), this);
m_apple->setShortcut(QKeySequence("Ctrl+A"));
m_apple->setIcon(QIcon(":/os/apple"));
m_windows = new QAction(QStringLiteral("Windows"), this);
m_windows->setIcon(QIcon(":/os/windows"));
m_windows->setShortcut(QKeySequence("Ctrl+W"));
m_fedora = new QAction(QStringLiteral("Fedora"), this);
m_fedora->setIcon(QIcon(":/os/fedora"));
m_fedora->setDisabled(true);

m_osSubMenu->addAction(m_apple);
m_osSubMenu->addAction(m_windows);
m_osSubMenu->addAction(m_fedora);
m_os->setMenu(m_osSubMenu);

m_appSubMenu->addAction(m_amazon);
m_appSubMenu->addAction(m_github);
m_appSubMenu->addAction(m_facebook);
m_appSubMenu->addSeparator();
m_appSubMenu->addAction(m_photoshop);
m_app->setMenu(m_appSubMenu);

m_mainMenu->addAction(m_details);
m_mainMenu->addSeparator();
m_mainMenu->addAction(m_os);
m_mainMenu->addAction(m_app);
m_mainMenu->addAction(m_settings);

ui.serviceType->setMenu(m_mainMenu);

　　先不加任何QSS效果，其效果如下：

    一片灰蒙蒙的感觉，不亮堂。对于讲究实用性的软件产品，做到这一步已然足够。如若客户要求具备个性一点的外观呢？此时此刻，我们可以尝试用QSS来进行改造。我们将所有的样式语句放到一个*.qss文件中，然后在main函数中加载。需要注意的是，我们应该将.qss文件添加到.qrc文件中进行编译。每一次修改.qss文件之后应该重新编译.qrc文件。否则在界面上将看不出任何改变。代码如下：

QFile file(":/ThemeRoller/style");
file.open(QFile::ReadOnly);
qApp->setStyleSheet(file.readAll());
file.close();

　　先考虑将QPushButton作为练手对象，编写如下QSS代码：

QPushButton {
	background: white;
	border: 1px solid rgb(41, 57, 85);
	border-radius: 3px;  # 设置边框具备3个像素的圆角
	font-weight: bold;    # 字体设置为加粗
}

QPushButton:hover {
	background: lightgray;
}

　　效果对比如下：

     效果似乎还不错，但是我们发现右边的箭头号已经偏移到右下角去了，不太和谐。我们尝试使用subcontrol-position和subcontrol-origin两个属性来进行调整（position和origin这两个属性在CSS中是非常容易被混淆的，具体含义需细细区分）：

QPushButton::menu-indicator{
    subcontrol-position: right center;
    subcontrol-origin: padding;
}

     显然，系统默认的箭头号不太和谐，于是我们再尝试换掉这个箭头号，并且在菜单打开时设置为向下的箭头号，菜单关闭时设置为水平向右的箭头号：

QPushButton::menu-indicator:open {
	image: url(:/misc/down_arrow_2);
	subcontrol-position: right center;
	subcontrol-origin: padding;
}

QPushButton::menu-indicator:closed {
	image: url(:/misc/right_arrow_2);
	subcontrol-position: right center;
	subcontrol-origin: padding;
}

　　得到的效果如下：

     好吧，到此位置我们的按钮似乎好看多了。再来看看整个关联菜单的QSS该如何编写。首先，把背景色调整为白色是必须的，如下：

QMenu {
	background-color: white;
	padding: 1px;  # 缩小菜单项四个方向的padding
}

QMenu::item{
	background-color: transparent;
}

      我们可以发现一个严重的缺陷，当鼠标划过相应的菜单项时，文本内容看不见了，显然是由于背景色的原因，所以我们还得修改一下啊：

QMenu::item:selected{
	background-color: rgb(234, 243, 253);
	color: black;
}

　　用伪状态:selected进行设置，当鼠标划过时将文本颜色设置为黑色，也即保持不变。但此时我们根本看不到鼠标划过的效果，因此给当前选中的菜单项一个背景色吧（rgb(234, 243, 253)）。效果如何呢：

       根据不同的需要，定制出来的外观也是千差万别的。主要是能理解好QSS中各种属性的作用，其余的工作就是做好布局设计和图片设计。美观大方的界面设计离不开精致的图标设计和合理的布局管理。

参考

　　1. Qt style sheet reference