Qt Style Sheet实践(二):组合框QComboBox的定制_weixin_34176694的博客-程序员ITS304

技术标签: ui  

导读

     组合框是一个重要且应用广泛的组件,一般由两个子组件组成:文本下拉单部分和按钮部分。在许多既需要用户选择、又需要用户手动输入的应用场景下,组合框能够很好的满足我们的需求。如我们经常使用的聊天软件QQ登录框,便是一个很好的应用例子:

     显然,用户既可以自己手动输入新的QQ号码,也可以在列表框中选择历史输入记录。对于提高用户体验是一个不错的手段。这篇博文重点讲述如何用QSS对组合框进行定制。

基本自定义

     组合框的使用非常简单,为了加快叙述速度,我们直接在Qt Designer中拖一个QComboBox控件放到主窗口中。此时,我们什么都不用做就有了一个简单的组合框,如下:

     但很显然,我们得添加一个文字,否则QComboBox不会显示任何内容。这样出现的组合框样式很普通:一个文本加一个带箭头号的按钮就完了。既然主题是用QSS来定制组合框,那么我们第一件事就是新建一个.qss文件并添加到资源文件中进行编译。.qss文件的内容初步编写如下:

QComboBox {
    border: 1px solid gray;
    border-radius: 3px;
    padding: 1px 2px 1px 2px;  # 针对于组合框中的文本内容
    min-width: 9em;   # 组合框的最小宽度
}

  我们给组合框3个像素的圆角,边框1个像素宽并将颜色设置为灰色。看看效果:

      文本框部分似乎还不错,但是右边的按钮外观实在是太丑了,和整体风格不搭。我们继续美化一下按钮。按钮是QComboBox的一个子组件,用::drop-down指代。编写如下QSS代码:

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 20px;

    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(:/misc/down_arrow_2);
}

  可以看到,我们分别将按钮右上角和右下角设置了3个像素的圆角,这是因为我们前面给组合框的整体边框设置了圆角。如果不给按钮设置圆角,那么按钮的棱角将会遮挡住整体边框的圆角效果。另外,我们改变了按钮上的箭头图标。::down-arrow也是一个子组件,我们用image属性替换了系统默认的图标。对比一下:

     嗯,整体风格上看起来协调些了。当然了,在::drop-down子组件的定制中,我们将subcontrol-position属性设置成了top, right。这样按钮就位于最右边了。如果希望将按钮置于最左边显然也很简单。只需要将subcontrol-position设置为top, left,然后改变一下QComboBox的padding值就可以达到目的了。我们再拉出下拉框看看:

     有什么问题呢?显然,下拉框中的选项高度太小了,看起来挺别扭的。那么如何对下拉框进行定制呢?我们有个很好的模仿对象:

     360安全卫士的登录框中的下拉框看起来就挺不错,而且还有图标出现在选项的右边。下面我们就进入高级定制部分。看看又该如何进行改进。

高级自定义

     要实现上述效果,我们首先要做的就是将QComboBox设置为可以编辑的(setEditable())。这样,文本框中的内容才可以手动进行输入。另外,我们还注意到,下拉框中的选项右边还有图标出现,QQ的登录框中也出现了图标。我们最直观的想法就是用布局管理器(水平或垂直的)将所有组件组装成一个整体,然后再添加到下拉框中去。

     怎么做呢?幸运的是,QComboBox内部也是Model/View框架来维护下拉框内容的。因此,最直接的方法就是定义一个QListWidget,将这个QListWidget设置为QComboBox的View,而将QListWidget的Model设置为QComboBox的Model。QListWidget只是一个View类,因此我们还得自定义View类中的Item啊。

     那好,自QWidget派生一个子类,实现水平布局,将所有子组件添加到里面去:

ComboboxItem::ComboboxItem(QWidget *parent)
	: QWidget(parent)
{
	m_img = new QLabel(this);
	QPixmap pic(QStringLiteral(":/misc/preference"));
	m_img->setPixmap(pic);
	m_img->setFixedSize(pic.size());
	m_label = new QLabel(this);

	m_layout = new QHBoxLayout(this);
	m_layout->addWidget(m_label);
	m_layout->addStretch();
	m_layout->addWidget(m_img);

	m_layout->setSpacing(5);
	m_layout->setContentsMargins(5, 5, 5, 5);

	setLayout(m_layout);
}

  代码很简单,定义了两个标签QLabel,一个显示文本,一个显示图标。用水平布局管理器添加到QWidget中去。

ThemeRoller::ThemeRoller(QWidget *parent)
	: QMainWindow(parent)
{
	ui.setupUi(this);

	m_listWidget = new QListWidget(this);
        // 设置子项目代理,否则下拉框选项周围会出现虚线框
	m_listWidget->setItemDelegate(new NoFocusFrameDelegate(this));
	ui.comboBox->setEditable(true);
	ui.comboBox->setModel(m_listWidget->model());
	ui.comboBox->setView(m_listWidget);
        // 在下拉框中添加5个选项
	for (int i = 0; i < 5; ++i)
	{
		ComboboxItem* item = new ComboboxItem(this);
		item->setLabelContent(QString("Account") + QString::number(i, 10));
		connect(item, SIGNAL(chooseAccount(const QString&)), this, SLOT(onChooseAccount(const QString&)));
		QListWidgetItem* widgetItem = new QListWidgetItem(m_listWidget);
		m_listWidget->setItemWidget(widgetItem, item);
	}
}

  我们还将ComboboxItem的chooseAccount()信号关联到了onChooseAccount()槽。这样,当用户点击了选项中的某一个选项时,能够在QComboBox的文本框中显示选中的项。那么,QSS该如何编写呢?

QComboBox QAbstractItemView::item {
    height: 25px; 
}

QListView::item {
    background: white;
}

QListView::item:hover {
    background: #BDD7FD;
}

  也很简单,只是设置了选项中的高度,和QComboBox的高度保持一致,这样看起来不至于别扭。然后给选项设置了鼠标悬停背景色。至此,整个定制过程就结束了。看看效果如何:

小结

      QComboBox分成三个定制部分:文本框(是否可编辑),按钮(箭头标记、边框),下拉框(选项高度、子组件布局)。由以上可见,我们利用QSS可以很好的实现出自己想要的效果,而且效果还不赖。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_34176694/article/details/85617997

智能推荐

DCMTK开发笔记(一):我的第一个DCMTK demo_CaLMdoWN_的博客-程序员ITS304_dcmtk

实验平台Visual Studio 2010已编译的 DCMTK 3.6.2 Debug x64版本实验步骤在VS2010中新建Visual C++ Win32 控制台应用程序 空项目,命名为DcmtkDemo在源文件中添加新建项 .cpp文件,命名为main.cpp粘贴如下测试代码#include &lt;stdio.h&gt;#include &lt;tchar.h&gt;...

如何使用pycharm在工程中新建venv环境--(venv 三)_绛洞花主敏明的博客-程序员ITS304_pycharm venv

问题:使用pycharm打开从git上下载的项目后,会发现项目实际上中并不存在项目需要的环境,此时,就需要根据项目中的requirement.txt文件新建环境。实现步骤一、首先使用pycharm打开项目,发现项目中不存在venv环境。二、file --&gt; setting --&gt; project --&gt; project interpreter --&gt; 新建环境...

unity 监听build前、build完成后事件_凡情的博客-程序员ITS304

using System.Collections;using System.Collections.Generic;using System.IO;using UnityEditor;using UnityEditor.Build;using UnityEditor.Callbacks;using UnityEngine;// 实现接口的方式public class BuildReport:IPostprocessBuildWithReport,IPreprocessBuildWithRe

Webapi之文件上传_Song_Lynn的博客-程序员ITS304_webapi 文件上传

Webapi之文件上传范例说明:前端:vue.js + element-ui + axios后端:c# webapi先上传存储起来,然后再读取文件仅尝试过在本地调试,未验证服务器前端部分使用element-ui的上传组件// html 直接调用api&amp;amp;lt;el-upload class=&amp;quot;upload-demo&amp;quot; ref...

java中Scanner类nextLine()和next()的使用方法和注意事项_羽涵w的博客-程序员ITS304_scanner.nextline

Scanner实现字符串的输入有两种方法,一种是next(),一种nextLine()。next():一定要读取到有效字符后才可以结束输入,对输入有效字符之前遇到的空格键、Tab键或Enter键等结束符,next()方法会自动将其去掉,只有在输入有效字符之后,next()方法才将其后输入的空格键、Tab键或Enter键等视为分隔符或结束符。简单地说:next()查找并返回来自此扫描器的下一个完整标记。完整标记的前后是与分隔模式匹配的输入信息,所以next方法不能得到带空格的字符串。nextLine(

React-native 安装基础篇_srxboys的博客-程序员ITS304_安装reactnative基础库

React-native 安装基础篇 RN官方文档 (0.55): - http://facebook.github.io RN 中文翻译 文档 (0.51): - https://reactnative.cn 推荐博客 ES6 语法学习(阮一峰) - http://es6.ruanyifeng.com以下基于MacOS 一...

随便推点

新闻网站项目首页列表分类展示新闻_weixin_34233679的博客-程序员ITS304

1. 获取参数cid(分类id)/page(页数)/per_page(当前页上所展示数据)2.将接受到的参数转为int型3.根据分类id查询数据库4.按照新闻分类进行过滤,按照新闻发布时间倒序排序,分页展示,每页10条数据5使用分页对象获取分页后的数据6.定义容器, 遍历分页后的新闻对象,转成字典7.返回结果(响应的状态码,以及新闻数据)转载于:https://www.c...

20篇参考文献_weixin_30254435的博客-程序员ITS304

1.基于JSP的中小型酒店管理系统的设计与实现2.基于Web的酒店管理系统的设计与实现3.基于Java的酒店管理系统设计4.基于JSP的酒店信息管理系统的设计与实现5.宾馆管理系统设计与实现6.基于Java的小型宾馆管理系统设计与实现7.中小型宾馆客房管理系统的设计与实现8.基于UML的宾馆管理系统的设计与实现9.酒店管理系统的设计与实现10.酒店管理系统的设计与实现11.基于...

Mobile Service(滚动dp)_luckymik的博客-程序员ITS304

问题 B: Mobile Service时间限制:1 Sec内存限制:128 MB提交:21解决:9题目描述一个公司有三个移动服务员。如果某个地方有一个请求,某个员工必须赶到那个地方去(那个地方没有其他员工),某一时刻只有一个员工能移动。被请求后,他才能移动,不允许在同样的位置出现两个员工。从p到q移动一个员工,需要花费c(p,q)。这个函数没有必要对称,但是c(p,...

IP协议介绍_杜某1997的博客-程序员ITS304_ip协议解决什么问题

1、IP协议解决的问题实际的互联网络是错综复杂的,物理设备通过使用IP协议,屏蔽了物理网络之间的差异,网络中的主机使用IP协议连接时,就无需关注网络细节。1、使复杂的实际网络变成一个虚拟互联网络。2、使网络层可以屏蔽掉底层细节,专注于网络层的数据转发。3、解决了在虚拟网络中数据报传输路径的问题。2、IP数据报在物理层中传输的数据是比特流,在数据链路层中将数据封装成帧,在网络层中将帧数据表示成IP数据报。IP数据报分为IP首部和IP数据报的数据。其中IP首部是重点学习内容。4位版本号:指I

全国地区对应身份证号码值关系----身份证号前6位_花言简的博客-程序员ITS304

省份码值 省份 城市码值 城市 县级 县级 11 北京市 1100 北京市 110000 北京市 11 北京市 1101 北京市市辖区 110101 东城区 11 北京市 1101 北京市市辖区 110102 西城区 11 北京市 1101 北京...

C# WinAPI 编程详解(一)_yang_B621的博客-程序员ITS304_c# winapi

C# WIN32 API编程最近要实现一个微信/QQ自动定时发送推送的小工具 ,用到API编程,下面一起开始学习Win32 API编程吧!!!C# 用户经常提出2两个问题:“我为什么要另外编写代码来使用内置于Windows中的功能?在框架中为什么没有相应的内容可以让我们直接完成这一任务呢?”当框架小组构建它们的.NET部分时,他们评估了为使.NET程序猿可以使用Win32...

推荐文章

热门文章

相关标签