开发前端软件素材源码教程下载网站

全部
网站模板
网页特效
网站源码
素材资源
建站学院
软件工具
mysql mysql 微信 微信 小程序 苹果 dedecms 修真图
当前位置：首页 > 建站学院 > 其他教程 >  Qt界面美化之怎么自定义qss样式表

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

其他教程   发布日期：2023年08月08日   浏览次数：545次

本篇内容介绍了“Qt界面美化之怎么自定义qss样式表”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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

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

  1. <RCC>
  2.     <qresource prefix="/">
  3.         <file>qss/gray.css</file>
  4.         <file>image/shutdownicon.png</file>
  5.         <file>image/shutdownlogo.png</file>
  6.         <file>image/shutdownpushbutton.png</file>
  7.         <file>image/shutdownpushbuttonpress.png</file>
  8.         <file>image/spinner.png</file>
  9.         <file>image/tips.png</file>
  10.         <file>image/calendar.png</file>
  11.     </qresource>
  12. </RCC>

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

二、新建css样式表文件

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

  1. QPalette{background:#e5e5e5;}
  2.  
  3. QLabel,
  4. QLineEdit,
  5. QTextEdit,
  6. QPlainTextEdit,
  7. QGroupBox,
  8. QComboBox,
  9. QDateEdit,
  10. QTimeEdit,
  11. QDateTimeEdit,
  12. QTreeView,
  13. QListView,
  14. QTableView,
  15.  
  16. QLineEdit,
  17. QTextEdit,
  18. QPlainTextEdit {
  19.  
  20. }
  21.  
  22. QLabel#image1{
  23.     /*background-image: url(:/image/shutdownlogo.png);*/
  24. }
  25.  
  26. QLabel#text1{
  27.     color: #004695;
  28.     font: 75 18pt "微软雅黑";
  29. }
  30.  
  31. QLineEdit[echoMode="2"] {
  32.     lineedit-password-character: 9679;
  33. }
  34.  
  35. .QGroupBox {
  36.     border: 1px solid #A9A9A9;
  37.     border-radius: 5px;
  38. }
  39.  
  40. .QPushButton {
  41.     border-style: none;
  42.     border: 1px solid #A9A9A9;
  43.     color: #FFFFFF;
  44.     padding: 5px;
  45.     /* min-height: 20px; */
  46.     /* min-width: 30px; */
  47.     border-radius: 40px;
  48.     background: rgb(46,118,199);
  49. }
  50.  
  51. .QPushButton:hover {
  52.     background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 rgb(46,118,199), stop:1 #C1C1C1);
  53. }
  54.  
  55. .QPushButton:pressed {
  56.     background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #004695, stop:1 #004695);
  57. }
  58.  
  59.  
  60. .QPushButton:disabled {
  61.     color: #838383;
  62.     background: #F4F4F4;
  63. }
  64.  
  65. .QPushButton#btnShutDown {
  66.     background-image: url(:/image/shutdownicon.png);
  67.     background-position: left;
  68.     background-repeat: no-repeat;
  69.     background-origin:content;
  70.     padding-left:90px;
  71.     text-align: right;
  72.     padding-right:120px;
  73.     font: 25 20pt "Microsoft YaHei";
  74.  
  75. }
  76.  
  77. .QPushButton#btnShutDown:pressed {
  78.     background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #004695, stop:1 #004695);
  79. }
  80.  
  81. QCheckBox {
  82.     color: #000000;
  83.     spacing: 2px;
  84. }
  85.  
  86. QCheckBox::indicator {
  87.     width: 20px;
  88.     height: 20px;
  89. }
  90.  
  91.  
  92. QRadioButton {
  93.     color: #000000;
  94.     spacing: 2px;
  95. }
  96.  
  97. QComboBox {
  98.     /* border-style: none; */
  99.     /* border: 1px solid #A9A9A9; */
  100.     border-radius: 5px;
  101. }
  102.  
  103. QSpinBox {
  104.     border-radius: 5px;
  105. }

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

  1. QLabel#image1{
  2.     /*background-image: url(:/image/shutdownlogo.png);*/
  3. }
  4.  
  5. QLabel#text1{
  6.     color: #004695;
  7.     font: 75 18pt "微软雅黑";
  8. }

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

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

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

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

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

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

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

如何使用

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

  1.         //设置指定样式
  2.         static void setStyle(const QString &qssFile) {
  3.         QFile file(qssFile);
  4.         if (file.open(QFile::ReadOnly)) {
  5.             QString qss = QLatin1String(file.readAll());
  6.             qApp->setStyleSheet(qss);
  7.             QString PaletteColor = qss.mid(20, 7);
  8.             qApp->setPalette(QPalette(QColor(PaletteColor)));
  9.             file.close();
  10.         }
  11.     }
  1. MainWindow::MainWindow(QWidget *parent) :
  2.         QWidget(parent), ui(new Ui::MainWindow) {
  3.     ui->setupUi(this);
  4.     setFixedSize(1280, 1024);
  5.     //setWindowFlags(Qt::Window | Qt::FramelessWindowHint);
  6.     myHelper::setStyle(":/qss/style.css");
  7. }

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

  1. #ifndef MYHELPER_H
  2. #define MYHELPER_H
  3.  
  4. #include <QtCore>
  5. #include <QtGui>
  6.  
  7. #if (QT_VERSION > QT_VERSION_CHECK(5, 0, 0))
  8.  
  9. #include <QtWidgets>
  10.  
  11. #endif
  12.  
  13. class myHelper : public QObject {
  14.  
  15. public:
  16.     static void autoRunWithSystem(bool ifAutoRun, QString appName, QString appPath) {
  17.         QSettings *reg = new QSettings(
  18.                 "HKEY_LOCAL_MACHINESOFTWAREMicrosoftWindowsCurrentVersionRun", QSettings::NativeFormat);
  19.  
  20.         if (ifAutoRun) {
  21.             reg->setValue(appName, appPath);
  22.         } else {
  23.             reg->setValue(appName, "");
  24.         }
  25.     }
  26.  
  27.     //设置编码为UTF8
  28.     static void setTextCode(const QString sForName = "UTF-8") {
  29. #if (QT_VERSION <= QT_VERSION_CHECK(5, 0, 0))
  30.         QTextCodec *codec = QTextCodec::codecForName(sForName);
  31.         QTextCodec::setCodecForLocale(codec);
  32.         QTextCodec::setCodecForCStrings(codec);
  33.         QTextCodec::setCodecForTr(codec);
  34. #endif
  35.     }
  36.  
  37.  
  38.     //设置指定样式
  39.     static void setStyle(const QString &qssFile) {
  40.         QFile file(qssFile);
  41.         if (file.open(QFile::ReadOnly)) {
  42.             QString qss = QLatin1String(file.readAll());
  43.             qApp->setStyleSheet(qss);
  44.             QString PaletteColor = qss.mid(20, 7);
  45.             qApp->setPalette(QPalette(QColor(PaletteColor)));
  46.             file.close();
  47.         }
  48.     }
  49.  
  50.     //加载中文字符
  51.     static void setChinese() {
  52.         QTranslator *translator = new QTranslator(qApp);
  53.         translator->load(":/image/qt_zh_CN.qm");
  54.         qApp->installTranslator(translator);
  55.     }
  56.  
  57.     //判断是否是IP地址
  58.     static bool isIP(const QString sIP) {
  59.         QRegExp RegExp("((2[0-4]d|25[0-5]|[01]?dd?).){3}(2[0-4]d|25[0-5]|[01]?dd?)");
  60.         return RegExp.exactMatch(sIP);
  61.     }
  62.  
  63.     //延时
  64.     static void sleep(int sec) {
  65.         QTime dieTime = QTime::currentTime().addMSecs(sec);
  66.  
  67.         while (QTime::currentTime() < dieTime) {
  68.             QCoreApplication::processEvents(QEventLoop::AllEvents, 100);
  69.         }
  70.     }
  71.  
  72.     //延时
  73.     static int sleep1(int command, int sec, int *state) {
  74.         int ret = 0;
  75.         QTime dieTime = QTime::currentTime().addMSecs(sec);
  76.  
  77.         while (QTime::currentTime() < dieTime) {
  78.             if (((0xC7 != command && 0xC1 != command) && (*state == 2)) ||
  79.                 ((0xC7 == command || 0xC1 == command) && (*state == 3))) {
  80.                 return 1;
  81.             }
  82.             QCoreApplication::processEvents(QEventLoop::AllEvents, 100);
  83.         }
  84.         ret = 2;
  85.         return ret;
  86.     }
  87.  
  88.     //窗体居中显示
  89.     static void moveFormToCenter(QWidget *frm) {
  90.         int frmX = frm->width();
  91.         int frmY = frm->height();
  92.  
  93.         QDesktopWidget dwt;
  94.  
  95.         int deskWidth = dwt.availableGeometry().width();
  96.         int deskHeight = dwt.availableGeometry().height();
  97.  
  98.         QPoint movePoint(deskWidth / 2 - frmX / 2, deskHeight / 2 - frmY / 2);
  99.         frm->move(movePoint);
  100.     }
  101. };
  102.  
  103. #endif // MYHELPER_H

CMakeLists文件

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

  1. cmake_minimum_required(VERSION 3.21)
  2. project(myapp)
  3.  
  4. set(CMAKE_PREFIX_PATH "D:/Qt/Qtxx/xx.xx/msvc20xx/lib/cmake")
  5.  
  6. add_definitions(
  7.         -D_ENABLE_LOGGING
  8. )
  9.  
  10. ##设置输出目录
  11. set(BUILD_DIRECTORY "")
  12. set(BUILD_DIRECTORY ${CMAKE_CURRENT_SOURCE_DIR}/../build)
  13. ####################  QT dependencies ########################
  14. set(CMAKE_CXX_STANDARD 11)
  15. set(CMAKE_AUTOMOC ON)
  16. set(CMAKE_AUTORCC ON)
  17. set(CMAKE_AUTOUIC ON)
  18.  
  19. set(QT_VERSION 5)
  20. set(REQUIRED_LIBS Core Gui Network Widgets)
  21. set(REQUIRED_LIBS_QUALIFIED Qt5::Core Qt5::Gui Qt5::Network Qt5::Widgets)
  22.  
  23. ####################  set output directory ####################
  24. set(BUILD_DIR ${BUILD_DIRECTORY})
  25. set(LIB_DIR ${BUILD_DIR}/lib/Release)
  26. set(LIB_FIX)
  27. if (CMAKE_BUILD_TYPE MATCHES "Debug")
  28.     set(LIB_DIR ${BUILD_DIR}/lib/Debug)
  29.     set(LIB_FIX _d)
  30. endif ()
  31.  
  32. get_filename_component(ABSOLUTE_PATH ${LIB_DIR} ABSOLUTE)
  33. set(LIB_DIR ${ABSOLUTE_PATH})
  34.  
  35. set(CMAKE_ARCHIVE_OUTPUT_DIRECTORY ${LIB_DIR})
  36. set(CMAKE_LIBRARY_OUTPUT_DIRECTORY ${LIB_DIR})
  37. set(CMAKE_PDB_OUTPUT_DIRECTORY ${LIB_DIR})
  38. set(CMAKE_RUNTIME_OUTPUT_DIRECTORY ${LIB_DIR})
  39.  
  40. set(LIB_DIR_FIX ${LIB_DIR})
  41. option(USE_VS_BUILD "use visual studio build." OFF)
  42. if (USE_VS_BUILD)
  43.     set(LIB_DIR_FIX ${LIB_DIR}/bin/Debug)
  44. endif ()
  45. ####################  set include path ####################
  46. include_directories(
  47.         ${CMAKE_CURRENT_SOURCE_DIR}/source/cpp/logger
  48.         ${CMAKE_CURRENT_SOURCE_DIR}/source/cpp/misc
  49.         ${CMAKE_CURRENT_SOURCE_DIR}/source/cpp
  50.         ${BUILD_DIR}/include
  51. )
  52.  
  53. ####################  scan source files ####################
  54. aux_source_directory(${CMAKE_CURRENT_SOURCE_DIR}/source/cpp/logger SRC_FILES)
  55. aux_source_directory(${CMAKE_CURRENT_SOURCE_DIR}/source/cpp/misc SRC_FILES)
  56. aux_source_directory(${CMAKE_CURRENT_SOURCE_DIR}/source/cpp SRC_FILES)
  57.  
  58. #####设置资源文件
  59. set(RESOURCE_SOURCES
  60.         image.qrc
  61.         )
  62. ####################  version config ####################
  63. if (MSVC)
  64.     set(MY_VERSIONINFO_RC "${CMAKE_CURRENT_BINARY_DIR}/VersionInfo.rc")
  65.     configure_file("${CMAKE_CURRENT_SOURCE_DIR}/resource.rc.in"
  66.             "${MY_VERSIONINFO_RC}")
  67. endif ()
  68.  
  69. set(MY_VERSIONINFO_RC "")
  70.  
  71. add_executable(${PROJECT_NAME} main.cpp mainwindow.cpp mainwindow.h mainwindow.ui ${SRC_FILES} ${RESOURCE_SOURCES} ${MY_VERSIONINFO_RC})
  72.  
  73. ####################  set target properties ####################
  74. set_target_properties(${PROJECT_NAME} PROPERTIES DEBUG_POSTFIX _d)
  75.  
  76. set_property(TARGET ${PROJECT_NAME} PROPERTY WIN32_EXECUTABLE true)
  77.  
  78. ####################  set target dependencies ####################
  79. find_package(Qt${QT_VERSION} COMPONENTS ${REQUIRED_LIBS} REQUIRED)
  80.  
  81.  
  82. ###############vcpkg的三方库######################################
  83. find_package(g3log CONFIG REQUIRED)
  84.  
  85. ###############三方静态库#########################################
  86. set(REDIS_CLIENT_LIB ${LIB_DIR_FIX}/redisclient${LIB_FIX}.lib)
  87.  
  88. set(THIRD_LIBS
  89.         g3log
  90.         ${REDIS_CLIENT_LIB}
  91.         )
  92.  
  93. target_link_libraries(${PROJECT_NAME} PRIVATE ${REQUIRED_LIBS_QUALIFIED} ${THIRD_LIBS})

以上就是Qt界面美化之怎么自定义qss样式表的详细内容，更多关于Qt界面美化之怎么自定义qss样式表的资料请关注九品源码其它相关文章！

相关热词： 界面美化自定义样式
上一篇：讲一讲如何在一个页面中使用多个百度分享按钮，分享不同的文章
下一篇：Servlet注解之@WebInitParam多个InitParam怎么使用

文章分类

IT资讯 CMS教程 服务器 数据库 前端开发 后端开发 工具使用 其他教程

最后更新

热门排行

网站首页 | 关于我们 | 免责声明 | 网站建设 | 在线工具 | 网站地图

版权声明：本站发布的资源部分自互联网，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

Copyright 2018-2025 ©19jp.com All Rights Reserved. 陕ICP备16002142号-1