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