QT智能家居界面qss渲染
新手，刚开始入门QT，想着用QT做上位机，做界面是如何实现的，于是在一片博客中看到这个智能家居的界面，于是仿照这个博客编写了这和界面，这个界面原创是“流浪的鹅卵石”。在这里感谢“流浪的鹅卵石”，
http://blog.csdn.net/u013704336/article/details/51072709
本人只是仿照。写本博客只是想记入学习过程中的一些心得和笔记并且遵守Qt开源协议（LGPL）附上源代码：
下面上截图：
(一)、做界面，主要的还是能够实现界面的切换，
界面的切换有2中方法可以实现：
1.采用show() 和 hide().的方法。既show()显示一个窗口，hide()隐藏本窗口。
eg:按下一个button切换到另外一个ui界面。
在槽函数里面写：
void MainWindow::on_button_clicked()
{
homeWidget *w = new HomeWidget;//HomeWidget是我们要切换的界面，并且要包homeWidget的头文件。
w->show();//显示HomeWidget这个窗口。
this->hide();// 本窗口隐藏。
}2.使用stackedWidget类切换界面，
stackedWidget类是一个堆栈窗口的类，在ui中拉出一个stackedWidget类控件时，默认这个stackedwidget有2页，page0,page1.
当然，如果只需要切换2页的话，这个就足够了，但是如果要切换更多的页，我们就需要这这个stakedWidget中添加了，使用addWidget( )添加一个QWidget到stackedWidget中。
具体的操作方法如下：
//(1).首先定义一个页面的常量。
enum enum_widget{
E_Control_WIDGET = 0, //控制主页
E_HOME_WIDGET, //首页
E_PARLOUR_WIDGET = 2, //客厅
E_ENTERTAINMENT_WIDGET, //娱乐
E_BEDROOM_WIDGET, //卧室
E_KITCHEN_WIDGET, //厨房
E_TEMPTURE,
E_NIGHT_WIDGET, //夜间模式
E_SECURITY_WIDGET, //安防管理界面
E_CURTAIN_WIDGET, //窗帘界面
E_MODEL_WIDGET, //模式控制
E_MUSIC_WIDGET //音乐播放界面
};
// (2).在.h文件中先申明各个Widget(要显示的ui界面):
SystemSettingDialog *m_settingDialog; //设置界面
Parlourwidget *m_parlourWidget; //客厅界面
BedRoomWidget *m_bedRoomWidget; //卧室界面
KitchenWidget *m_kitchenWidget; //厨房界面
StatisticWidget *m_statisticWidget; //统计界面
EntertainmentWidget *m_entertainmentWidget; //娱乐界面
NightWidget *m_nightWidget; //夜间界面
SecurityWidget *m_securityWidget; //安防监控界面
CurtainWidget *m_curtainWidget; //窗帘界面
ModelChooseWidget *m_modelWidget; //模式选择控制界面
MusicWidget *m_musicPlayWidget; //音乐播放界面
// (3).再在构造函数里添加stackedWidget中addWidget的代码：(注意:这里addWidget要个上面定义的那个enum_widget相对应，从2开始，应为一开始已经有2个page了)
// 先定义：
m_settingDialog = new SystemSettingDialog;
m_parlourWidget = new Parlourwidget; //客厅
m_bedRoomWidget = new BedRoomWidget; //卧室
m_kitchenWidget = new KitchenWidget; //厨房
m_statisticWidget = new StatisticWidget; //统计
m_entertainmentWidget = new EntertainmentWidget; //娱乐
m_nightWidget = new NightWidget; //夜间模式
m_securityWidget = new SecurityWidget; //安防监控界面
m_curtainWidget= new CurtainWidget; //窗帘界面
m_modelWidget = new ModelChooseWidget; //模式控制界面
m_musicPlayWidget = new MusicWidget; //音乐播放界面
// 在add:
ui->stackedWidget->addWidget(m_parlourWidget); //添加一个page2到stackedWidget中。
ui->stackedWidget->addWidget(m_entertainmentWidget); // page3
ui->stackedWidget->addWidget(m_bedRoomWidget); // page4
ui->stackedWidget->addWidget(m_kitchenWidget); // page5
ui->stackedWidget->addWidget(m_statisticWidget); // page6
ui->stackedWidget->addWidget(m_nightWidget); // page7
ui->stackedWidget->addWidget(m_securityWidget); // page8
ui->stackedWidget->addWidget(m_curtainWidget); // page9
ui->stackedWidget->addWidget(m_modelWidget); // page10
ui->stackedWidget->addWidget(m_musicPlayWidget); // page11
// (4).在写按钮的槽函数：(按下这个按键进入相应的界面)
void Widget::on_tbnHome_clicked()
{
ui->stackedWidget->setCurrentIndex(E_HOME_WIDGET); //进入相应的界面：
}总结:使用stackedWidget切换界面的时候，要先确定好，那个界面是page 几，然后在调用setCurrentIndex( int n );进行切换界面。、
（二）、enum 是c++中的枚举类型。
以一系列的字符串来比表示整型数字，起到更方便阅读和维护代码的效果
enum的定义：
enum enum_name
{
enum_value1,
enum_value2,
...
enum_value3
};如果没有定义enum变量的需求, enum_name 的值可以省略。
在以上形势下，第一个值，enum_value1 默认值为0，以下各条分别加上1.
如果要改变enum的第一个值，或里面某一项的值，只需要赋值就行，没有赋值的，也符合加一原则。
（三）、qss渲染界面，
界面的渲染采用qss 既Qt Style Sheets。
1. 使用qss文件的方法：
(1)、首先写一个.qss文件
QPushButton{
border:2px solid gray;
}
QPushButton:hover{
color:white;
background:red; (2)、把它保存为xxx.qss
(3)、添加到资源文件
(4)、使用文件
int main(int argc, char *argv[]) {
QApplication a(argc, argv);
Widget w;
w.show();
QFile styleFile(":/resource/sty/style.qss");
styleFile.open(QIODevice::ReadOnly);
QString setStyleSheet(styleFile.readAll());;
a.setStyleSheet(setStyleSheet);
return a.exec(); } 2.一个样式表由一系列的样式规则构成，每个样式规则都有下面的selector{
attribute:
value
}(selector)部分,通常是一个类名（例如：QComboBox）,当然还有其他的语法形式属性(attribute)部分，是一个样式表属性的名字，值(value)部分，是赋给该属性的值
为了方便，我们还可以使用一种简化的selector1,selector2,…,selectorM{
attribute1:value1;
attribute2:value2;
…
attributeN:valueN
}化的形式，可以同时为M个选择器设置N中
QCheckBox,QComboBox,QSpinBox{
color:red;
background-color:white;
font:bold;则设置了所有的QCheckBox,QComboBox和QSpinBox的前景色、背景色、和字体
3、 方箱模型：
在样式表中，每个部件都被看做是一个由四个相似矩阵组成的箱体：空白(margin)、边框(border)
、填充(padding)和内容(content)。对于一个平面部件–(一个空白、边框、和填充都是0像素的部件)
这四个矩形是完全重合的。
空白区域位于边框外，并且总是透明的。边框部件提供了四周的框架。其border-style属性可以设置为一些
内置的框架风格，如inset,outset,solid和ridge.填充在边框和内容区域之间的空白间隙。
4、前景与背景：
部件的前景色用于绘制上面的文本，可以通过color属性指定
背景色由于绘制部件的填充矩形，可以通过 background-color 属性指定。
背景图片通过 background-image 属性定义，它用于绘制 background-origin指定的矩形区域(空白、边框、填充、
或内容)。背景图片在矩形区域的对其方式和平铺方式可以通过 background-position 和 background-repeat属性指定。
如果指定了背景图片具有 alpha通道(半透明效果)，则通过 background-color指定的颜色将会透过透明区域，这个功能
可以使得背景图片在多种环境下重复使用。
5、创建可缩放样式：
在默认情况下，通过 background-image指定的背景图片会自动重复平铺。
如果我们想创建能够伴随部件大小自动缩放而不是平铺的背景，我们需要设置”边框图片”。
“边框图片”通过 border-image属性指定。它同时提供了部件的背景和边框。
6、控件大小：
min-width和min-height两个属性可以用来指定部件内容区域的最大，最小。
7、处理伪状态
部件的外观可以按照用户界面元素状态的不同来分别定义，这样在样式表中称为”伪状态”。
例如：我们在想一个pushButton 在被按下的时候具有sunken的外观，我们可以指定一个叫做：pressed的伪状态。
QPushButton {
border: 2px outset green;
background: gray;
}
QPushButton:pressed {
border-style: inset;
}伪状态列表：
伪状态 描述
:checked button部件被选中
:disabled 部件被禁用
:enabled 部件被启用
:focus 部件获得焦点
:hover 鼠标位于部件上
:indeterminate checkBox 或 radiobutton被部分选中。
:off 部件可以切换，且处于off状态
:on 部件可以切换，且处于on状态
:pressed 部件被鼠标按下
:unchecked button部件未被选中。
8、使用子部件定义微观样式：
许多部件都包含子部件，spin box 上的箭头就是子部件最好的例子了。
子部件可以通过 :: 来指定。如 QDateTimeEdit::up-button .
子部件列表：
子部件 描述
::down-arrow combo box或spin box的下拉箭头
::down-button spin box的向下按钮
::drop-down combo box的下拉箭头
::indicator checkbox、radio button或可选择group box的指示器
::item menu、menu bar或status bar的子项目
::menu-indicator push button的菜单指示器
::title group box的标题
::up-arrow spin box的向上箭头
::up-button spin box的向上按钮
9、样式表的使用：
1、建立文本文件，写入样式表内容，更改文件后缀名为qss；
2、在工程中新建资源文件*.qrc，将qss文件加入资源文件qrc中，此处注意prefix最好为”/”，否则在调用qss文件时会找不到文件；
3、通过传入路径\文件名的方式创建一个QFile对象，以readonly的方式打开，然后readAll，最后qApp->setStyleSheet就可以使qss生效。
QApplication app(…);
QFile qss(“stylesheet.qss”);
qss.open(QFile::ReadOnly);
app.setStyleSheet(qss.readAll());
qss.close()；
10、QSS的选择器类型：
1.通配选择器：* ; 匹配所有的控件
2.类型选择器：QPushButton ; 匹配所有QPushButton和其子类的实例
3.属性选择器：QPushButton[flat=”false”]; 匹配所有flat属性是false的QPushButton实例，注意该属性可以是自定义的属性，不一定非要是类本身具有的属性
4.类选择器： .QPushButton ; 匹配所有QPushButton的实例，但是并不匹配其子类。这是与CSS中的类选择器不一样的地方，注意前面有一个点号
5.ID选择器： #myButton; 匹配所有id为myButton的控件实例，这里的id实际上就是objectName指定的值
6.后代选择器： QDialog QPushButton ; 所有QDialog容器中包含的QPushButton，不管是直接的还是间接的
7.子选择器： QDialog > QPushButton; 所有QDialog容器下面的QPushButton，其中要求QPushButton的直接父容器是QDialog
总结：以上是使用qss之前需要掌握的一些知识：重点是在渲染的时候你要把对象看成是一个盒子，我们对这个盒子进行渲染，主要渲染的有：空白(margin)、边框(border)、填充(padding)和内容(content)。
一般需要需要做界面美化的时候，我们都需要把我们的控件用一个QWidget类来当做盒子，装这些控件，然后在美化这个QWidget 类 ：
eg:
QWidget#widget_data{
boreder:2px outset red;/*设置边框为2个像素,显示槽状，灰色*/
border-radius:12px;/*边框圆角，4个角的像素都为12*/
padding:2px 4px;/*填充*/
background: qlineargradient(spread:padding-bottom, x1:0, y1:0, x2:0, y2:1, stop:0 #FFFFFF, stop:1 #226FC0);
/*widget_data的背景为渐变颜色，方向是从下到上stop:0 (0开始这个点)的颜色#446E9A,stop 1 的颜色#226FC0*/
}一般都是采用渐变的颜色。这样就达到了我们需要美化那一块区域了。。(美化那一块就，那一块就用一个QWidget类来当盒子承接)。
（四）ToolButton类
使用ToolButton类的按钮，要和界面融合在一起不显示按键的控件大小，只显示一个图标，类似：
首先要勾选autoRaise (自动凸起)。让后再设置图标，并且可以设置按钮控件大小随图标的大小而改变：
ui->tbnBedRoom->setText(tr("卧室"));
ui->tbnBedRoom->setAutoRaise(true);//auto 自动 raise 升起，凸起
ui->tbnBedRoom->setIcon(QPixmap(":/images/midwidget/Bedroom.png"));
ui->tbnBedRoom->setIconSize(QPixmap(":/images/midwidget/Bedroom.png").size());
ui->tbnBedRoom->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);//文本在图标下面。当然这个setIconSize也可以自己指定大小，
eg:
通过自己编写的一个函数要实现上面的功能：
void KitchenWidget::setToolButtonStyle(QToolButton *tbn,
const QString &text,
const QString iconName)
{
//设置显示的文本
tbn->setText(text);
tbn->setFont(QFont("文泉驿雅黑",10,QFont::Normal));
tbn->setAutoRaise(true);
//设置按钮图标
tbn->setIcon(QPixmap(QString("%1").arg(iconName)));
tbn->setIconSize(QSize(40,40));//指定图标的大小
//设置文本在图标下边
tbn->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);
}然后在调用：
setToolButtonStyle(ui->tbn_smoke_add,tr("浓度加"),
":/images/module/temp_add.png");源代码下载：
http://download.csdn.net/detail/qq_33559992/9616593