Qt外观-QStyleQPaletteQSs
Qt外观-QStyleQPaletteQSs
2015年1月29日
1 整体风格：QStyle
目标：订制GUI显示各种操作系统风格。
原理：Qt的控件在绘制时会调用QStyle的设置，以此来模块不同的风格。
方法：
编程时使用QApplictaion：：setStyle()来设置格式；
运行时使用-style name指定风格。
自定义风格：继承QStyle或其子类进行修改。
从右向左排列风格：QApplication::setLayoutDirection（）。或者-reverse运行参数。
1.1 示例
1.1.1示例：编程设置风格
#include <QCleanlooksStyle>
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
a.setStyle(new QCleanlooksStyle);
MainWindoww;
w.show();
returna.exec();
}
1.1.2示例：程序参数设置风格
D:\>GEProcess.exe -style cde
1.1.3示例：从右向左排列风格
2 颜色调色板：QPalette
目标：设置各种控件的颜色。
原理：Qt控件绘制时使用QPalette读取各种配色方案。
方法：QApplication可以控制所有控件的配色方案。
颜色组：ColorGroup，不同状态使用不同的颜色组，有Active，Inactive，Normal，Disabled。
颜色角色：ColorRole，部件不同的部分可以设置不同的颜色。详见Help-QPalette。
设置颜色：setColor()。
设置填充颜色：setBrush()。
示例：
QApplication a(argc, argv);
QPalettepalette;
palette.setColor (QPalette::WindowText,Qt::red);
a.setPalette (palette);
3 自定义样式表：Qt的CSS
目标：使用类似CSS的层叠样式表设置外观，并且可以由文件设置。
原理：Qt部件使用类似CSS的样式定义外观，在绘制时读取配置数据。
3.1 方法：详见QtHelp-QtStyle Sheets。
1) 编程设置样式：setStyle（）。
示例：编程设置设置样式表。
2) QtDesigner中设置样式：右击部件-》改变样式表或属性-》styleSheet，打开对话框设置。一般用QtDesigner选择相关样式再进行手动修改。
示例：从QtDisigner设置样式表。
3) 程序运行参数：-stylesheet file.qss
参考：http://blog.163.com/qimo601@126/blog/static/158220932014316250679/
示例：程序运行参数设置样式
4) 组合控件中设置子控件样式：参见帮助中组合控件可操作的子控件，设置相应的样式。
5) 设置不同状态的样式：可以为控件的不同状态设置不同的样式，称为伪状态（Pseudo state），详见Qt帮助文档。
6) 多次重复设置解决：如果一个控件被多次设置，首先查看设置级别，以详细的准。如果级别相，则以后设置的状态为准。
7) 样式表文件：可以将样式表存储为文本文件（无特殊后缀，一般使用.qss），添加到资源中，使用时读取文件内容并组合成字符串，设置为样式表。
示例：
QStringListlstSkin;
QtFileUtility::readFile(":/skin/sk1.qss",lstSkin);
qApp->setStyleSheet(lstSkin.join (""))
3.2 样式表语法
目标1【【，目录2】…】{属性1：值【【；属性2，值】…】}
目标选择符：符合目标选择符的所有目录将应用后面的属性。目标选择符支持CSS2中定义的选择符语法（参考：http://www.w3.org/TR/CSS2/selector.html）。
3.3 示例
3.3.1 示例：编程设置设置样式表。
ui->centralWidget->setStyleSheet("QLabel{color:green}");
ui->label_2->setStyleSheet ("color:yellow");
3.3.2 示例：从QtDisigner设置样式表。
3.3.3 示例：程序运行参数设置样式
sk1.qss
/*skin:sk1*/
QPushButton{color:red;}
QLabel{color:blue;}
default.txt
/*skin:default*/
QPushButton{color:yellow;}
QLabel{color:green;}
启动程序
GEProcess.exe-stylesheet sk1.qss
GEProcess.exe-stylesheet default.txt
3.4 应用：一键换肤
1) QtDesigner，MainWindow的setStyle设置样式表，然后存储为文件。生成以下两个文件。
/*skin:default*/
QPushButton#pushButton{border-image:url(:/img/test.gif);}QPushButton#pushButton:hover{border-image:url(:/img/00.png);}#lcdNumber{color: rgb(255, 0, 0);background-color:rgb(170,170, 255);}
/*skin:sk1*/
#pushButton{background-image: url(:/mr/gift);}
#lcdNumber{background-color:qconicalgradient(cx:0.5, cy:0.5, angle:0, stop:0 rgba(255, 255, 255, 255),stop:0.373979 rgba(255, 255, 255, 255), stop:0.373991 rgba(33, 30, 255, 255),stop:0.624018 rgba(33, 30, 255, 255), stop:0.624043 rgba(255, 0, 0, 255),stop:1 rgba(255, 0, 0, 255));color: rgb(0, 0, 255);}
2) 在换肤按键的slot中换肤
void MainWindow::on_pushButton_3_clicked()
{
QStringList lstSkin;
QStringstr = qApp->styleSheet ();
if(str.contains ("/*skin:sk1*/")){
QtFileUtility::readFile(":/skin/default.qss",lstSkin);
}
else{
QtFileUtility::readFile(":/skin/sk1.qss",lstSkin);
}
qApp->setStyleSheet (lstSkin.join (""));
}
4 窗体特效
4.1 不规则窗体：setMask（）
目标：将窗体或部件设置为指定的不规则形状。
原理：QtWidget在绘制时，可以设置一个Mask（bitmap），将无值部分过滤，只显示有值部分。
方法：
设置显示Mask：setMask()，可以使用Region或Bitmap来定义mask形状。
透明部分不显示，不透明部分显示：使用setMask()设置不显示部分，在paintEvent()中显示不透明部分。
注意：如果将顶层窗体设置mask，则标题栏将不再出现，需要手动设置相关功能。
示例：设置不规则的部件。
QPixmappix;
pix.load(":/img/earth.png");
ui->toolBox->resize (pix.size ());
ui->toolBox->setMask (pix.mask ());
4.2 透明窗体
目标:设置窗体的透明度。
方法：
窗体不透明度：setWindowOpacity()：0~1，1为不透明，0为全透明。
整个窗体及其部件全部变为半透明。
设置窗体背景透明：
setWindowFlags (Qt::FramelessWindowHint);//如果不设置，则背景为黑色
setAttribute(Qt::WA_TranslucentBackground);
注意：设置FramelessWindowHint后标题栏将不再出现，需要手动设置相关功能。
设置窗体背景半透明：可以设置paintEvent（）函数或者在中心窗体上设置半透明样式。
4.3 透明部件
目标：设置部件的透明度。
方法：透明部件的样式表，背景色设置为rgba。
示例：
background-color: rgba(140, 74, 255, 123);