Qt界面美化之自定義qss樣式表的詳細步驟
原生的QT界面不好看,有時候需要根據(jù)美工的設計圖修改樣式。如果使用QML的話搞界面是快,但是QML有點兒吃內存,有時簡單的功能還是用傳統(tǒng)c++的widget方便些。好在有qss,傳統(tǒng)界面也可以美化的。QSS稱為Qt Style Sheets也就是Qt樣式表,它是Qt提供的一種用來自定義控件外觀的機制。QSS大量參考了CSS的內容,只不過QSS的功能比CSS要弱很多,體現(xiàn)在選擇器要少,可以使用的QSS屬性也要少很多,并且并不是所有的屬性都可以用在Qt的所有控件上。
目標任務
以下以實例介紹下自定義樣式的實現(xiàn),如下圖所示,實現(xiàn)下圖的效果。
提供的美工資源有個關機的透明圖標:
如何實現(xiàn)?接下來詳細介紹下。
詳細步驟
一、新建qrc文件,添加和保存資源文件
首先新建個qrc資源文件,使用Qtcreater的話可以直接在菜單中找新建->資源文件(qrc)。當然這個文件也可以手工創(chuàng)建。文件內容如下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)建一個qss文件夾,里面創(chuàng)建全局樣式表css文件。(建議這么搞,樣式都統(tǒng)一放到樣式表文件里,方便后續(xù)修改。不建議直接在界面上使用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基礎的應該很容易看懂。最前面的一系列是統(tǒng)一設置控件的樣式。
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) ###############三方靜態(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})
總結
到此這篇關于Qt界面美化之自定義qss樣式表的文章就介紹到這了,更多相關Qt自定義qss樣式表內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
sublime text3搭建配置c語言編譯環(huán)境的詳細圖解教程(小白級)
這篇文章主要介紹了sublime text3搭建配置c語言編譯環(huán)境,詳細圖解,小白教程,本文通過圖文并茂的形式給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-01-01