Qt界面美化之自定義qss樣式表的詳細(xì)步驟
更新時(shí)間：2023年03月07日 08:53:53 作者：特立獨(dú)行的貓a
很多人應(yīng)該和我一樣,想做界面才接觸的Qt,結(jié)果就是做不出來華麗的界面,下面這篇文章主要給大家介紹了關(guān)于Qt界面美化之自定義qss樣式表的詳細(xì)步驟,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
原生的QT界面不好看，有時(shí)候需要根據(jù)美工的設(shè)計(jì)圖修改樣式。如果使用QML的話搞界面是快，但是QML有點(diǎn)兒吃內(nèi)存，有時(shí)簡單的功能還是用傳統(tǒng)c++的widget方便些。好在有qss，傳統(tǒng)界面也可以美化的。QSS稱為Qt Style Sheets也就是Qt樣式表，它是Qt提供的一種用來自定義控件外觀的機(jī)制。QSS大量參考了CSS的內(nèi)容，只不過QSS的功能比CSS要弱很多，體現(xiàn)在選擇器要少，可以使用的QSS屬性也要少很多，并且并不是所有的屬性都可以用在Qt的所有控件上。
目標(biāo)任務(wù)
以下以實(shí)例介紹下自定義樣式的實(shí)現(xiàn)，如下圖所示，實(shí)現(xiàn)下圖的效果。
提供的美工資源有個(gè)關(guān)機(jī)的透明圖標(biāo)：
如何實(shí)現(xiàn)？接下來詳細(xì)介紹下。
詳細(xì)步驟
一、新建qrc文件，添加和保存資源文件
首先新建個(gè)qrc資源文件，使用Qtcreater的話可以直接在菜單中找新建->資源文件(qrc)。當(dāng)然這個(gè)文件也可以手工創(chuàng)建。文件內(nèi)容如下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>在根目錄里創(chuàng)建一個(gè)qss文件夾，里面創(chuàng)建全局樣式表css文件。（建議這么搞，樣式都統(tǒng)一放到樣式表文件里，方便后續(xù)修改。不建議直接在界面上使用QtDesigner去改樣式。）
二、新建css樣式表文件
style.css樣式文件內(nèi)容如下：
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文件內(nèi)容解釋，有點(diǎn)css基礎(chǔ)的應(yīng)該很容易看懂。最前面的一系列是統(tǒng)一設(shè)置控件的樣式。
QLabel#image1{
/*background-image: url(:/image/shutdownlogo.png);*/
}
QLabel#text1{
color: #004695;
font: 75 18pt "微軟雅黑";
}這里的#后面跟的內(nèi)容，就是你界面里指定的控件對象名稱，如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設(shè)置按鈕按下時(shí)的樣式，hover是鼠標(biāo)懸停上面的樣式。
設(shè)置按鈕的背景圖片，關(guān)鍵屬性：
1、background-position ----- 設(shè)置圖標(biāo)的位置
2、text-align-------------設(shè)置文本的位置
3、background-origin-------------相對于內(nèi)容框來定位背景圖像
如何使用
在mainWindow窗口實(shí)例化的地方，全局加載即可。
//設(shè)置指定樣式
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");
}整理了一個(gè)全局的輔助類，方便使用。
#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, "");
}
}
//設(shè)置編碼為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
}
//設(shè)置指定樣式
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);
}
//延時(shí)
static void sleep(int sec) {
QTime dieTime = QTime::currentTime().addMSecs(sec);
while (QTime::currentTime() < dieTime) {
QCoreApplication::processEvents(QEventLoop::AllEvents, 100);
}
}
//延時(shí)
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_HCMakeLists文件
由于習(xí)慣了使用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
)
##設(shè)置輸出目錄
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)
#####設(shè)置資源文件
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)
###############三方靜態(tài)庫#########################################
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})總結(jié)
到此這篇關(guān)于Qt界面美化之自定義qss樣式表的文章就介紹到這了,更多相關(guān)Qt自定義qss樣式表內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了C語言八皇后問題解決方法,簡單描述了八皇后問題并結(jié)合實(shí)例形式分析了C語言基于暴力法與回溯法解決八皇后的具體操作技巧,需要的朋友可以參考下2018-01-01
最近羊了個(gè)羊游戲可謂是異常火爆，身邊幾乎都在玩，他其實(shí)就是一個(gè)簡單的卡通背景消除闖關(guān)游戲，本文將用Matlab復(fù)刻這一游戲，感興趣的可以了解一下2022-09-09
C++實(shí)現(xiàn)類似延時(shí)停頓的打字效果
這篇文章主要介紹的是使用C++實(shí)現(xiàn)類似延時(shí)停頓的打字效果的代碼，非常的簡單，推薦給大家，有需要的小伙伴可以參考下。2015-03-03
C++基于單鏈表實(shí)現(xiàn)學(xué)生成績管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了C++基于單鏈表實(shí)現(xiàn)學(xué)生成績管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
C語言中函數(shù)指針與軟件設(shè)計(jì)經(jīng)驗(yàn)總結(jié)
今天小編就為大家分享一篇關(guān)于C語言中函數(shù)指針與軟件設(shè)計(jì)經(jīng)驗(yàn)總結(jié)，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2018-12-12
這篇文章主要介紹了C語言中的符號常量EOF,文中還介紹了EOF的驗(yàn)證和打印方法,需要的朋友可以參考下2015-11-11
我們要使用bitset，首先需要包含頭文件bitset。和vector對象不一樣的是bitset類型對象的區(qū)別僅在其長度而不在其類型。在定義bitset的時(shí)候，要明確bitset包含了多少位，須在尖括號內(nèi)給出它的長度值。長度值必須定義為整形字面值常量或是已用常量值初始化的整型的const對象2017-02-02
這篇文章主要為大家詳細(xì)介紹了C語言的輸入和輸出，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
QLabel是Qt中的一個(gè)控件類，用于顯示文本或圖像的控件類之一，本文主要介紹了Qt控件之QLabel用法及技巧，具有一定的參考價(jià)值，感興趣的可以了解一下2023-10-10
C++ boost 時(shí)間與日期處理詳細(xì)介紹
這篇文章主要介紹了C++ boost 時(shí)間與日期處理詳細(xì)介紹的相關(guān)資料,這里提供實(shí)例代碼，及實(shí)現(xiàn)效果，需要的朋友可以參考下2016-11-11