Qt学习（2） qss/css的简单使用

最新推荐文章于 2025-09-26 13:42:48 发布

原创

最新推荐文章于 2025-09-26 13:42:48 发布 · 1.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#c++ #qt #qt5 #css

本文介绍Qt界面美化技巧，通过QSS样式表实现界面元素的美化，包括背景图、边框及圆角等效果，并提供了完整的代码示例。

qss的简单使用

1、前言
2、代码C++
- 2.1 qss文件的创建
- 2.2 qss代码

1、前言

这是一个系列博客，我将我学习qt的过程已经整理的代码都会放到博客上去，希望能够帮助到大家~
Github网址：https://github.com/cssdcc1997/qt_learning
python版博客：还未更新

废话少说，线上简单qss使用的效果图：
在这里插入图片描述
其中包括了使用背景图background-image，边框参数border以及border-radius（用于设置控件的圆角，使得界面更加圆滑、好看）。
Gif:

接下来上代码

2、代码C++

#include "mainwindow.h"

//

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
   
   

    initUI();

    //init gpio
    //wiringPiSetupSys();
}

MainWindow::~MainWindow()
{
   
   
    //wiringPiTerminateSys();
}

void MainWindow::on_identify_succeed()
{
   
   
    QSound::play(":sounds/sbcg.wav");
    identify_succeed_btn->setEnabled(false);
    identify_waiting_btn->setEnabled(true);
    door_control(true);
}

void MainWindow::on_identify_waiting()
{
   
   
    QSound::play(":sounds/ksdl.wav");
    identify_succeed_btn->setEnabled(true);
    identify_waiting_btn->setEnabled(false);
    door_control(false);
}

void MainWindow::door_control(bool open_or_not)
{
   
   
//    //pinmode, which pin,input or output
//    pinMode(7, OUTPUT);
//    //set value, high or low
//    if(open_or_not){
   
   
//       digitalWrite(7, HIGH);
//    }else{
   
   
//       digitalWrite(7, LOW);
//    }
}

void MainWindow::initUI()
{
   
   
    resize(400,700);

    personal_photo_label = new QLabel;
    personal_photo_label->setObjectName("personal_photo_label");
    personal_photo_label->setFixedSize(300,