QSS之QComboBox

 QComboBox在Qt开发过程中经常使用,默认的下载列表风格达不到设计师的要求,本篇介绍基本的QComboBox的qss设置。

属性意思
QComboBoxQComboBox基本样式
QComboBox:editable右边可选择按钮
QComboBox:!editable, QComboBox::drop-down:editable不可编辑或下拉时,comboxBox显示的背景状态
QComboBox:!editable:on, QComboBox::drop-down:editable:on下拉项展开时,comboxBox显示的背景状态
QComboBox:on下拉项展开时,comboxBox选中文字样式
QComboBox::drop-down下拉按钮样式 子控件填充方式
QComboBox::drop-down:hover下面按钮悬浮样式  鼠标悬浮样式
QComboBox::down-arrow下拉箭头样式
QComboBox::down-arrow:on下拉列表展开时下拉箭头样式

QString comboxStyle2  = QString(//1.界面上comboxBox样式 红色边框,圆角为3, 文字右边距边框13px, 最小宽度60px"QComboBox{border: 1px solid red;border-radius:3px;padding: 1px 18px 1px 13px;min-width: 60px;}"//2.右边可选择按钮 黄色"QComboBox:editable {background: yellow;}"//3.不可编辑或下拉时,comboxBox显示的背景状态"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);}"//4.下拉项展开时,comboxBox显示的背景状态"QComboBox:!editable:on, QComboBox::drop-down:editable:on {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #D3D3D3, stop: 0.4 #666666, stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);}"//5.下拉项展开时,comboxBox选中文字样式 文字离顶部8px, 左边4px"QComboBox:on{padding-top:8px; padding-left:4px;}"//6.下拉按钮样式 子控件填充方式,位位顶部靠右边,宽度15px, 左边框一个竖线,颜色darkgray, 风格solid实现,右上角和右下角度与comboxBox一样都是3px// 这条设置了,上面第2点就可以不用设置了。"QComboBox::drop-down {subcontrol-origin: padding;subcontrol-position: top right;width: 15px; border-left-width: 1px; border-left-color: darkgray; border-left-style: solid;  border-top-right-radius: 3px;  border-bottom-right-radius: 3px;}"//7.下面按钮悬浮样式  鼠标悬浮在右边的下拉按钮是变成红色"QComboBox::drop-down:hover{background: #ff0000;}"//8.下拉箭头样式"QComboBox::down-arrow {image:url(:/image/com_drop_down.png);}"//9.下拉列表展开时下拉箭头样式, 下拉时箭头距顶部5px, 左边5px"QComboBox::down-arrow:on{top:5px;left:5px;}");ui->comboBox_2->setStyleSheet(comboxStyle2);

这里下位列表没有样式,因此还需要为下载列表设置样式

属性意思
QComboBox QAbstractItemView列表项基本样式
QListView:item每个项的样式
QListView:item:hover鼠标悬浮项的样式
QListView:item:disabled禁用项的样式
QComboBox QAbstractScrollArea QScrollBar:vertical列表项滚动条样式
QComboBox QAbstractScrollArea QScrollBar::handle:vertical列表项滚动条滑块样式
QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover列表项滚动条滑块悬浮样式

下面是完整的代码:

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();void initView();void initData();private:Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QListView>
#include <QScrollBar>MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);initView();initData();
}MainWindow::~MainWindow()
{delete ui;
}void MainWindow::initView()
{QString comboxStyle  = QString("QComboBox{background:#FFFF00;border:1px solid #E4E2E2;padding: 1px 18px 1px 20px;border-radius:8px;color:#2F89FC;}"//未下拉时,QComboBox的样式"QComboBox:on{background:#00FF00;color:#2F00FC;}" // 点击QComboBox后的已选中项的样式"QComboBox QAbstractItemView {border:1px solid yellow;color:green;background-color:#FFFFFF;selection-color:blue;selection-background-color:red;}"//下拉展开后,整个下拉窗体样式"QComboBox QAbstractScrollArea QScrollBar:vertical{width: 10px;background-color: #f1ee04;}""QComboBox QAbstractScrollArea QScrollBar::handle:vertical{border-radius:5px;background:rgb(255, 68, 20);}""QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover{background:rgb(0, 255, 20);}""QComboBox::drop-down {background:#FFFFFF;border-radius:8px;outline:none;}""QComboBox::drop-down:hover{background: #ff0000;}"                       //上内边距、右内边距、下内边距、左内边距"QComboBox::down-arrow {width:22px;height:22px;background:transparent;padding:0px 20px 0px 0px;image:url(:/image/com_drop_down.png);}""QComboBox::down-arrow:on{image: url(:/image/com_drop_arrow.png);}");//padding //上内边距、右内边距、下内边距、左内边距ui->comboBox->setStyleSheet(comboxStyle);QString comboxStyle2  = QString(//1.界面上comboxBox样式 红色边框,圆角为3, 文字右边距边框13px, 最小宽度60px"QComboBox{border: 1px solid red;border-radius:3px;padding: 1px 18px 1px 13px;min-width: 60px;}"//2.右边可选择按钮 黄色"QComboBox:editable {background: yellow;}"//3.不可编辑或下拉时,comboxBox显示的背景状态"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);}"//4.下拉项展开时,comboxBox显示的背景状态"QComboBox:!editable:on, QComboBox::drop-down:editable:on {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #D3D3D3, stop: 0.4 #666666, stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);}"//5.下拉项展开时,comboxBox选中文字样式 文字离顶部8px, 左边4px"QComboBox:on{padding-top:8px; padding-left:4px;}"//6.下拉按钮样式 子控件填充方式,位位顶部靠右边,宽度15px, 左边框一个竖线,颜色darkgray, 风格solid实现,右上角和右下角度与comboxBox一样都是3px// 这条设置了,上面第2点就可以不用设置了。"QComboBox::drop-down {subcontrol-origin: padding;subcontrol-position: top right;width: 15px; border-left-width: 1px; border-left-color: darkgray; border-left-style: solid;  border-top-right-radius: 3px;  border-bottom-right-radius: 3px;}"//7.下面按钮悬浮样式  鼠标悬浮在右边的下拉按钮是变成红色"QComboBox::drop-down:hover{background: #ff0000;}"//8.下拉箭头样式"QComboBox::down-arrow {image:url(:/image/com_drop_down.png);}"//9.下拉列表展开时下拉箭头样式, 下拉时箭头距顶部5px, 左边5px"QComboBox::down-arrow:on{top:5px;left:5px;}");ui->comboBox_2->setStyleSheet(comboxStyle2);QString itemStyle2 = QString("QComboBox QAbstractItemView {""border-radius:8px;padding-left:10px;padding-right:1px;""margin-top:10px;"                          //下拉框与ComboxBox之间的距离"outline: 1px solid #ffffff;"               //选中项外边框"border: 1px solid #f1f1f1;"                 //整个下拉窗体的边框"color:#333333;""background-color:white;""selection-color:red;""selection-background-color:#2F89FC;}");QString itemStyle1 = QString("QComboBox QAbstractItemView {""border-radius:3px;padding-left:20px;padding-right:10px;""margin-top:10px;"                          //下拉框与ComboxBox之间的距离"outline: 1px solid #000000;"               //选中项外边框"border: 1px solid yellow;"                 //整个下拉窗体的边框"color: red;"                               //文字颜色"background-color:#999999;"                 //整个下拉窗体的背景色"selection-color:blue;"                     //下拉框选中项字体颜色"selection-background-color:#333333;}"      //下拉框选中项的背景色);//下拉展开后,整个下拉窗体样式QString itemStyle = QString(//padding-left:10px;padding-right:1px;"QComboBox QAbstractItemView {""border-radius:8px;padding-left:10px;"//"margin-left:10px;"                          //下拉框与ComboxBox之间的距离"outline: 1px solid #ffffff;"                  //选中项外边框//"border: 1px solid #f1f1f1;"                 //整个下拉窗体的边框"background-color:white;}");QString comboxStyle3  = QString(//1.界面上comboxBox样式 红色边框,圆角为3, 文字右边距边框13px, 最小宽度60px"QComboBox{border: 1px solid red;border-radius:8px;padding: 1px 18px 1px 13px;min-width: 60px;}"//2.不可编辑或下拉时,comboxBox显示的背景状态"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);}"//3.下拉项展开时,comboxBox显示的背景状态"QComboBox:!editable:on, QComboBox::drop-down:editable:on {background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #D3D3D3, stop: 0.4 #666666, stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);}"//4.下拉项展开时,comboxBox选中文字样式 文字离顶部8px, 左边4px"QComboBox:on{padding-top:8px; padding-left:4px;}"//5. 下接按钮背景透明,圆角与comboBox一样,无线框, 类似于隐藏按钮"QComboBox::drop-down {background:transparent;border-radius:3px;outline:none;}"//6.下拉箭头样式 箭头宽22px,高22px,背景透明,距右边20px,箭头图url"QComboBox::down-arrow {width:22px;height:22px;background:transparent;padding:0px 20px 0px 0px;image:url(:/image/com_drop_down.png);}"//7.下拉列表展开时下拉箭头样式"QComboBox::down-arrow:on{image: url(:/image/com_drop_arrow.png);}"//8.下载拉列的样式);ui->comboBox_3->setStyleSheet(comboxStyle3 + itemStyle);//下接列表的滚动条样式QString scrollStyle = QString(//"QComboBox QAbstractItemView::item{height:28px;margin-left:10px;padding-left:10px;}" //item项目的高度设置"QComboBox QAbstractScrollArea QScrollBar:vertical{width: 10px;background-color: #f1ee04;}""QComboBox QAbstractScrollArea QScrollBar::handle:vertical{border-radius:5px;background:rgb(255, 68, 20);}""QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover{background:rgb(0, 255, 20);}");QListView *ListView = new QListView;ui->comboBox_4->setView(ListView);//必须设置//ui->comboBox_4->setEditable(true);ui->comboBox_4->setMaxVisibleItems(5);//设置下拉框当前页显示item个数。//下拉框设置圆角样式后,边角会存在阴影问题,这是Popup问题导致的,解决办法可以通过解决Popup来解决,也可以通过设置QComboBox本身属性。ui->comboBox_4->view()->window()->setWindowFlags(Qt::Popup | Qt::FramelessWindowHint | Qt::NoDropShadowWindowHint);ui->comboBox_4->view()->window()->setAttribute(Qt::WA_TranslucentBackground);//选中项的文字颜色及背景只能在QListView::item里设置,否则无效  padding-left:10px; 有白色边框QString listStyle = QString("QListView:item{height:30px;background-color:white;color:#333333;border-radius:8px;border:none;}""QListView:item:hover{height:30px;background-color:#2F89FC;color:white;border-radius:8px;border:0px solid #f1f1f1;;}""QListView:item:disabled{background-color:rgba(104,121,151,90%);color:#a0a0a0;border:0px solid #aaaaaa;}");QString comboxStyle4 = comboxStyle3 + itemStyle + scrollStyle + listStyle;ui->comboBox_4->setStyleSheet(comboxStyle4);//ListView->setStyleSheet(listStyle);ListView->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
}void MainWindow::initData()
{QIcon   icon;//icon.addFile(":/image/icon24.png");ui->comboBox->addItem(icon, "bilibili---1");ui->comboBox->addItem(icon, "bilibili---2");ui->comboBox->addItem(icon, "bilibili---3");ui->comboBox->addItem(icon, "bilibili---4");ui->comboBox->addItem(icon, "bilibili---5");ui->comboBox->addItem(icon, "bilibili---6");ui->comboBox->addItem(icon, "bilibili---7");ui->comboBox->addItem(icon, "bilibili---8");ui->comboBox->addItem(icon, "bilibili---9");ui->comboBox->addItem(icon, "bilibili---11");ui->comboBox->addItem(icon, "bilibili---12");ui->comboBox->addItem(icon, "bilibili---13");ui->comboBox->addItem(icon, "bilibili---14");ui->comboBox->addItem(icon, "bilibili---15");ui->comboBox->addItem(icon, "bilibili---16");ui->comboBox->addItem(icon, "bilibili---17");ui->comboBox->addItem(icon, "bilibili---18");ui->comboBox->addItem(icon, "bilibili---19");QStringList szList{QStringLiteral("龙华"), QStringLiteral("龙岗"), QStringLiteral("福田"), QStringLiteral("宝安"), QStringLiteral("罗湖"), QStringLiteral("坪山"), QStringLiteral("大鹏"), QStringLiteral("光明")};QStringList cityList{QStringLiteral("昆明"), QStringLiteral("大理"), QStringLiteral("保山"), QStringLiteral("丽江"), QStringLiteral("玉溪"), QStringLiteral("曲靖"), QStringLiteral("昭通"), QStringLiteral("普洱")};QStringList proviceList{QStringLiteral("云南"), QStringLiteral("四川"), QStringLiteral("西藏"), QStringLiteral("新疆"), QStringLiteral("青海"), QStringLiteral("宁夏"), QStringLiteral("陕西"), QStringLiteral("山西"),QStringLiteral("湖南"), QStringLiteral("湖北"), QStringLiteral("广东"), QStringLiteral("广西"), QStringLiteral("福建"), QStringLiteral("浙江"), QStringLiteral("江西"), QStringLiteral("上海")};ui->comboBox_2->addItems(szList);ui->comboBox_3->addItems(cityList);ui->comboBox_4->addItems(proviceList);
}

参考:

https://doc.qt.io/qt-5/stylesheet-examples.html
https://doc.qt.io/qt-5/stylesheet-reference.html
https://blog.csdn.net/no_say_you_know/article/details/125335417
https://blog.csdn.net/qq_36651243/article/details/100765496

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

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

相关文章

从“概念”到“应用”,字节跳动基于 DataLeap 的 DataOps 实践

更多技术交流、求职机会&#xff0c;欢迎关注字节跳动数据平台微信公众号&#xff0c;回复【1】进入官方交流群 近日&#xff0c;火山引擎数智平台 VeDI Meetup「超话数据」在深圳举办&#xff0c;来自火山引擎的产品专家分享了字节跳动基于 DataLeap 的 DataOps 实践&#xff…

Audacity 使用教程:轻松录制、编辑音频

Audacity 使用教程&#xff1a;轻松录制、编辑音频 1. 简介 Audacity 是一款免费、开源且功能强大的音频录制和编辑软件。它适用于 Windows、Mac 和 Linux 等多种操作系统&#xff0c;适合音乐制作、广播后期制作以及普通用户进行音频处理。本教程将带领大家熟悉 Audacity 的…

管道-匿名管道

一、管道介绍 管道&#xff08;Pipe&#xff09;是一种在UNIX和类UNIX系统中用于进程间通信的机制。它允许一个进程的输出直接成为另一个进程的输入&#xff0c;从而实现数据的流动。管道是一种轻量级的通信方式&#xff0c;用于协调不同进程的工作。 1. 创建和使用管道&#…

机器人中的数值优化|【七】线性搜索牛顿共轭梯度法、可信域牛顿共轭梯度法

机器人中的数值优化|【七】线性搜索牛顿共轭梯度法、可信域牛顿共轭梯度法 Line Search Newton-CG, Trust Region Newton-CG 往期回顾 机器人中的数值优化|【一】数值优化基础 机器人中的数值优化|【二】最速下降法&#xff0c;可行牛顿法的python实现&#xff0c;以Rosenbro…

解决Invalid bound statement (not found)错误~

报错如下所示&#xff1a; 找了好久&#xff0c;刚开始以为是名称哪里写的有问题&#xff0c;但仔细检查了好多遍都不是 最后发现了问题如下所示&#xff1a; UserMapper里面的内容被我修改了&#xff0c;但classes中的内容还是原来的内容&#xff0c;所以才导致了编译器报错n…

【计算机网络】HTTP协议详解(举例解释,超级详细)

文章目录 一、HTTP协议简单介绍 1、1 什么是HTTP协议 1、2 再次理解“协议” 二、HTTP请求 2、1 HTTP的工作过程 2、1、1 demo代码 2、2 URL 介绍 2、2、1 urlencode 和 urldecode 2、3 HTTP 请求格式 三、HTTP响应 3、1 响应demo 3、2 HTTP 响应格式 四、HTTP 请求和响应中的…

【改进哈里鹰算法(NCHHO)】使用混沌和非线性控制参数来提高哈里鹰算法的优化性能,解决车联网相关的路由问题(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

ENVI报错:SaveRasterFile failed:IDLnaMetadata Error

ENVI报错&#xff1a;SaveRasterFile failed:IDLnaMetadata Error 问题描述 ENVI在另存为为TIFF文件时&#xff0c;报了下面这个错误信息 原因 输出路径或者是存放影像的路径里面包含中文&#xff0c;不能包含中文 解决方案 把所有相关路径中的中文改成英文

嵌入式学习笔记(42)SD卡的编程接口

8.3.1 SD卡的物理接口 SD卡由9个针脚与外界进行物理连接&#xff0c;这9个脚中有2个地&#xff0c;1个电源&#xff0c;6个信号线。 8.3.2 SD协议与SPI协议 (1)SD卡与SRAM/DDR/SROM之类的东西的不同&#xff1a;SRAM/DDR/SROM之类的存储芯片是总线式的&#xff0c;只要连接上…

深入学习git

1、git原理及整体架构图 一些常用的命令 git add . 或 git add src/com/ygl/hello/hello.java 指定文件 git commit . 或 git commit src/com/ygl/hello/hello.java 指定文件 git push origin 分支名称 2、git stash的应用场景 场景一&#xff1a;你正在当前分支A开发&…

司空见惯 - 奈尔宝的NTTP

联合国对21世纪人才定义的标准&#xff0c;包括六种核心技能&#xff0c;即批判性思维&#xff08;critical thinking)、人际交往&#xff08;communication)、与人合作&#xff08;collaboration)、创造性&#xff08;creativity)、信息素养&#xff08;information literacy)…

controller-manager学习三部曲之一:通过脚本文件寻找程序入口

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 关于《controller-manager学习三部曲》 《controller-manager学习三部曲》是欣宸原创的kubernetes深入学习系列之一&#xff0c;在前面的《client-go实战》系…

弧度、圆弧上的点、圆的半径(r)、弧长(s)之间的关系

要计算弧度和圆弧上的点&#xff0c;需要知道以下几个要素&#xff1a; 圆的半径&#xff08;r&#xff09;&#xff1a;即圆的中心到圆周上任意一点的距离。 弧长&#xff08;s&#xff09;&#xff1a;从圆周上的一个点到另一个点所经过的弧长。 弧度&#xff08;θ&#x…

ADO连接Access的前期绑定方法实例(下)

【分享成果&#xff0c;随喜正能量】眾生多悲苦&#xff0c;發願‬菩提心。願今天所有聽見我、看見我、憶念我的眾生&#xff0c;因我心而‬生喜悅&#xff01;除消身心的痛苦&#xff01;種下脫解‬的種子&#xff01;願我等‬身心念力所及之處一切眾切‬生因佛得度&#xff0…

CSS基础语法第二天

目录 一、复合选择器 1.1 后代选择器 1.2 子代选择器 1.3 并集选择器 1.4 交集选择器 1.4.1超链接伪类 二、CSS特性 2.1 继承性 2.2 层叠性 2.3 优先级 基础选择器 复合选择器-叠加 三、Emmet 写法 3.1HTML标签 3.2CSS 四、背景属性 4.1 背景图 4.2 平铺方式 …

CF505B Mr. Kitayuta‘s Colorful Graph

Mr. Kitayuta’s Colorful Graph 题面翻译 给出一个 n n n 个点&#xff0c; m m m 条边的无向图&#xff0c;每条边上是有颜色的。有 q q q 组询问 对于第 i i i 组询问&#xff0c;给出点对 u i , v i u_i,v_i ui​,vi​。求有多少种颜色 c c c 满足&#xff1a;有至…

【DRAM存储器九】SDRAM介绍-read、write、Precharge、DQM、Power down、Clock Suspend命令

&#x1f449;个人主页&#xff1a;highman110 &#x1f449;作者简介&#xff1a;一名硬件工程师&#xff0c;持续学习&#xff0c;不断记录&#xff0c;保持思考&#xff0c;输出干货内容 参考资料&#xff1a;《镁光SDRAM数据手册》、《PC SDRAM specification》 目录…

JUC第十三讲:JUC锁: ReentrantLock详解

JUC第十三讲&#xff1a;JUC锁: ReentrantLock详解 本文是JUC第十三讲&#xff0c;JUC锁&#xff1a;ReentrantLock详解。可重入锁 ReentrantLock 的底层是通过 AbstractQueuedSynchronizer 实现&#xff0c;所以先要学习上一章节 AbstractQueuedSynchronizer 详解。 文章目录 …

HTML的学习 Day02(列表、表格、表单)

文章目录 一、列表列表主要分为以下三种类型&#xff1a;1. 无序列表&#xff08;Unordered List&#xff09;&#xff1a;2. 有序列表&#xff08;Ordered List&#xff09;&#xff1a;将有序列表的数字改为字母或自定义内容li.../li 列表项标签中value属性&#xff0c;制定列…

MySQL 索引优化实践(单表)

目录 一、前言二、表数据准备三、常见业务无索引查询耗时测试3.1、通过订单ID / 订单编号 查询指定订单3.2、查询订单列表 四、订单常见业务索引优化实践4.1、通过唯一索引和普通索引优化通过订单编号查询订单信息4.2、通过普通联合索引优化订单列表查询4.2.1、分析查询字段的查…