用QSS文件美化窗体实战示例代码(QT实战4)

使用QSS文件来美化窗体实战示例代码(QT实战4)

 

什么是QSS

QSS称为Qt Style Sheets也就是Qt样式表,它是Qt提供的一种用来自定义控件外观的机制。QSS大量参考了CSS的内容,只不过QSS的功能比CSS要弱很多,体现在选择器要少,可以使用的QSS属性也要少很多,并且并不是所有的属性都可以用在Qt的所有控件上。

QSS在Qt程序中的使用方法

 

  1、建立QSS文件 style.qss

   标题栏、中间部分以及底部样式设置。

/***********************************************************/
/*标题栏、中间部分以及底部样式设置*/
/***********************************************************/
QWidget#widget_Top{
        background: qlineargradient(spread:padding-bottom, x1:0, y1:0, x2:0, y2:1, stop:0 #184CA5, stop:1 #39AAD8);
}


QWidget#widget_Mid{
        background: qlineargradient(spread:padding-bottom, x1:0, y1:0, x2:0, y2:1, stop:0 #4B87AF, stop:1 #88C7D7);
}

QWidget#widget_Bottom{
        background: qlineargradient(spread:padding-bottom, x1:0, y1:0, x2:0, y2:1, stop:0 #4B769F, stop:1 #2D5188);
}

2、QT工程中加入QSS文件

工程文件的后缀是pro,资源文件的后缀是qrc。下面往一个建好的工程中添加资源文件。

 

a、工程名上鼠标右键点击添加新文件

 

选择添加QT资源文件,名称随便填写,这里填写images,路径存放在工程路径下面。其他的填写默认即可。

建立好资源后会默认进入资源管理界面

点击添加->添加前缀 输入/qss     

点击添加->添加文件  把我们需要用到的文件style.qss添加进去

添加资源文件时会往工程中*.pro添加代码:

RESOURCES += \

    images.qrc     这就表明了项目中使用了资源文件。

3、使用QSS文件来设置样式

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    //应用样式 apply the qss style
    QFile file(":/qss/style.qss");
    file.open(QFile::ReadOnly);
    QTextStream filetext(&file);
    QString stylesheet = filetext.readAll();
    //QApplication调用setStyleSheet()后所有的部件样式都会改变
    qApp->setStyleSheet(stylesheet);

    MainWindow w;
    w.show();



    return a.exec();
}

页面中设计包括三个主要子控件:

widget_Top

widget_Mid

widget_Bottom

我们QSS文件也主要针对这三个部分来设计。

不使用QSS效果图

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值