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

ops/2024/9/19 13:08:35/ 标签: qt, 开发语言

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.ppmy.cn/ops/112097.html

相关文章

[羊城杯 2020]Blackcat1

[羊城杯 2020]Blackcat1

知识点：数组加密绕过 进入页面熟悉的web三部曲（url地址，web源代码，web目录扫描） url地址没有什么东西去看看源代码. 这有一个mp3文件点一下看看. 在最后面发现了 PHP源码. if(empty($_POST[Black-Cat-Sheriff]) || em…
阅读更多...
SpringMVC的初理解

SpringMVC的初理解

1. SpringMVC是对表述层（Controller）解决方案 主要是 1.简化前端参数接收( 形参列表 ) 2.简化后端数据响应(返回值) 1.数据的接受 1.路径的匹配 使用RequestMapping(可以在类上或在方法上)，支持模糊查询，在内部有method附带…
阅读更多...
【无人机设计与控制】四旋翼无人机俯仰姿态保持模糊PID控制(带说明报告）

【无人机设计与控制】四旋翼无人机俯仰姿态保持模糊PID控制(带说明报告）

摘要 为了克服常规PID控制方法在无人机俯仰姿态控制中的不足，本研究设计了一种基于模糊自适应PID控制的控制律。通过引入模糊控制器，实现了对输入输出论域的优化选择，同时解决了模糊规则数量与控制精度之间的矛盾。仿真结果表明，…
阅读更多...
React Native防止重复点击

React Native防止重复点击

项目中遇到了点击按钮重复提交的问题，防止重复点击首先是想到的是给点击事件一个定时，下次触发的条件是要距离上一次点击的时间大于N秒的之后才能再执行。 // 防重复点击函数 export const preventRepeatPress {lastPressTi1me: 0, // 上次点击时间…
阅读更多...
【Qt】Qt C++ Widget中嵌入qml

【Qt】Qt C++ Widget中嵌入qml

1. 效果 2. 方法 使用QQuickWidget方式 QQuickWidget *view new QQuickWidget;view->setSource(QUrl::fromLocalFile("myqmlfile.qml"));view->show();除了QQuickWidget方式还可以使用QQuickView方式，请自行查阅资料 3. 代码 3.1 工程目录 3.2 …
阅读更多...
重生归来之挖掘stm32底层知识（1）——寄存器

重生归来之挖掘stm32底层知识（1）——寄存器

概念理解 要使用stm32首先要知道什么是引脚和寄存器。 如下图所示，芯片通过这些金属丝与电路板连接，这些金属丝叫做引脚。一般做软件开发是不需要了解芯片是怎么焊的，只要会使用就行。我们平常通过编程来控制这些引脚的输入和输出&#xff0c…
阅读更多...
小程序面试题七

小程序面试题七

一、微信小程序如何实现下拉刷新？ 微信小程序实现下拉刷新的功能，并不是直接内置了一个下拉刷新的组件或API，但你可以通过监听页面的滚动事件来实现这一功能。以下是一个基本的实现步骤： 1. 监听页面的滚动事件 在小程序的页面配…
阅读更多...
物联网之PWM呼吸灯、脉冲、LEDC

物联网之PWM呼吸灯、脉冲、LEDC

MENU 前言原理硬件电路设计软件程序设计analogWrite()函数实现呼吸灯效果LEDC输出PWM信号 前言 学习制作呼吸灯，通过LED灯的亮度变化来验证PWM不同电压的输出。呼吸灯是指灯光在单片机的控制之下完成由亮到暗的逐渐变化，感觉好像是人在呼吸。 原理 脉冲宽…
阅读更多...
代码随想录 第九章 动态规划part07 198.打家劫舍 213.打家劫舍II 337.打家劫舍III

代码随想录 第九章 动态规划part07 198.打家劫舍 213.打家劫舍II 337.打家劫舍III

198.打家劫舍 class Solution { public:int rob(vector<int>& nums) {vector<int> dp(nums.size() 1, 0);nums.insert(nums.begin(), 0);dp[1] nums[1];int pre 1;for (int i 2; i < dp.size(); i){if (pre (i - 1)){if (dp[i - 1] < dp[i - 2] n…
阅读更多...
Java笔记 【1】docker introduction

Java笔记 【1】docker introduction

概述 为什么会有 docker 出现 Docker 理念 容器与虚拟机比较 容器发展简史 传统虚拟机技术 容器虚拟化技术 对比 优点 参考 概述 为什么会有 docker 出现 之前在服务器配置一个应用的运行环境&#xff0c;要安装各种软件&#xff0c;Java/RabbitMQ/MySQL/JDBC 驱动包等。安…
阅读更多...
《C++》解密--顺序表

《C++》解密--顺序表

一、线性表 线性表是n个具有相同特性的数据元素的有限序列。 线性表是一种在实际中广泛使用的数据结构&#xff0c;常见的线性表&#xff1a;顺序表、链表、栈...... 线性表在【逻辑上】是线性结构…
阅读更多...
Git 中的refs

Git 中的refs

在 Git 中&#xff0c;refs 是用来存储 Git 对象&#xff08;如提交、树、标签等&#xff09;的引用。每个 ref 都是一个指针&#xff0c;指向一个特定的 Git 对象。以下是 Git 中几种常见的 refs 及其含义&#xff1a; 1. refs/heads/ 表示&#xff1a;本地分支。 用途&…
阅读更多...
Python Web开发中的扩展与插件开发：从自定义到打包与发布

Python Web开发中的扩展与插件开发：从自定义到打包与发布

Python Web开发中的扩展与插件开发&#xff1a;从自定义到打包与发布 目录 ⚙️ Flask中的自定义扩展开发&#x1f6e0;️ Django中的自定义插件开发&#x1f4e6; 插件的打包与发布详解&#x1f504; 版本控制与依赖管理&#xff08;pipenv、poetry&#xff09; 1. ⚙️ Fla…
阅读更多...
vulnhub（8）：pWnOS（还没信息收集就已经成功打点）

vulnhub（8）：pWnOS（还没信息收集就已经成功打点）

端口 nmap主机发现 nmap -sn 192.168.89.0/24 ​ Nmap scan report for 192.168.89.116 Host is up (0.00020s latency). ​ 116是新出现的机器&#xff0c;他就是靶机 nmap端口扫描 nmap -Pn 192.168.89.116 -p- --min-rate 10000 -oA nmap/scan 扫描开放端口保存到 nmap/sca…
阅读更多...
基于spring的ssm整合

基于spring的ssm整合

目录 基于spring的ssm整合 Spring 框架 SpringMVC 框架 MyBatis 框架 1.创建项目 2.导入依赖 3.导入sql 4.创建jdbc.propries文件 1&#xff09;mysql8以下 2&#xff09;mysql8以上的 5.创建mybatis-config.xml配置文件 6.创建spring-Config.xml文件 7.创建项目所需包和类 1&a…
阅读更多...
宝塔部署python项目

宝塔部署python项目

宝塔部署-python项目文章浏览阅读559次&#xff0c;点赞11次&#xff0c;收藏9次。在添加项目后&#xff0c;选择项目所在的路径&#xff0c;然后命令行启动主py文件。具体先看项目日志&#xff0c;根据日志在环境管理处下载包。首先下载项目需要的python版本。_宝塔部署python…
阅读更多...
【ShuQiHere】探索人工智能核心：机器学习的奥秘

【ShuQiHere】探索人工智能核心：机器学习的奥秘

【ShuQiHere】 &#x1f4a1; 什么是机器学习&#xff1f; 机器学习&#xff08;Machine Learning, ML&#xff09;是人工智能&#xff08;Artificial Intelligence, AI&#xff09;中最关键的组成部分之一。它使得计算机不仅能够处理数据&#xff0c;还能从数据中学习&#x…
阅读更多...
JavaScript网页设计案例

JavaScript网页设计案例

JavaScript网页设计案例 一、引言 1. 背景介绍 JavaScript是一种高级的、解释型的编程语言&#xff0c;广泛应用于Web开发中&#xff0c;用于创建交互性强的网页。它能够操作文档对象模型&#xff08;DOM&#xff09;&#xff0c;处理事件&#xff0c;以及与服务器进行异步通…
阅读更多...
Oracle中VARCHAR和VARCHAR2的区别

Oracle中VARCHAR和VARCHAR2的区别

Oracle中VARCHAR和VARCHAR2的区别 VARCHAR2 默认类型&#xff0c;VARCHAR2是Oracle中最常见的可变长度字符串类型VARCHAR2不区分NULL和空字符串&#xff0c;这意味着NULL和空字符串在VARCHAR2类型中被视为相同的值最大长度为4000字节&#xff08;从Oracle 12c开始&#xff0c…
阅读更多...
Go 中 Gin 框架的使用指南

Go 中 Gin 框架的使用指南

Gin 是 Go 语言中一个非常流行的 Web 框架&#xff0c;因其性能优异、简单易用的 API 设计而受到开发者的喜爱。Gin 的优势在于其高效的路由处理和中间件机制&#xff0c;适用于构建 RESTful API 和其他 Web 应用。本文将介绍如何使用 Gin 框架开发一个简单的 Web 应用&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站