QT - qss(二)组合框QComboBox的定制
2016-11-03 08:49
246 查看
导读
组合框是一个重要且应用广泛的组件,一般由两个子组件组成:文本下拉单部分和按钮部分。在许多既需要用户选择、又需要用户手动输入的应用场景下,组合框能够很好的满足我们的需求。如我们经常使用的聊天软件QQ登录框,便是一个很好的应用例子:显然,用户既可以自己手动输入新的QQ号码,也可以在列表框中选择历史输入记录。对于提高用户体验是一个不错的手段。这篇博文重点讲述如何用QSS对组合框进行定制。
基本自定义
组合框的使用非常简单,为了加快叙述速度,我们直接在Qt Designer中拖一个QComboBox控件放到主窗口中。此时,我们什么都不用做就有了一个简单的组合框,如下:但很显然,我们得添加一个文字,否则QComboBox不会显示任何内容。这样出现的组合框样式很普通:一个文本加一个带箭头号的按钮就完了。既然主题是用QSS来定制组合框,那么我们第一件事就是新建一个.qss文件并添加到资源文件中进行编译。.qss文件的内容初步编写如下:
文本框部分似乎还不错,但是右边的按钮外观实在是太丑了,和整体风格不搭。我们继续美化一下按钮。按钮是QComboBox的一个子组件,用::drop-down指代。编写如下QSS代码:
嗯,整体风格上看起来协调些了。当然了,在::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派生一个子类,实现水平布局,将所有子组件添加到里面去:
小结
QComboBox分成三个定制部分:文本框(是否可编辑),按钮(箭头标记、边框),下拉框(选项高度、子组件布局)。由以上可见,我们利用QSS可以很好的实现出自己想要的效果,而且效果还不赖。
相关文章推荐
- Qt Style Sheet实践(二):组合框QComboBox的定制
- Qt Style Sheet实践(二):组合框QComboBox的定制
- Qt Style Sheet实践(二):组合框QComboBox的定制(24K纯开源)——非常漂亮
- qt qss文件定制滚动条
- 组合框QComboBox的定制
- 用QSS定制QComboBox的样式,圆角问题
- Qt基础学习-----下拉列表框(组合框)之QComboBox
- QT界面技巧-QComboBox的QSS设置
- Qt基础学习(4)-----下拉列表框(组合框)之QComboBox
- Qt笔记-qss定制QCalendarWidget
- QT之qss教程-QComboBox
- QT4.8.5 QComboBox 增加选择菜单记录
- 详解 QT 皮肤 QSS编程(1)
- Qt/Qss样式表基础
- Qt之QComboBox定制(二)
- QT19 How to link QComboBox with sqlite Database values
- QT之qss教程-QProgressBar
- [转]QT皮肤(QSS)编程
- Qt之QComboBox定制
- 详解 QT 皮肤 QSS编程(1)