Qt版连连看之极速连连看：界面设计（一）QSS更换主题

【github地址】speedlink-qt

极速连连看在界面上的特点：

1.支持更换主题

2.画面能够全部切换，基本不使用对话框等方式进行消息提示

3.使用的某些控件（如移动到上面发出声音的按钮、具有连连看独立逻辑功能的Label）直接集成进了ui文件里

Qt中提供了一个很有趣的更换空间风格的方法，就是QSS。在相当多的情况下，我们没有必要用太复杂的方式来更换控件风格，只要使用简单的类似于CSS的语言就可以规定控件风格，关于这个可以参考Qt以前自带的一个example，在 qt/examples/widgets/，style和stylesheet两个都可以参考。譬如，如何使用Qt让密码显示成球形的？那么就可以简单的用一句话搞定：

QLineEdit[echoMode="2"] {
    lineedit-password-character: 9679;
}

那么这句话应该放在哪里呢？你可以直接让密码输入框自己调用 setStyleSheet(QString)，把参数换成上面的语句（字符串形式），也可以直接跑到designer里把它的stylesheet改掉，还可以改它的父控件，譬如它所在的窗体，让窗体加载这个stylesheet之后，整个窗体内的QLineEdit的显示都就成了黑球～～

     在极速连连看中，更换主题就使用了stylesheet技巧，由于setStyleSheet的参数可以从文件中动态加入，我也就可以把各种主题分别写成qss文件（其实随便什么后缀都可以，语法叫qss），比如说，我的连连看时间条实际上就是一个普通的进度条（QProgressBar），那么为什么在界面中除了形状一点都不像进度条了呢？很简单：

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

QProgressBar::chunk {
	background-color: goldenrod;
	 20px;
}

这样，QProgressBar平时就成了金黄色（没有分块），至于里面的内容都是很标准的英文，我想应该不难理解。

QSS中如何描述控件

QSS中通常都是先指定一个空间，然后在一对花括号中描述这个对象。例如：

QToolButton{…}  /* 描述了QToolButton的外观 */

QToolButton::hover{ …}  /* 描述了QToolButton在鼠标移过时的外观 */

QToolButton#myButton{ …}  /* 描述了一个名为myButton的QToolButton的外观 */

*{}   /* 描述了该范围内全部控件的外观 */

例如我这里的按钮，鼠标移过以及鼠标按下都会有不同的表现，实际实现为：

MyButton,QComboBox{
     border-style: outset;
     border- 2px;
     border-radius: 10px;
     border-color: goldenrod;
     background-color:goldenrod;
     font: 16px;
     color: beige;
     min- 1em;
     padding: 6px;
}
MyButton{
	font:16px "黑体";
}
MyButton:hover{
     border-left- 4px;
     border-top- 4px;
     border-right- 6px;
     border-bottom- 6px;
     border-radius: 10px;
     color: beige;
     font: bold 17px;
     min- 1em;
     padding: 6px;
}
MyButton:pressed{
     border-right- 4px;
     border-bottom- 4px;
     border-radius: 10px;
     color: beige;
     font: bold 14px;
     min- 1em;
     padding: 6px;
}

更多内容，请参考 Qt Assistant中 stylesheet 一节，我也是自己读的，但是感觉这个内容写出来意义不大，自己稍微读一下就可以掌握。