Qt5.9 UI设计(七)——统一样式设计

这篇具有很好参考价值的文章主要介绍了Qt5.9 UI设计(七)——统一样式设计。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

前面已经将UI设计部分实现,各页面也做了最简单的设计,本章介绍一下qss样式的使用。样式设计最终的显示效果如下图:
Qt5.9 UI设计(七)——统一样式设计

操作步骤

  1. 将stylesheet.qss 样式文件添加进工程
    stylesheet.qss 内容如下:
/********************** MainWindow Style Sheet  *******************/
QMainWindow
{
background-color:#1A1A1A;
color:white;
border:none;
}
QFrame#frameDot
{
border:none;
}

QFrame#frameBackground
{
background-color: #1A1A1A;
border:none;
}

QFrame#frameBorder,#frameBackground
{
background-color:#1F1F1F;
color:white;
border:none;
}

QLabel
{
color: #FFFFFF;
}

/********************** MainTitleBar Style Sheet  *******************/
QPushButton#pushButtonClose
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/close_normal.png);
}

QPushButton#pushButtonClose:hover
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/close_hover.png);
}

QPushButton#pushButtonMin
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/min_normal.png);
}

QPushButton#pushButtonMin:hover
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/min_hover.png);
}


QPushButton#pushButtonMax
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/max_normal.png);
}

QPushButton#pushButtonMax:hover
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/max_hover.png);
}

QPushButton#pushButtonNormal
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/normal_normal.png);
}

QPushButton#pushButtonNormal:hover
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/normal_hover.png);
}

QPushButton#pushButtonSave:hover,#pushButtonAdd:hover
{
background-color: rgb(180, 85, 100);
color:white;
}

QPushButton#pushButtonSave,#pushButtonAdd
{
background-color:rgb(84, 115, 135);
color:white;
font-size:12px;
width: 150px;
border-radius:2px;
spacing:2px;
padding: 0px 0px;
}

QScrollBar:vertical
{
background:#1A1A1A;
padding-top:20px;
padding-bottom:20px;
padding-left:3px;
padding-right:3px;
border-left:1px solid #1A1A1A;;
}
QScrollBar::handle:vertical
{
background:#3F3F3F;
border-radius:6px;
min-height:80px;
border-radius:4px;
}
QScrollBar::handle:vertical:hover
{
background:#3F3F3F;
border-radius:4px;
}

QScrollBar::add-page
{
background:#1A1A1A;
}
QScrollBar::sub-page
{
background:#1A1A1A;
}
QScrollBar::add-line:vertical
{
background:url(none) center no-repeat;
}
QScrollBar::sub-line:vertical
{
background:url(none) center no-repeat;
}

/********************** ControlFoldWidget Style Sheet  *******************/
QTreeWidget, QTabWidget > QWidget
{
background:transparent;
color:white;
border:none;
background-color: #1A1A1A;

}

QTreeWidget::item:selected
{
background-color: #123456;
color:white;
}

QTreeWidget::item
{
height:50px;
}

QTreeWidget::item:!selected:hover
{
background:transparent;
}

QTreeWidget::branch:selected
{
background-color: #123456;
}

/********************** ControlTabWidget Style Sheet  *******************/
QTabBar::tab
{
min-width:100px;
color: white;
background-color:#1F1F1F;
border: 0px solid;
padding:6px;
}

QTabBar::tab:!selected
{
margin-top: 5px;
}

QTabBar::tab:selected
{
background-color:#2F2F2F;
color: white;
font-size:14px;
font-weight:bold;
border-bottom: 1px solid;
border-bottom-color:darkred;
}

QTabWidget::pane
{
background-color:transparent;
}
*{
outline:0px;
}

/********************** FrameControl Style Sheet  *******************/
QFrame#frameApplication
{
border:1px solid #BBBBBB;
border-radius:5px;
}
QFrame#frameApplication:hover
{
border:1px solid #FFFFFF;
border-radius:5px;
}

QWidget#scrollAreaWidgetContents
{
background-color: #1A1A1A;
border:none;
}


/********************** TableWidget Style Sheet  *******************/
QLabel#labelTableText
{
font-family: Microsoft YaHei;
font-size: 18px;
color: #FFFFFF;
}

QHeaderView
{
background-color:transparent;
}

QHeaderView::section
{
border: none;
background-color: #2B2B2B;
font-family: Microsoft YaHei;
font-size: 12px;
color: #FFFFFF;
text-align: center;
min-height: 36px;
max-height: 36px;
}

QTableWidget
{
border:0px solid;
border-top-width:1px;
border-top-style:solid;
border-top-color:#5C8290;
background-color:transparent;
alternate-background-color: #2A2A2A;
}

QTableWidget::item
{
font-family: Microsoft YaHei;
font-size: 10px;
min-height: 36px;
max-height: 36px;
}

QTableWidget::item:selected
{
out-line:none;
}
/********************** NoveControl Style Sheet  *******************/
QPushButton#pushButtonCloseControl
{
border:none;
background:rgba(255, 255, 255, 0);
image: url(:/image/other/close.png);
}

/********************** SliderWidget Style Sheet  *******************/
QFrame#frameSlider
{
border:none;
background-color:#1A1A1A;
}

QPushButton#pushButtonLeft
{
border-image: url(:/image/left_arrow_normal.png);
}

QPushButton#pushButtonLeft:hover
{
border-image: url(:/image/left_arrow_hover.png);
}

QPushButton#pushButtonLeft:pressed
{
border-image: url(:/image/left_arrow_pressed.png);
}

QPushButton#pushButtonRight
{
border-image: url(:/image/right_arrow_normal.png);
}

QPushButton#pushButtonRight:hover
{
border-image: url(:/image/right_arrow_hover.png);
}

QPushButton#pushButtonRight:pressed
{
border-image: url(:/image/right_arrow_pressed.png);
}

/********************** SystemTray Style Sheet  *******************/
QMenu
{
background-color: white;
border: 1px solid white;
}
QMenu::item
{
background-color: transparent;
padding:8px 32px;
margin:0px 0px;
border-bottom:1px solid #DBDBDB;
}
QMenu::item:selected
{
background-color: #2dabf9;
}

/********************** ProcessControl Style Sheet  *******************/
QFrame#frameProcess
{
background:transparent;
border:1px solid rgb(255, 220, 220);
border-radius: 4px;
}

/********************** ListControl Style Sheet  *******************/
QFrame#frameLine
{
background: rgba(255, 220, 220, 40);
}

QLabel#labelAppName
{
font-family: Microsoft YaHei;
font-size: 16px;
color: #FFFFFF;
}

QLabel#labelAppText
{
font-family: Microsoft YaHei;
font-size: 12px;
color: #AAAAAA;
}


  1. 为应用程序添加LOGO图标
    this->setWindowIcon(QIcon(GlobalSpace::LOGO_PATH));
  1. 加载统一样式
LOADQSS(GlobalSpace::STYLE_QSS_FILE_PATH);

最终设计效果如下图,到这里简单的UI设计部分已经实现,TreeWidget 里每项具体的内容大家可以自己添加去实现自己的内容。
Qt5.9 UI设计(七)——统一样式设计

说明

本系列UI介绍的文章,参考的是GitHub上一个QCoolPage的项目,它地址是:https://github.com/YYC572652645/QCoolPage
作为学习交流使用,将QCoolPage的实现拆解出来,以便入门学者可以比较快速的入手。如有侵权,欢迎联系沟通处理。
本章工程代码:page_sample_05.rar
完整工程下载地址,请到 liwen01 微信公众号中回复: QT 获取文章来源地址https://www.toymoban.com/news/detail-415397.html

---------------------------End---------------------------
长按识别二维码
关注 liwen01 公众号
Qt5.9 UI设计(七)——统一样式设计

到了这里,关于Qt5.9 UI设计(七)——统一样式设计的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 在Qt创建的UI中放一个显示点云的窗口(PCL+QT5)

    1、首先在 Qt Designer 创建UI后,拖一个Widget窗口出来 2、在对象查看器中右击该Widget,选择 提升窗口部件 ,如下操作: 3、把UI转出来放在VS项目中,其中你的UI代码头文件会自带QVTKOpenGLNativeWidget.h,当然你的VS属性环境得配置好VTK的环境,QVTKOpenGLNativeWidget.h在VTKincludevtk-9.1路径

    2024年02月08日
    浏览(48)
  • QT5 creator创建项目移植VS2015时一些问题的解决方案(MSB307错误、.ui无法编译)

    将QT5项目移植VS2015工程的方案中,我目前体验过的最便捷的一条路线是: 1.利用QT5 Creator创建项目(不需要进行界面设计),得到XXX.h /XXX.cpp /XXX.ui (暂时不需要编译自动生成的ui_XXX.h); 2.复制以上文件到VS工程源码目录下,.ui与头文件目录相同,并进行CMAKE编译、项目生成(

    2024年02月15日
    浏览(54)
  • VS2022+QT5.13.2:无法打开 源 文件 “ui_QtGuiApplicationx.h“在解决方案(亲测有效)

    @[TOC] 问题描述 VS2022+QT5.13.2 在工程文件,生成解决方案在时候提示如下错误: 错误(活动) E1696 无法打开 源 文件 “ui_QtWidgetsApplication1.h” QtWidgetsApplication1 E:testQtWidgetsApplication1QtWidgetsApplication1.h 4 错误 C1083 无法打开包括文件: “ui_QtWidgetsApplication1.h”: No such file or directory (编

    2024年02月05日
    浏览(49)
  • [QT编程系列-39]:用户界面UI - 样式表QSS与样式文件快速入门

    目录 1. 概述 2. CSS 3. QSS示例 4. QT样式表文件使用方法与步骤 5. QT内置样式 6. QT常见基本样式 Qt提供了一种称为Qt样式表(Qt Style Sheets)的机制,可以用于 自定义和美化Qt应用程序的用户界面(UI) 。 使用Qt样式表,你可以通过类似 CSS 的语法来定义UI元素的外观和布局,包括颜

    2024年02月04日
    浏览(49)
  • 【问题记录】Visual Studio 下的Qt工程无法打开 “xxx.ui“ 文件和LNK1104 无法打开文件“Qt5Cored.lib”错误

    Windows 11 家庭中文版 Microsoft Visual Studio Community 2022 (64 位) - Current 版本 17.5.3 qt-vsaddin-msvc2022-2.9.1-rev.06 VS下Qt环境准备好后,创建了Qt工程然后点击 Form Files 下的 “ xxx.ui ” 文件,在弹出  Qt 设计师 界面后闪退并显示如下错误 运行报错: LNK1104 无法打开文件“Qt5Cored.lib” 工具栏

    2024年02月05日
    浏览(48)
  • 有什么能直接用的开源QT的ui样式库

    Qt 提供了许多可供直接使用的开源 UI 样式库。其中一些常用的样式库包括: Fusion:Qt 的默认样式库,提供现代化和简洁的界面。 Windows:模拟 Windows 的界面样式。 WindowsVista:模拟 Windows Vista 的界面样式。 WindowsXP:模拟 Windows XP 的界面样式。 Macintosh:模拟 Mac OS X 的界面样式

    2024年02月06日
    浏览(41)
  • QT界面设计:深入理解QSS样式表设计

    本文详细介绍了QT界面设计中的QSS样式技术,包括QSS样式表的语法、用法、selector设置以及属性列表等内容,帮助你提升审美,打造出令人羡慕的软件界面。

    2024年02月13日
    浏览(49)
  • 【QT】 QTabWidget&QTabBar控件样式设计(QSS)

    很高兴在雪易的CSDN遇见你 ,给你糖糖 欢迎大家加入 雪易社区-CSDN社区云   本文分享QT控件QTabWidgetQTabBar的样式设计,介绍两者可以自定义的内容,以及如何定义,希望对各位小伙伴有所帮助! 感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步! 你的点赞就是我

    2024年01月18日
    浏览(55)
  • Unity实现模型显示在UI前面

    1.先创建一个Cube充当人物模型 2.创建一个血条,这边血条用Scrollbar实现,用Scrollbar实现血条的话,需要将里面的参数都清空 血条颜色也通过这边设置   然后再把这个size拉满就可以实现血条效果了,如果要实现掉血效果,直接通过代码调用到这个size进行减少便可以了   3.回归

    2024年02月05日
    浏览(44)
  • 【QT入门】 Qt自定义控件与样式设计之QPushButton实现鼠标悬浮按钮弹出对话框

    往期回顾: 【QT入门】 Qt自定义控件与样式设计之qss选择器-CSDN博客 【QT入门】 Qt自定义控件与样式设计之QLineEdit的qss使用-CSDN博客 【QT入门】Qt自定义控件与样式设计之QPushButton常用qss-CSDN博客 鼠标悬浮弹出对话框的功能:最终要实现纯代码设计出一个音量按钮,当鼠标悬浮

    2024年04月23日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包