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

最新推荐文章于 2024-08-26 16:53:14 发布

ydyuse

最新推荐文章于 2024-08-26 16:53:14 发布

阅读量3.1k

点赞数 3

分类专栏： QT项目实战文章标签： qt5 c++ css

本文链接：https://blog.csdn.net/ydyuse/article/details/105344211

版权

使用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、工程名上鼠标右键点击添加新文件

选择添加ＱＴ资源文件，名称随便填写，这里填写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效果图