【Qt系列样式表】探索Qt Widget的艺术化设计与应用(Macos风格)(持续更新中...)

news2024/9/25 9:39:18

2a553c158c0741bca83969c8bb98c764.png

✨✨ Rqtz 个人主页 : 点击✨✨

🌈Qt系列专栏:点击

🎈PyQt系列专栏:点击🎈

🎈Qt智能车上位机专栏: 点击🎈

🎈Qt串口助手专栏:点击🎈

💫宗旨:共享IT之美,共创机器未来

0f89ac1a41264158b89af3dddacd7a34.png

目录

界面效果展示

Qt Desginer布局方式参数设置

伪状态大全(来自Qt助手)

控件子选择器大全(来自Qt助手)

Qt相关控件的样式(持续更新中)

Qpushbutton样式1

Qpushbutton样式2

​编辑

QLineEdit样式1

QLineEdit样式2

QLineEdit补充

QFrame样式

Qcombobox样式

QComboBox补充

  QCheckBox样式

 QProgressBar样式

QScrollBar样式

 QSlider样式


        Qt作为一个强大的GUI开发框架,为开发者提供了丰富的UI控件来设置GUI界面,但是传统的控件样式显得不是很美观,因为它们是最初的形态,没有添加任何的样式,因此给人的视觉感受不是很优雅,但是对于Qt来讲,他们 显然考虑到了这一点。

        为了使得GUI界面显得更加的美观,Qt官方提出了Qt stylesheet,也就是QSS,他利用的CSS2的一些属性和方法,来用于对Qt控件的美化,我们可以借助Qt desginer来设计界面并美化,同时可以借助Qt提供的帮助文档来查看相关QSS样式的用法。

        对于Qt的初学者而言,可能认为Qt widgets做出来的界面非常丑,没有什么观赏性,所以为了作出更加精美的页面,从而转向的更易于实现优美界面的qml上面,其实,如果你能够灵活运用样式表的话,你同样可以做出优美的界面的!

        那么接下来,我将给大家介绍如何使用Qt widgets ,QSS和Qt Desginer 来做出一个Macos风格的一个UI界面。

界面效果展示

Qt Desginer布局方式参数设置

        想要界面做到简洁,美观,首先控件的排版布局一定要规整,所以这里有必要讲以下如何利用Qt desginer右侧工具栏来设置布局相关的参数。

1)首先向一个Qstackedwidget控件中加入4个Qframe,如图所示(没有布局)

2)对Qstackedwidget使用网格布局​                                                      

树状图如上图所示

使用网格布局后发现,四个QFrame分布在四个区域,且均匀分布,但是如果拿这样的界面来使用的话,显然很不美观。

3)下面通过右侧工具栏来调整参数来美化

如图所示,layout一栏中有多个参数

这些属性与CSS中的盒模型是一样的。

  1. layoutleftmargin:布局中左侧的外边距
  2. layoutTopmargin:布局中上侧的外边距
  3. layoutRightmargin:布局中右侧的外边距
  4. layoutBottommargin:布局中下侧的外边距
  5. layouthorizon:布局中控件水平间隔
  6. layoutVericals:布局中控件垂直间隔
  7. layoutRowStretch:布局中纵向控件的长度比值
  8. layoutColumStretch:布局中横向控件的长度比值

1-6全部设为50的结果为

很明显,控件之间的间距被等距离的隔开了。

当我们把layoutRowStretch设为1,2时,发现纵向排列的控件比值发生变化

当我们再把layoutColumStretch设为1,2时,发现横向排列的控件比值发生变化

4)添加圆角和背景

首先就是添加样式表,#fame_45是对象名称(id选择器),剩余部分就是一些CSS属性了。

#frame_45{
background-color: rgb(50, 50, 50);
border-radius:30px;
margin:20px;
color: rgb(88, 255, 106);
font:10 15pt "Vemana2000";
font-weight:bold;
}

伪状态大全(来自Qt助手)

伪状态描述
:active当小部件位于活动窗口中时,设置此状态。
:adjoins-item当QTreeView的分支与一个项目相邻时,设置此状态。
:alternate当QAbstractItemView::alternatingRowColors()设置为true时,在绘制QAbstractItemView的每一行时,为每个交替行设置此状态。
:bottom项目位于底部。例如,将标签定位在底部的QTabBar。
:checked项目被选中。例如,QAbstractButton的选中状态。
:closable项目可以被关闭。例如,开启了QDockWidget::DockWidgetClosable特性的QDockWidget
:closed项目处于关闭状态。例如,QTreeView中未展开的项目
:default项目是默认的。例如,默认的QPushButton或QMenu中的默认操作
:disabled项目被禁用
:editableQComboBox是可编辑的
:edit-focus项目具有编辑焦点(参见QStyle::State_HasEditFocus)。这个状态仅适用于Qt Extended应用程序
:enabled项目是启用的
:exclusive项目是一个独占项目组的一部分。例如,独占QActionGroup中的菜单项
:first项目是列表中的第一个。例如,QTabBar中的第一个标签
:flat项目是平的。例如,扁平的QPushButton
:floatable项目可以浮动。例如,开启了QDockWidget::DockWidgetFloatable特性的QDockWidget
:focus项目具有输入焦点
:has-children项目有子项。例如,QTreeView中带有子项的项目
:has-siblings项目有兄弟项。例如,QTreeView中有兄弟项的项目
:horizontal项目具有水平方向
:hover鼠标悬停在项目上
:indeterminate项目处于不确定状态。例如,部分选中的QCheckBox或QRadioButton
:last项目是列表中的最后一个。例如,QTabBar中的最后一个标签
:left项目位于左侧。例如,将标签定位在左侧的QTabBar
:maximized项目已最大化。例如,已最大化的QMdiSubWindow
:middle项目位于列表中间。例如,不在QTabBar开头或结尾的标签
:minimized项目已最小化。例如,已最小化的QMdiSubWindow
:movable项目可以移动。例如,开启了QDockWidget::DockWidgetMovable特性的QDockWidget
:no-frame项目没有框架。例如,无框的QSpinBox或QLineEdit
:non-exclusive项目是非独占项目组的一部分。例如,非独占QActionGroup中的菜单项
:off对于可切换的项目,这适用于“关闭”状态的项目
:on对于可切换的项目,这适用于处于“开启”状态的小部件
:only-one项目是列表中唯一的一个。例如,QTabBar中的单个标签
:open项目处于打开状态。例如,QTreeView中展开的项目,或者带有打开菜单的QComboBox或QPushButton
:next-selected列表中的下一个项目被选中。例如,与此项目相邻的QTabBar的被选中标签
:pressed项目正在被鼠标按下
:previous-selected列表中的上一个项目被选中。例如,QTabBar中与被选中标签相邻的标签
:read-only项目被标记为只读或不可编辑。例如,只读的QLineEdit或不可编辑的QComboBox
:right项目位于右侧。例如,将标签定位在右侧的QTabBar
:selected项目被选中。例如,QTabBar中被选中的标签或QMenu中被选中的项目。
:top项目位于顶部。例如,将标签定位在顶部的QTabBar。
:unchecked项目未被选中
:vertical项目具有垂直方向
:window小部件是一个窗口(即顶级小部件)

控件子选择器大全(来自Qt助手)

控件子选择器描述
::add-line添加QScrollBar一行的按钮
::add-pageQScrollBar的滑块(slider)和添加行之间的区域
::branchQTreeView的分支指示器
::chunkQProgressBar的进度块
::close-buttonQDockWidget的关闭按钮或QTabBar的标签
::cornerQAbstractScrollArea中两个滚动条之间的角落
::down-arrowQComboBox、QHeaderView(排序指示器)、QScrollBar或QSpinBox的下箭头
::down-buttonQScrollBar或QSpinBox的下按钮
::drop-downQComboBox的下拉按钮。
::float-buttonQDockWidget的浮动按钮。
::grooveQSlider的凹槽。
::indicatorQAbstractItemView、QCheckBox、QRadioButton、可勾选的QMenu项或可勾选的QGroupBox的指示器
::handleQScrollBar、QSplitter或QSlider的滑块(slider)。
::iconQScrollBar、QSplitter或QSlider的滑块(slider)。
::itemQAbstractItemView、QMenuBar、QMenu或QStatusBar的项目。
::left-arrowQScrollBar的左箭头。
::left-cornerQTabWidget的左角。例如,此控件可用于控制QTabWidget中左角小部件的位置。
::menu-arrow带菜单的QToolButton的箭头。
::menu-buttonQToolButton的菜单按钮。
::menu-indicatorQPushButton的菜单指示器。
::right-arrowQMenu或QScrollBar的右箭头。
::paneQTabWidget的窗格(框架)
::right-cornerQTabWidget的右角。例如,此控件可用于控制QTabWidget中右角小部件的位置。
::scrollerQMenu或QTabBar的滚动条。
::sectionQHeaderView的部分。
::separatorQMenu或QMainWindow中的分隔符。
::sub-line减去QScrollBar一行的按钮。
::sub-pageQScrollBar的滑块(slider)和减号线之间的区域。
::tabQTabBar或QToolBox的标签。
::tab-barQTabWidget的标签栏。这个子控件仅存在于控制QTabWidget内的QTabBar位置。使用::tab子控件来设置标签的样式。
::tearQTabBar的撕裂指示器。
::tearoffQMenu的撕下指示器。
::textQAbstractItemView的文本。
::titleQGroupBox或QDockWidget的标题。
::up-arrowQHeaderView(排序指示器)、QScrollBar或QSpinBox的上箭头。
::up-buttonQSpinBox的上按钮。

Qt相关控件的样式(持续更新中)

这种图标的添加使用的QPushbutton和Qicon来用的.

添加图标

切换到右侧工具栏,搜索icon,如上图所示,找到那个倒三角,点击添加资源文件-->点击小齿轮-->新建资源文件-->添加前缀-->添加文件即可。

接下来将图标加入进去,注意按钮上的Qpushbutton这些字符要删掉,这样就只有一个图标了,像这样

​但是这样图标太小了,而且按钮也不好看。

图标大小可以用下面的iconsize来修改。

Qpushbutton样式1

QPushButton{
border:none;
padding:7px;
color: rgb(211, 215, 207);
font: 75 17pt "Yrsa";

}
QPushButton:hover{
	border-right: 3px solid rgb(255, 0, 0);
	background-color: rgb(50, 50, 50);
}

Qpushbutton样式2

QPushButton{
	border:none;
    padding-top:7px;
	color: rgb(0, 0, 0);
	font: 75 16pt "Ubuntu Condensed";
	font-weight:bold;

}

QLineEdit样式1

QLineEdit{
color:white;
padding:10px;
padding-left:20px;
border-radius:15px;
background-color: rgb(38, 35, 30);
}

QLineEdit样式2

QLineEdit{
    border:none;
    font: 75 17pt "Ubuntu Condensed";
    font-weight:bold;
    background-color: rgb(208, 224, 246);
    border-bottom:2px solid black;
    padding-top:5px;
    padding-left:70px;
}

​黑色底边框

QLineEdit补充

#selection-background-color置了当用户选中文本时,选中部分的背景颜色为深灰色。
  QLineEdit {
      selection-background-color: darkgray;
  }
#设置了密码模式下(即输入时显示圆点或星号代替实际字符)的QLineEdit控件中,实际字符被替换为Unicode字符9679(即一个圆点
QLineEdit[echoMode="2"] 
{ 
   lineedit-password-character: 9679;
} 
#设置了只读状态下样式
QLineEdit:read-only {
      background: lightblue;
}

其他Unicode字符可以用作密码替代字符

  1. 星号(*):U+002A
  2. 井号(#):U+0023
  3. 空格:U+0020
  4. 下划线(_):U+005F
  5. 感叹号(!):U+0021
  6. 问号(?):U+003F
  7. 波浪号(~):U+007E
  8. 美元符号($):U+0024
  9. 百分号(%):U+0025
  10. 和号(&):U+0026

QFrame样式

#frame{
border-radius:25px;
padding:6px;
padding-left:20px;
padding-right:20px;
background-color: rgb(208, 224, 246);
}

QFrame(底),Qpushbutton(左),QLineEdit(右)配合使用得到以下效果

Qcombobox样式

QComboBox{
	color: rgb(211, 215, 207);
	padding:3px;
	padding-left:55px;

	font: 75 13pt "Waree";
    font-weight:bold;
	border-radius:10px;
    margin-right:20px;
	background-color: rgb(0, 0, 0);
}
QComboBox:drop-down{
	image: url(:/image/H5-向下移动菜单.png);
width:13px;
height:13px;
margin:15px;
margin-right:20px;

}
QComboBox QAbstractItemView {
	background-color: rgb(32, 74, 135);
}

非展开与展开效果

QComboBox补充


#设置可编辑状态的样式
  QComboBox:editable {
      background: white;
  }
#设置Qcombobox和下拉箭头不可编辑状态的样式
  QComboBox:!editable, QComboBox::drop-down:editable {
       background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                   stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                   stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
  }
#设置当QComboBox处于打开状态时的样式

  QComboBox:on { 
      padding-top: 3px;
      padding-left: 4px;
  }
#设置下拉箭头样式,自定义下拉按钮的背景、边框、位置等属性
  QComboBox::drop-down {
      subcontrol-origin: padding;
      subcontrol-position: top right;
      width: 15px;
      border-left-width: 1px;
      border-left-color: darkgray;
      border-left-style: solid; /* just a single line */
      border-top-right-radius: 3px; /* same radius as the QComboBox */
      border-bottom-right-radius: 3px;
  }
#设置下拉箭头样式,箭头图标的图像、大小、位置等
  QComboBox::down-arrow {
      image: url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);
  }


  QCheckBox样式


#设置指示器大小
  QCheckBox::indicator {
      width: 13px;
      height: 13px;
  }
#设置指示器没有被勾选样式
  QCheckBox::indicator:unchecked {
     #Qss样式
  }
#设置指示器没有被勾选但是鼠标悬浮样式
  QCheckBox::indicator:unchecked:hover {
       #Qss样式
  }
#设置指示器没有被勾选但是鼠标点击样式
  QCheckBox::indicator:unchecked:pressed {
       #Qss样式
  }
#设置指示器有被勾选样式
  QCheckBox::indicator:checked {
       #Qss样式
  }
#设置指示器有被勾选,鼠标悬浮样式
  QCheckBox::indicator:checked:hover {
       #Qss样式
  }
#设置指示器有被勾选,鼠标点击样式
  QCheckBox::indicator:checked:pressed {
       #Qss样式
  }
#设置指示器不确定被勾选,鼠标悬浮样式
  QCheckBox::indicator:indeterminate:hover {
       #Qss样式
  }
#设置指示器大小不确定被勾选,鼠标点击样式
  QCheckBox::indicator:indeterminate:pressed {
      #Qss样式
  }

 QProgressBar样式

#置了进度条中每个块的样式
  QProgressBar::chunk {
      background-color: #05B8CC;
      width: 20px;
  }

QScrollBar样式

#设置水平滚动条的样式  
QScrollBar:horizontal {
      border: 2px solid grey;
      background: #32CC99;
      height: 15px;
      margin: 0px 20px 0 20px;
  }
#设置水平滚动条滑块的样式
  QScrollBar::handle:horizontal {
      background: white;
      min-width: 20px;
  }
#设置水平滚动条增加按钮的样式
  QScrollBar::add-line:horizontal {
      border: 2px solid grey;
      background: #32CC99;
      width: 20px;
      subcontrol-position: right;
      subcontrol-origin: margin;
  }
#设置水平滚动条减少按钮的样式
  QScrollBar::sub-line:horizontal {
      border: 2px solid grey;
      background: #32CC99;
      width: 20px;
      subcontrol-position: left;
      subcontrol-origin: margin;
  }

 QSlider样式


#设置了垂直滑块槽的样式
 QSlider::groove:vertical {
      background: red;
      position: absolute; 
      left: 4px; right: 4px;
  }
#设置了垂直滑块手柄的样式
  QSlider::handle:vertical {
      height: 10px;
      background: green;
      margin: 0 -4px; 
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2126228.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

毕业论文word页眉页脚和页码的问题

多找B站视频查看视频操作方法。 问题1: 不同章节的页眉显示不同内容。 解决办法: “布局”里面插入分节符 (非 分页符。) 问题2: 页眉需要奇偶页内容不同 解决办法,编辑页眉部分,设置 奇偶页…

Qt (15)【Qt窗口 —— 字体对话框 QFontDialog | 输入对话框 QInputDialog】

阅读导航 引言一、字体对话框 QFontDialog1. 简介2. 基本用法3. 示例代码 二、输入对话框 QInputDialog1. 简介2. 基本用法(1)双精度浮点型输入数据对话框(2)整型输入数据对话框(3)选择条目型输入数据框 3.…

李沐对大模型趋势的几点判断

李沐是上海交通大学 2011 届计算机科学与工程系本硕系友。他曾担任亚马逊资深首席科学家,加州大学伯克利分校和斯坦福大学的访问助理教授,是前 Marianas Labs 联合创始人,深度学习框架 Apache MXNet 的创始人之一。目前是 BosonAI 联合创始人…

【数据分析】标准误差与标准差的区别

标准误差(Standard Error, SE)和标准差(Standard Deviation, SD)是两个在统计学中非常重要的概念,但它们的含义和用途有所不同。以下是它们之间的主要区别: 定义: 标准差:衡量单个数…

【mybatis】使用模糊查询时报错:Encountered unexpected token: “?“ “?“

报错信息如下: Mapper.xml报错代码: AND HILIST_NAME like %#{hilistName}% 解决方案: 把模糊查询的 sql 语句改为使用 CONCAT 命令拼接, 就不会报错了。 AND HILIST_NAME like CONCAT(%, #{hilistName},%)

深入探讨-JavaScript-逻辑赋值运算符

null && 100**2 // null undefined && 100**2 // undefined 逻辑赋值运算符 && || ?? 这个运算符将赋值与条件逻辑运算符结合在一起,因此命名为**“逻辑赋值”** 。它们只是一种简写, 例如,x && y是x …

Windows本地部署ollama并实现无公网IP远程运行qwen大语言模型

文章目录 前言1. 运行Ollama2. 安装Open WebUI2.1 在Windows系统安装Docker2.2 使用Docker部署Open WebUI 3. 安装内网穿透工具4. 创建固定公网地址 前言 本文主要介绍如何在Windows系统快速部署Ollama开源大语言模型运行工具,并安装Open WebUI结合cpolar内网穿透软…

打造智能数据分析平台:基于 Flask 的数据处理与模型精度验证系统

数据分析和机器学习已成为企业和科研中不可或缺的核心技术。在这个数据驱动的时代,能够快速处理海量数据,并通过智能算法提取出有用信息,成为了提升竞争力的关键。为了解决这些需求,我基于 Flask 开发了一款功能强大、模块化的数据…

【蓝桥杯单片机-0.基于定时器的时钟程序设计】

蓝桥杯单片机-0.基于定时器的时钟程序设计 题目小注意点按键三行矩形按键按键功能时间更新显示界面的小数点LED灯闪烁其他功能 完整代码 链接: 视频搭配视频,这里只是一些笔记,并不完整 题目 小注意点 按键三行 Key_Val Key_Read();//实时读取键码值…

JDBC知识点总结概括(day29)

1 学习目标 了解JDBC的概念重点掌握JDBC的CRUD重点掌握JDBC的各个对象的使用 2 GIT 查看安装手册 3 JDBC概述 3.1 数据的持久化 持久化(persistence):把数据保存到可掉电式存储设备中以供之后使用。大多数情况下,特别是企业级应用,数据持…

【人工智能学习笔记】5 计算机视觉基础

计算机视觉概述 定义:计算机视觉(Computer Vision)是一门研究如何使机器“看”的科学,也可以看作是研究如何使人工系统从图像活多维数据中“感知”的科学终极目标:计算机视觉成为机器认知世界的基础,终极目…

Linux——高流量 高并发(访问场景) 高可用(架构要求)

高并发通用设计逻辑: 定位单点,拆分问题 架构调整的顺序: 动静分离 // 没有实现动静分离 // 静态请求 交给 nginx或者 httpd 这种对于静态资源处理效率更高的服务,动态请求 交给php-fpm 服务来处理 使用云服务提供商 &#xff…

怎么翻译图片上的文字?6种方法教你快速翻译

现如今,图片已经成为传播信息的重要载体之一,然而,图片上的文字往往成为我们获取信息的障碍。幸运的是,随着技术的发展,多种图片文字翻译工具应运而生,让翻译变得简单快捷。很多小伙伴不清楚哪些翻译工具简…

《JavaEE进阶》----15.<Spring Boot 日志>

本篇文章将记录我学习SpringBoot日志 1.日志文件的用途 2.SpringBoot日志文件的配置 3.用lombook依赖引入Slf4j注解,从而引入log对象。方便我们打印日志。 一、日志的作用 日志主要是为了发现问题、分析问题、定位问题。除此之外、日志还有许多其他的用途。 1.系统监…

玩转西门子 S7-1200/1500 的 Modbus RTU 通信诊断

01 概述工控人加入PLC工业自动化精英社群 Modbus RTU 是一种串行通信协议,由于具有协议透明,实现成本低,简单易用等诸多特点,至今仍然广泛应用在工业控制的各个领域。 为了通信可以长期稳定的运行,并且可以在故障时可…

Vue组件:依赖注入provide和inject的使用

1、Prop 逐级透传问题 通常情况下,当我们需要从父组件向子组件传递数据时,会使用 props。想象一下这样的结构:有一些多层级嵌套的组件,形成了一棵巨大的组件树,而某个深层的子组件需要一个较远的祖先组件中的部分数据…

智慧水务建设的核心内容

智慧水务解决方案的主要对象客户是全国各地水务投资集团、水务局、水司、水厂、农水办,也会有少量项目涉及到住建局或城管局。解决方案通常会以具体的某个业务单位的职能工作为切入点,配合物联感知、大数据分析、人工智能等技术手段,为城市供水、乡村供水的水质安全、供水调…

一文彻底了解DNS协议工作原理,恐怕没有比这更通俗易懂的了吧?

了解DNS工作原理有助于深入理解互联网通信的基础机制,对于网络运维、开发以及优化网站访问速度至关重要。它能帮助解决域名解析问题,提升用户体验,同时对于网络安全和防护也具有重要意义。本文博主反反复复、前前后后斟酌了三天,就…

【学习笔记】手写Tomcat 二

目录 响应静态资源 HTTP协议请求格式 1. 解析请求信息 创建解析请求类 HttpRequest 2. 创建静态资源目录 webs 3. 封装响应信息 创建静态资源处理器 StaticResourceHandler 创建响应类 HttpResponse 作业 1. 绘制 请求解析类 HttpRequest 和响应类 HttpResponse 的封…

动手学深度学习(pytorch土堆)-03常见的Transforms

Compose transforms.Compose 是 PyTorch 中的一个函数,用于将多个图像变换操作组合在一起,形成一个变换流水线。这样可以将一系列的图像处理操作整合为一个步骤,便于对图像进行批量预处理或增强。 基本用法 transforms.Compose 接受一个列表…