QT Framework-偶得之一---让Forms的UI可以用CSS

 

QSS-Qt Style Sheet.QT 样式表。如QT官方文档所介绍，QSS的设计灵感来源于HTML CSS灵感，但它确实应用在QT的Widgets上。按照通俗的说法，就是可以在我们的传统Client的窗体应用中，加入Web风格的定制元素。

简单总结下其价值：

1、传统的客户端Form应用，其界面定制的“不灵活”一直是广大Coder们的噩梦，利用QSS定制UI，可以将UI定制部分单独拆离业务逻辑代码，其灵活性和易维护性不言而喻；

2、随着互联网这几年的快速发展，特别近几年所谓Web 2.0时代的带来，Web上的新技术、新表现手法层出不穷。Web UI定制技术也日新月异。QSS支持W3C 最新的CSS3标准，这样，我们的Web设计人员可以在无需具有Form开发背景的情况下进行UI定制开发了；

3、QT框架是Nokia开发社区主推的所谓“跨平台”的“原生”C++框架，和MFC等C++框架一样，提供了大量的UI定制支持。尤其是QSS 支持。这样在Windows、MAC、Linux，以至于Sybian、Android和IPhone等平台上，可以做到UI层次的“平台无关”和统一；

其他好处很多，在此不慢慢总结。下面，简单介绍下QSS的使用方法和原理。
为了直观说明，上图：

 

QT框架提供对于QSS的原生“解析引擎”QStyle极其派生类QStyleSheetStyle，可以根据平台的差异，实现各平台自己风格的UI支持。

下面看一段界面定制的代码：

QFrame { --定制对象
    margin: 10px; --定制margin大小
    border: 2px solid green; --定制边界大小及颜色
    padding: 20px; --定制Padding
    background-color: gray; --定制控件背景色
    background-image: url(qt.png);--。。。。
    background-position: top right;
    background-origin: content;
    background-repeat: none;
}

熟悉CSS的同学一定会觉得很似曾相识，是的！这就是所谓的QSS。其语法与风格与CSS基本一致，同样支持Selector等标准CSS风格语法。
那么，如何载入样式呢，继续上代码：
有两种载入QSS的方法：
1）应用级：QApplication::setStyleSheet ( const QString & sheet )。顾名思义，就是在应用初始化时，载入QSS来初始化各Widget的全局样式。

2）控件级： QWidget::setStyleSheet ( const QString & sheet )。是在控件初始化时，载入本控件关联的Widget。


和CSS一样，QSS也是符合级联规则的（子控件继承父控件样式）。
喜欢或者对于QSS感兴趣的同学，可以去找些QT官方的DOC慢慢研究，目前QT框架还属于完善阶段，但其应用大有前途！