Qt界面美化之自定义qss样式表

Posted 2023-03-08 特立独行的猫a

原生的QT界面不好看，有时候需要根据美工的设计图修改样式。如果使用QML的话搞界面是快，但是QML有点儿吃内存，有时简单的功能还是用传统c++的widget方便些。好在有qss，传统界面也可以美化的。QSS称为Qt Style Sheets也就是Qt样式表，它是Qt提供的一种用来自定义控件外观的机制。QSS大量参考了CSS的内容，只不过QSS的功能比CSS要弱很多，体现在选择器要少，可以使用的QSS属性也要少很多，并且并不是所有的属性都可以用在Qt的所有控件上。

目标任务

以下以实例介绍下自定义样式的实现，如下图所示，实现下图的效果。

 提供的美工资源有个关机的透明图标：

 如何实现？接下来详细介绍下。

详细步骤

一、新建qrc文件，添加和保存资源文件

首先新建个qrc资源文件，使用Qtcreater的话可以直接在菜单中找新建->资源文件(qrc)。当然这个文件也可以手工创建。文件内容如下image.qrc：

<RCC>
    <qresource prefix="/">
        <file>qss/gray.css</file>
        <file>image/shutdownicon.png</file>
        <file>image/shutdownlogo.png</file>
        <file>image/shutdownpushbutton.png</file>
        <file>image/shutdownpushbuttonpress.png</file>
        <file>image/spinner.png</file>
        <file>image/tips.png</file>
        <file>image/calendar.png</file>
    </qresource>
</RCC>

在根目录里创建一个qss文件夹，里面创建全局样式表css文件。（建议这么搞，样式都统一放到样式表文件里，方便后续修改。不建议直接在界面上使用QtDesigner去改样式。）

二、新建css样式表文件

style.css样式文件内容如下：

QPalettebackground:#e5e5e5;

QLabel,
QLineEdit,
QTextEdit,
QPlainTextEdit,
QGroupBox,
QComboBox,
QDateEdit,
QTimeEdit,
QDateTimeEdit,
QTreeView,
QListView,
QTableView,

QLineEdit,
QTextEdit,
QPlainTextEdit 



QLabel#image1
    /*background-image: url(:/image/shutdownlogo.png);*/


QLabel#text1
    color: #004695;
    font: 75 18pt "微软雅黑";


QLineEdit[echoMode="2"] 
    lineedit-password-character: 9679;


.QGroupBox 
    border: 1px solid #A9A9A9;
    border-radius: 5px;


.QPushButton 
    border-style: none;
    border: 1px solid #A9A9A9;
    color: #FFFFFF;
    padding: 5px;
    /* min-height: 20px; */
    /* min-width: 30px; */
    border-radius: 40px;
    background: rgb(46,118,199);


.QPushButton:hover 
    background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgb(46,118,199), stop:1 #C1C1C1);


.QPushButton:pressed 
    background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #004695, stop:1 #004695);



.QPushButton:disabled 
    color: #838383;
    background: #F4F4F4;


.QPushButton#btnShutDown 
    background-image: url(:/image/shutdownicon.png);
    background-position: left;
    background-repeat: no-repeat;
    background-origin:content;
    padding-left:90px;
    text-align: right;
    padding-right:120px;
    font: 25 20pt "Microsoft YaHei";



.QPushButton#btnShutDown:pressed 
    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #004695, stop:1 #004695);


QCheckBox 
    color: #000000;
    spacing: 2px;


QCheckBox::indicator 
    width: 20px;
    height: 20px;



QRadioButton 
    color: #000000;
    spacing: 2px;


QComboBox 
    /* border-style: none; */
    /* border: 1px solid #A9A9A9; */
    border-radius: 5px;


QSpinBox 
    border-radius: 5px;

style.css文件内容解释，有点css基础的应该很容易看懂。最前面的一系列是统一设置控件的样式。

QLabel#image1
    /*background-image: url(:/image/shutdownlogo.png);*/


QLabel#text1
    color: #004695;
    font: 75 18pt "微软雅黑";

这里的#后面跟的内容，就是你界面里指定的控件对象名称，如image1,text1等。

.QPushButton#btnShutDown:pressed 
    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #004695, stop:1 #004695);

以上的:pressed设置按钮按下时的样式，hover是鼠标悬停上面的样式。

设置按钮的背景图片，关键属性：

1、background-position  -----  设置图标的位置

2、text-align-------------设置文本的位置            

3、background-origin-------------相对于内容框来定位背景图像

如何使用

在mainWindow窗口实例化的地方，全局加载即可。

        //设置指定样式
        static void setStyle(const QString &qssFile) 
        QFile file(qssFile);
        if (file.open(QFile::ReadOnly)) 
            QString qss = QLatin1String(file.readAll());
            qApp->setStyleSheet(qss);
            QString PaletteColor = qss.mid(20, 7);
            qApp->setPalette(QPalette(QColor(PaletteColor)));
            file.close();
        
    

MainWindow::MainWindow(QWidget *parent) :
        QWidget(parent), ui(new Ui::MainWindow) 
    ui->setupUi(this);
    setFixedSize(1280, 1024);
    //setWindowFlags(Qt::Window | Qt::FramelessWindowHint);
    myHelper::setStyle(":/qss/style.css");

 整理了一个全局的辅助类，方便使用。 

#ifndef MYHELPER_H
#define MYHELPER_H

#include <QtCore>
#include <QtGui>

#if (QT_VERSION > QT_VERSION_CHECK(5, 0, 0))

#include <QtWidgets>

#endif

class myHelper : public QObject 

public:
    static void autoRunWithSystem(bool ifAutoRun, QString appName, QString appPath) 
        QSettings *reg = new QSettings(
                "HKEY_LOCAL_MACHINE\\\\SOFTWARE\\\\Microsoft\\\\Windows\\\\CurrentVersion\\\\Run", QSettings::NativeFormat);

        if (ifAutoRun) 
            reg->setValue(appName, appPath);
         else 
            reg->setValue(appName, "");
        
    

    //设置编码为UTF8
    static void setTextCode(const QString sForName = "UTF-8") 
#if (QT_VERSION <= QT_VERSION_CHECK(5, 0, 0))
        QTextCodec *codec = QTextCodec::codecForName(sForName);
        QTextCodec::setCodecForLocale(codec);
        QTextCodec::setCodecForCStrings(codec);
        QTextCodec::setCodecForTr(codec);
#endif
    


    //设置指定样式
    static void setStyle(const QString &qssFile) 
        QFile file(qssFile);
        if (file.open(QFile::ReadOnly)) 
            QString qss = QLatin1String(file.readAll());
            qApp->setStyleSheet(qss);
            QString PaletteColor = qss.mid(20, 7);
            qApp->setPalette(QPalette(QColor(PaletteColor)));
            file.close();
        
    

    //加载中文字符
    static void setChinese() 
        QTranslator *translator = new QTranslator(qApp);
        translator->load(":/image/qt_zh_CN.qm");
        qApp->installTranslator(translator);
    

    //判断是否是IP地址
    static bool isIP(const QString sIP) 
        QRegExp RegExp("((2[0-4]\\\\d|25[0-5]|[01]?\\\\d\\\\d?)\\\\.)3(2[0-4]\\\\d|25[0-5]|[01]?\\\\d\\\\d?)");
        return RegExp.exactMatch(sIP);
    

    //延时
    static void sleep(int sec) 
        QTime dieTime = QTime::currentTime().addMSecs(sec);

        while (QTime::currentTime() < dieTime) 
            QCoreApplication::processEvents(QEventLoop::AllEvents, 100);
        
    

    //延时
    static int sleep1(int command, int sec, int *state) 
        int ret = 0;
        QTime dieTime = QTime::currentTime().addMSecs(sec);

        while (QTime::currentTime() < dieTime) 
            if (((0xC7 != command && 0xC1 != command) && (*state == 2)) ||
                ((0xC7 == command || 0xC1 == command) && (*state == 3))) 
                return 1;
            
            QCoreApplication::processEvents(QEventLoop::AllEvents, 100);
        
        ret = 2;
        return ret;
    

    //窗体居中显示
    static void moveFormToCenter(QWidget *frm) 
        int frmX = frm->width();
        int frmY = frm->height();

        QDesktopWidget dwt;

        int deskWidth = dwt.availableGeometry().width();
        int deskHeight = dwt.availableGeometry().height();

        QPoint movePoint(deskWidth / 2 - frmX / 2, deskHeight / 2 - frmY / 2);
        frm->move(movePoint);
    
;

#endif // MYHELPER_H

CMakeLists文件

由于习惯了使用cmake，以下附上cmake的QT工程配置，CMakeList.txt文件。

cmake_minimum_required(VERSION 3.21)
project(myapp)

set(CMAKE_PREFIX_PATH "D:/Qt/Qtxx/xx.xx/msvc20xx/lib/cmake")

add_definitions(
        -D_ENABLE_LOGGING
)

##设置输出目录
set(BUILD_DIRECTORY "")
set(BUILD_DIRECTORY $CMAKE_CURRENT_SOURCE_DIR/../build)
####################  QT dependencies ########################
set(CMAKE_CXX_STANDARD 11)
set(CMAKE_AUTOMOC ON)
set(CMAKE_AUTORCC ON)
set(CMAKE_AUTOUIC ON)

set(QT_VERSION 5)
set(REQUIRED_LIBS Core Gui Network Widgets)
set(REQUIRED_LIBS_QUALIFIED Qt5::Core Qt5::Gui Qt5::Network Qt5::Widgets)

####################  set output directory ####################
set(BUILD_DIR $BUILD_DIRECTORY)
set(LIB_DIR $BUILD_DIR/lib/Release)
set(LIB_FIX)
if (CMAKE_BUILD_TYPE MATCHES "Debug")
    set(LIB_DIR $BUILD_DIR/lib/Debug)
    set(LIB_FIX _d)
endif ()

get_filename_component(ABSOLUTE_PATH $LIB_DIR ABSOLUTE)
set(LIB_DIR $ABSOLUTE_PATH)

set(CMAKE_ARCHIVE_OUTPUT_DIRECTORY $LIB_DIR)
set(CMAKE_LIBRARY_OUTPUT_DIRECTORY $LIB_DIR)
set(CMAKE_PDB_OUTPUT_DIRECTORY $LIB_DIR)
set(CMAKE_RUNTIME_OUTPUT_DIRECTORY $LIB_DIR)

set(LIB_DIR_FIX $LIB_DIR)
option(USE_VS_BUILD "use visual studio build." OFF)
if (USE_VS_BUILD)
    set(LIB_DIR_FIX $LIB_DIR/bin/Debug)
endif ()
####################  set include path ####################
include_directories(
        $CMAKE_CURRENT_SOURCE_DIR/source/cpp/logger
        $CMAKE_CURRENT_SOURCE_DIR/source/cpp/misc
        $CMAKE_CURRENT_SOURCE_DIR/source/cpp
        $BUILD_DIR/include
)

####################  scan source files ####################
aux_source_directory($CMAKE_CURRENT_SOURCE_DIR/source/cpp/logger SRC_FILES)
aux_source_directory($CMAKE_CURRENT_SOURCE_DIR/source/cpp/misc SRC_FILES)
aux_source_directory($CMAKE_CURRENT_SOURCE_DIR/source/cpp SRC_FILES)

#####设置资源文件
set(RESOURCE_SOURCES
        image.qrc
        )
####################  version config ####################
if (MSVC)
    set(MY_VERSIONINFO_RC "$CMAKE_CURRENT_BINARY_DIR/VersionInfo.rc")
    configure_file("$CMAKE_CURRENT_SOURCE_DIR/resource.rc.in"
            "$MY_VERSIONINFO_RC")
endif ()

set(MY_VERSIONINFO_RC "")

add_executable($PROJECT_NAME main.cpp mainwindow.cpp mainwindow.h mainwindow.ui $SRC_FILES $RESOURCE_SOURCES $MY_VERSIONINFO_RC)

####################  set target properties ####################
set_target_properties($PROJECT_NAME PROPERTIES DEBUG_POSTFIX _d)

set_property(TARGET $PROJECT_NAME PROPERTY WIN32_EXECUTABLE true)

####################  set target dependencies ####################
find_package(Qt$QT_VERSION COMPONENTS $REQUIRED_LIBS REQUIRED)


###############vcpkg的三方库######################################
find_package(g3log CONFIG REQUIRED)

###############三方静态库#########################################
set(REDIS_CLIENT_LIB $LIB_DIR_FIX/redisclient$LIB_FIX.lib)

set(THIRD_LIBS
        g3log
        $REDIS_CLIENT_LIB
        )

target_link_libraries($PROJECT_NAME PRIVATE $REQUIRED_LIBS_QUALIFIED $THIRD_LIBS)

其他资源

【QT】QSS美化——基础知识_qt qss_Jason~shen的博客-CSDN博客

【Qt】使用Qss设置QPushButton图标和显示文本的位置-CSDN博客

https://www.cnblogs.com/csuftzzk/p/qss_button_menu.html

https://www.cnblogs.com/wangqiguo/p/4960776.html

https://www.cnblogs.com/bclshuai/p/9809679.html

CSS3 background-origin 属性 | 菜鸟教程