原生的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样式文件内容如下：

QPalette{background:#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 属性 | 菜鸟教程

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

目标任务

详细步骤

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

二、新建css样式表文件

如何使用

CMakeLists文件

其他资源

热门文章

最新文章

相关电子书

相关实验场景

推荐镜像

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

目标任务

详细步骤

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

二、新建css样式表文件

如何使用

CMakeLists文件

其他资源

热门文章

最新文章

相关电子书

相关实验场景

推荐镜像