关闭

QT智能家居界面qss渲染

标签: qt
620人阅读 评论(0) 收藏 举报
分类:

新手,刚开始入门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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:13822次
    • 积分:334
    • 等级:
    • 排名:千里之外
    • 原创:19篇
    • 转载:6篇
    • 译文:0篇
    • 评论:0条
    文章分类