AI 助理
备案控制台
开发者社区 人工智能 文章 正文

qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例） 一

2022-05-30 775
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）

若该文为原创文章，转载请注明原文出处

本文章博客地址：https://blog.csdn.net/qq21497936/article/details/79424146

长期持续带来更多项目与技术分享，咨询请加QQ:21497936、微信：yangsir198808

红胖子(红模仿)的博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等）持续更新中...（点击传送门）

Qt开发专栏：qss样式表笔记大全（点击传送门）

上一篇：《qss样式表笔记大全(二)：可设置样式的窗口部件列表（上）（持续更新示例）》
下一篇：《qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）》

 

前话

       Qt的qss样式详解与Demo

 

可设置样式的窗口部件列表

QLabel

窗口部件

样式表使用方式

QLabel

图片.png

支持盒模式。

不支持:hover状态。

从4.3后，设置一个QLable的样式表，会自动设置QFrame:frameStyle属性为值QFrame:StyledPanel。

注意：text-align对齐方式只对QPushButton有效

 

示例：QToolTip定制

QFrame, QLabel, QToolTip{
    border: 2px solid green; /* border: 宽度 线类型 颜色 */
    border-radius: 4px;
    padding: 2px; /* 边界都内部矩形的宽度 */
background-image: url(E:/1.jpg);
}

图片.png

 

QLineEdit

窗口部件

样式表使用方式

QLineEdit

图片.png

支持盒模式。

被选中的内容部分的前景色和背景需要通过属性selection-color和selection-background-color控制。

密码字符可以通过属性lineedit-password-character属性控制。

密码掩码可以通过属性lineeedit-password-mask-delay属性控制。

示例：QLineEdit定制（选中，密码输入，只读）

QLineEdit {
    border: 2px solid gray;
    border-radius: 10px;
    padding: 0 8px;
    background: yellow;
    selection-background-color: darkgray;
}

图片.png

/* 输入模式echoMode */
/* echoMode为 0(Normal) | 1(NoEcho) | 2(Password) | 3 (PasswordEchoOnEdit) */
QLineEdit[echoMode="2"] {
    lineedit-password-character: 42; /* ascii:* */
}

图片.png

运行起来可能变成了圆形，如下图：

图片.png

经过仔细研究，得出结论：在笔者win10记本上，echoMode枚举Password值为2，但在运行的时候，运行值却是0，代码和图如下：

QLineEdit[echoMode="0"] {
    lineedit-password-character: 42; /* ascii:* */
}

图片.png

/* 只读状态 */
QLineEdit:read-only {
    background: lightblue;
}

图片.png

示例：QLineEdit定制（没有焦点且有内容的时候，不显示边框；有焦点或者无焦点但是有内容的时候显示边框）

  

#include "LineEdit2.h"
#include <QDebug>
LineEdit2::LineEdit2(QWidget *parent)
    : QLineEdit(parent)
{
    setPlaceholderText("请输入信息");
    // 样式为：边框蓝色、圆角、文字间隔、背景透明
    _focusInQss = QString("QLineEdit {"
                          "    border:2px groove rgb(156, 185, 219);"
                          "    border-radius:10px;"
                          "    padding:2px 4px;"
                          "    background-color: rgba(0, 0, 0, 0);"
                          "};");
    // 样式为：边框透明、文字间隔、背景透明
    _focusOutQss = QString("QLineEdit {"
                           "    border: 2px groove rgb(255, 255, 255, 0);"
                           "    border-radius:10px;"
                           "    padding:2px 4px;"
                           "    background-color: rgba(0, 0, 0, 0);"
                           "};");
    setStyleSheet(_focusInQss);
    setAlignment(Qt::AlignCenter);
}
void LineEdit2::focusInEvent(QFocusEvent *event)
{
    setStyleSheet(_focusInQss);
    QLineEdit::focusInEvent(event);
}
void LineEdit2::focusOutEvent(QFocusEvent *event)
{
    if(text().isEmpty())
    {
        setStyleSheet(_focusInQss);
    }else{
        setStyleSheet(_focusOutQss);
    }
    QLineEdit::focusOutEvent(event);
}

QListView

窗口部件

样式表使用方式

QListView

图片.png

 

支持盒模式。

当alternating row colors属性设置为允许时，交替颜色可通过属性alternate-background-color控制。

被选中的内容部分的前景色和背景需要通过属性selection-color和selection-background-color控制。

选择的行为可以在这里通过属性show-decoration-selected属性控制。

通过子控件-项，可以更精确的控制items，通过::item控制。

背景可滚动，可参照QAbstractScrollArea窗口部件。

示例：QListView定制（注：QListView列表项需要代码加入）

/* altermate-background生效条件： ui->listView->setAlternatingRowColors(true); */
/* 此处alternate-background-color: yellow会被QListView::item:alternate覆盖*/
QListView {
    alternate-background-color: yellow; 
}
QListView {
show-decoration-selected: 1; /* make the selection span the entire width of the view */
}
/* 此处QListView::item:alternate覆盖会alternate-background-color: yellow属性*/
QListView::item:alternate {
    background: #EEEEEE; /* item交替变换颜色，如图中灰色 */
}
QListView::item:selected {
border: 1px solid #6a6ea9;
}
QListView::item:selected:!active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                             stop: 0 #ABAFE5, 
                             stop: 1 #8588B2);
}
QListView::item:selected:active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                             stop: 0 #6a6ea9, 
                             stop: 1 #888dd9);
}
QListView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                             stop: 0 #FAFBFE, 
                             stop: 1 #DCDEF1);
}

图片.png

 

QListWidget（参照QListView）

窗口部件

样式表使用方式

QListWidget

参照QListView

 

QMainWindow

窗口部件

样式表使用方式

QMainWindow

图片.png

支持样式分隔。

当使用QDockWidget样式使用::separator子控件。

示例：QMainWindow与QDockWidget定制分隔条（非QSplitter）

QMainWindow::separator {
    background: yellow;
    width: 10px; /* when vertical */
    height: 10px; /* when horizontal */
}
QMainWindow::separator:hover {
    background: red;
}

图片.png

 

QMenu

窗口部件

样式表使用方式

QMenu

图片.png

 

支持盒模式。

每一项都可以使用::item子控件控制，且一般都支持以下状态：:selected，:default，:exclusive，:non-exclusive。

可选择菜单项的指示器可使用::indicator子控件控制。

分隔符可使用::separator控制。

如果菜单项有子项，箭头标记可使用子控件：::right-arrow和::left-arrow控制。

滚动条可以通过::scroller控制。

一触就显示的菜单(tear-off)可以通过::tearoff控制。

示例：QMenu定制

QMenu {
    background-color: #ABABAB; /* sets background of the menu */
    border: 1px solid black;
}
QMenu::item {
    /* sets background of menu item. set this to something non-transparent
       if you want menu color and menu item color to be different */
    background-color: transparent;
}
QMenu::item:selected { 
    /* when user selects item using mouse or keyboard */
    background-color: #654321;
}

图片.png

QMenu {
    background-color: white;
    margin: 2px; /* some spacing around the menu */
}
QMenu::item {
    padding: 2px 25px 2px 20px;
    border: 1px solid transparent; /* reserve space for selection border */
}
QMenu::item:selected {
    border-color: darkblue;
    background: rgba(100, 100, 100, 150);
}
QMenu::icon:checked { /* appearance of a 'checked' icon */
    background: gray;
    border: 1px inset gray;
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    left: 1px;
}
QMenu::separator {
    height: 2px;
    background: lightblue;
    margin-left: 10px;
    margin-right: 5px;
}
QMenu::indicator {
    width: 13px;
    height: 13px;
}
/* non-exclusive indicator = check box style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:non-exclusive:unchecked {
    background-color: rgb(255,0,0,100);
}
QMenu::indicator:non-exclusive:unchecked:selected {
    background-color: rgb(255,0,0,180);
}
QMenu::indicator:non-exclusive:checked {
    background-color: rgb(255,0,0,255);
}
QMenu::indicator:non-exclusive:checked:selected {
    background-color: rgb(0,0,0, 100);
}
/* exclusive indicator = radio button style indicator (see QActionGroup::setExclusive) */
QMenu::indicator:exclusive:unchecked {
    background-color: rgb(0,255,0, 100);
}
QMenu::indicator:exclusive:unchecked:selected {
    background-color: rgb(0,255,0,180);
}
QMenu::indicator:exclusive:checked {
    background-color: rgb(0,255,0, 255);
}
QMenu::indicator:exclusive:checked:selected {
    background-color: rgb(0,0,0, 100);
}

图片.png

 

QMenuBar

窗口部件

样式表使用方式

QMenuBar

图片.png

支持盒模式。

通过spacing属性控制菜单项之间的距离。

菜单项进一步定制可通过::item。

警告：当在Qt/Mac，菜单栏通常被嵌入到系统工具条，这将导致设置的样式失败。

示例：QMenuBar定制

QMenuBar {
    background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,
                                 stop:0 lightgray, 
                                 stop:1 darkgray);
}
QMenuBar::item {
    spacing: 3px; /* spacing between menu bar items */
    padding: 1px 4px;
    background: transparent;
    border-radius: 4px;
}
QMenuBar::item:selected { /* when selected using mouse or keyboard */
    background: #a8a8a8;
}
QMenuBar::item:pressed {
    background: #888888;
}

图片.png

 

QMessageBox（此处仅文本交互）

窗口部件

样式表使用方式

QMessageBox

属性messagebox-text-interaction-flags用于更改消息框中与文本的交互。（5为可选）

 


文章标签：
计算机视觉
数据安全/隐私保护
长沙红胖子Qt
目录
相关文章
长沙红胖子Qt
|
自然语言处理 数据可视化
Qt开发技术：Qt富文本（二）Qt文本光标操作、文档布局、富文本编辑、处理和Demo
Qt开发技术：Qt富文本（二）Qt文本光标操作、文档布局、富文本编辑、处理和Demo
长沙红胖子Qt
958 0
Qt开发技术：Qt富文本（二）Qt文本光标操作、文档布局、富文本编辑、处理和Demo
星河造梦坊丨程序开发
|
5月前
|
图形学
小功能⭐️Unity自动更改文本框高度，以显示全部文本
小功能⭐️Unity自动更改文本框高度，以显示全部文本
星河造梦坊丨程序开发
106 0
星河造梦坊丨程序开发
|
5月前
|
前端开发 图形学
小功能⭐️3DCanvas交互方法、Unity自动调整文本框大小、改变文字大小和颜色
小功能⭐️3DCanvas交互方法、Unity自动调整文本框大小、改变文字大小和颜色
星河造梦坊丨程序开发
56 0
你挚爱的强哥
|
8月前
|
移动开发
【实用】一组原创原生样式的基础控件、UI组件样式（偏向移动端H5页面的样式）
【实用】一组原创原生样式的基础控件、UI组件样式（偏向移动端H5页面的样式）
你挚爱的强哥
98 0
【实用】一组原创原生样式的基础控件、UI组件样式（偏向移动端H5页面的样式）
G佳伟
|
7月前
ueditor1.5 百度富文本 编辑器增加字间距功能及按钮
ueditor1.5 百度富文本 编辑器增加字间距功能及按钮
G佳伟
102 0
xiaohua616
|
8月前
|
前端开发 小程序
uniapp 将标题背景更换背景图片 完美解决（附加源码+实现效果图）
uniapp 将标题背景更换背景图片 完美解决（附加源码+实现效果图）
xiaohua616
954 0
王同学睡醒了
|
8月前
|
图形学
【计算机图形学】—修改MFC窗口中的标题（默认无标题）
【计算机图形学】—修改MFC窗口中的标题（默认无标题）
王同学睡醒了
107 0
还算善良
|
JavaScript
Vue组件中表格文字内容太长，自动变省略号，鼠标悬浮上去显示全称。
Vue组件中表格文字内容太长，自动变省略号，鼠标悬浮上去显示全称。
还算善良
791 0
长沙红胖子Qt
|
计算机视觉
qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）一
qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）
长沙红胖子Qt
568 0
qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）一
长沙红胖子Qt
qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）二
qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）
长沙红胖子Qt
1526 0
qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）二

热门文章

最新文章

  • 1
    【实战】锐捷AC+AP配置WLAN基本服务系列
  • 2
    丰富、连接、待集成—MaxCompute 生态再出发
  • 3
    Tomcat 7.0 64位免安装解压版 安装及配置
  • 4
    securecrt克隆会话与sshd 的 MaxSessions
  • 5
    安卓支持RISC-V架构的技术剖析
  • 6
    生成文件的另一种思路——共享文件同步
  • 7
    高阶自定义View --- 粒子变幻、隧道散列、组合文字
  • 8
    奇虎团队不到1分钟攻破谷歌Pixel 斩获12万美元奖金
  • 9
    npm使用指南
  • 10
    Visual Studio 2010快捷键大全
  • 1
    Smolagents：三行代码就能开发 AI 智能体，Hugging Face 开源轻量级 Agent 构建库
    118
  • 2
    Cognita：小白也能搭建 RAG 系统，提供交互界面的开源模块化 RAG 框架，支持多种文档检索技术
    27
  • 3
    SocraticLM：通过 AI 提问引导学生主动思考，中科大与科大讯飞联合推出苏格拉底式教育大模型
    26
  • 4
    SoulChat2.0：低成本构建 AI 心理咨询师，华南理工开源心理咨询师数字孪生大语言模型
    25
  • 5
    TryOffAnyone：快速将模特服装图还原为平铺商品图，生成标准化的服装展示效果
    28
  • 6
    VITRON：开源像素级视觉大模型，同时满足图像与视频理解、生成、分割和编辑等视觉任务
    26
  • 7
    Memory Layers：如何在不增加算力成本的情况下扩大模型的参数容量？Meta 开源解决方法
    24
  • 8
    ImBD：复旦联合华南理工推出 AI 内容检测模型，快速辨别文本内容是否为 AI 生成
    21
  • 9
    《量子硬件制造：降低退相干率与错误率的策略》
    22
  • 10
    《量子计算硬件：关键指标对人工智能应用性能的影响》
    89

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 图表样式智能美化工具
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月