洛陽建設網(wǎng)站制作百度服務中心人工24小時電話
原生的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>#endifclass 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, "");}}//設置編碼為UTF8static 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_SOURCESimage.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_LIBSg3log${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 屬性 | 菜鳥教程