初试Qt Style Sheets 之美化

分类： 2014-04-02 11:08 536人阅读 (0)

      由于某些原因，本人对于UI美化十分热衷，平生最大的想法就是做一个“让我的小伙伴们都惊呆了”的UI程序，跟随工作转辗折腾，始终不遂愿，后来接触了HtmLayout和Sciter疯狂了好几周，翻译N多文章，最终因为文档的原因不得不放弃了。哎呀，跑题了......

     以上都不是重点，重点是今天要解决的Qt样式表美化程序的问题，当让，如今的Qt已经步入5.2的牛叉版本，跨平台并且支持Qml界面，支持所有的手机应用开发，简直是开发神器！是优点又是缺点，它才出生就这么强大，肯定免不了这样那样的问题，相比较已经更新维护了10多年的V4.xx版本，4版本才是真正应该好好学会的核心内容。so,......

    不要理会上面的内容，都是瞎诌的。下面来讲如何定制一个可修改的程序样式表文件，即通过文件加载Qt Style sheets内容。

-----------------------------------

    在这之前，让我们先梳理一下思路：

1、Qt Style sheets是一些90%等价于CSS的文本内容。

2、Qt不提供直接加载样式文件的办法，但是对所有的Qwidget提供了setStyleSheet()函数。

3、Qt的样式表相对关系完全和CSS类似，可以在Dialog中设置自身所有子控件甚至其他Dialog中的类型Style。

    鉴于以上原因，我们可以直接写一个CSS文件，在程序启动时，主动读取，并且加载到主窗口中，然后Qt引擎会自动解析和绘制User Custom Style。

------------------------------------

下面，开始正式的处理：

准备工作：

1、新建一个Qt项目，简单起见，基于QDialog。然后再上放一些常用的控件，以便于测试和观察。

2、书写一个加载CSS文件并且设置样式的函数，以便于测试，以后每次都可以不用重新编译。（当然，Qt支持直接书写style到xx.ui文件，需要重新编译）

原始界面：

加载函数：（默认加载exe所在目录default.css文件）

void MainDlg::InitUI()
{
    // 给ComBox添加一些测试文本
    QString strContent;
    for(int i=0;i<10;i++)
    {
        strContent.sprintf("Text%.2d",i);
        ui->comboBox->addItem(strContent);
    }
    emit ui->comboBox->setCurrentIndex(0);

    // 加载CSS文件
    QString strPath = QCoreApplication::applicationDirPath();
    qDebug()<
    QString strCssFile = strPath + "/default.css";
    QFile fCss(strCssFile);
    if( !fCss.open(QFile::ReadOnly))
    {
        qDebug("css File %s load false",strCssFile);
        return;
    }
    QString strCssContent(fCss.readAll());
    setStyleSheet(strCssContent);
    fCss.close();
}

void MainDlg::InitUI()
{
    // 给ComBox添加一些测试文本
    QString strContent;
    for(int i=0;i<10;i++)
    {
        strContent.sprintf("Text%.2d",i);
        ui->comboBox->addItem(strContent);
    }
    emit ui->comboBox->setCurrentIndex(0);

    // 加载CSS文件
    QString strPath = QCoreApplication::applicationDirPath();
    qDebug()<
	

		

	
	

		在exe所在目录，新建一个default.css文本文件。
	
	

		编译，运行，没有错误后就可以进行下一步了。
	
	

		---------------------------------------
	
	

		CSS文件内容：
	
	

		书写CSS更多地需要一些html和CSS基础，这个方面谁也帮不了，不会的童鞋请自行学习或了解。
	
	

		Qt的伪状态和特殊属性请参考前两篇文章：
	
	

		http://blog.csdn.net/bbdxf/article/details/22746863
	
	

		http://blog.csdn.net/bbdxf/article/details/22746307
	
	

		http://blog.csdn.net/bbdxf/article/details/22745675
	
	

		

	
	

		下面直接贴出一个样例文本：
	
	

		

	
	

		
		
QDialog#MainDlg{
    background-image: url("bg.png");
    border: 1px solid #999;
    border-radius: 5px;
}

QPushButton{
    color:white;
    border-radius:3px;
    background-color: black;
}
QLabel{
    color:blue;
}

QLineEdit{
    text-align: center;
    color:red;
    background-color: transparent;
    border: 1px solid white;
    selection-color:yellow;
    selection-background-color:green;
}
QRadioButton{
    color: slateblue;
}
QRadioButton::indicator:on{
    background-image: url("1.gif");
}
QComboBox{
    min-width: 4em;
    background-color: transparent;
}
QComboBox:on{
    color:red;
}
QComboBox:off{
    color:black;
}
QComboBox QAbstractItemView {
    border: 1px solid black;
    color:black;
    selection-color: red;
    selection-background-color: green;
}

QProgressBar{
    border: 1px solid #999;
    border-radius:5px;
    text-align: center;
    background-color: transparent;
}

QProgressBar::chunk {
    background-color: #CD96CD;
    width: 10px;
}
	
QDialog#MainDlg{
	background-image: url("bg.png");
	border: 1px solid #999;
	border-radius: 5px;
}

QPushButton{
	color:white;
	border-radius:3px;
	background-color: black;
}
QLabel{
	color:blue;
}

QLineEdit{
	text-align: center;
	color:red;
	background-color: transparent;
	border: 1px solid white;
	selection-color:yellow;
	selection-background-color:green;
}
QRadioButton{
	color: slateblue;
}
QRadioButton::indicator:on{
	background-image: url("1.gif");
}
QComboBox{
	min-width: 4em;
	background-color: transparent;
}
QComboBox:on{
	color:red;
}
QComboBox:off{
	color:black;
}
QComboBox QAbstractItemView {
    border: 1px solid black;
    color:black;
    selection-color: red;
    selection-background-color: green;
}

QProgressBar{
	border: 1px solid #999;
	border-radius:5px;
	text-align: center;
	background-color: transparent;
}

QProgressBar::chunk {
    background-color: #CD96CD;
    width: 10px;
}


下面是使用样式之后的界面：
	

		

	
	

		
	
	

		

	
	

		-----------------------------------------
	
	

		至此，我们就可以随意修改css文件然后启动程序查看效果了，是不是很有意思！！
	
	

		

	
	

		更多列子可以在Qt 帮助文档中搜索 Qt Style Sheets Examples就可以查看官方的一些空间美化的例子了！祝大家好运！
	
	

		

	
	

		-----------------------
	
	

		控制的3种方式// 根据ObjectName定制
	
	

		

	
	

		

	
	

		
		
// 根据ObjectName定制
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::menu-indicator {
    image: url(myindicator.png);
    subcontrol-position: right center;
    subcontrol-origin: padding;
    left: -2px;
}

// 复合控制

 QLineEdit { color: red }
 QLineEdit[readOnly="true"] { color: gray }
 #registrationDialog QLineEdit { color: brown }

// 动态属性，setProperty

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