Qt中如何设置QComboBox的下拉列表的样式

先告诉大家如何查看Qt中都支持那些样式，打开Qt助手工具，打开的途径有很多种，我比较喜欢使用Qt助手原生的程序。

在打开的界面中切换到“索引”页签中，在索引框中输入“stylesheet”关键字，在搜索结果列表中选择第一个，就会看到右侧界面中会展示当前检索的内容信息，如下图：

在上面我们可以关注两个内容，“Qt Style Sheets Reference” 和“Qt Style Sheets Examples”,

在这两个内容中你可以看到Qt中提供了那些样式接口和Qt给提供的例子内容，大家可以根据自己的需要进行参照。

好了，我们开始今天的主题内容，我们要知道QComboBox除了表面看到的一个类型于按钮的显示区域外，还有一个隐藏的显示区域下拉列表，而下拉列表的内容是一个QAbstractItemView相关的内容，所以我们要调整下位列表的内容，出发点就可以从QAbstractItemView来修改，而对于ItemView相关的调整，我们有两种方式调整，一种是直接调整styleSheet的内容，另一种就是使用Delegate。

使用Delegate来调整的话，对于ComboBox来说有点太才小用了，这里提供一种简单的调用方式。

直接使用上面的“Qt Style Sheets Examples”链接跳转到Demo内容列表中，我们选择“Customizing QComboBox”，会直接跳转到Qt提供的基础样式内容，这些基础信息只能修改ComboBox的表面内容，对于下拉列表的内容我们需要划动一下鼠标，向下看一段内容，你会发现如下的样式内容：

 QComboBox QAbstractItemView {
      border: 2px solid darkgray;
      selection-background-color: lightgray;
  }

把上面的内容放到Designer放到一个控件中运行效果如下：

我们会发现，这些相关内容中只可以调整我们选择的颜色，对于选中项的虚线，行高，都不能调整吗？

答案是肯定可以的，首先来调整虚线的问题，我们只需要在上面的样式表中加入：

outline:0px;

行高怎么设置呢？再网上找相关资料时，你一定找到过下面的语句：

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

但设置后其实时没有起作用的，我们只需要给当前的ComboBox设置一个代理就可以上高度起作用了，代码内容如下：

QComboBox *pComboBox = new QComboBox;

QStyledItemDelegate *delegate = new QStyledItemDelegate();
pComboBox ->setItemDelegate(delegate);

设置完成后，上面的代码确实正常了，但是你会发现你原来生效的选中颜色已经被重置成Qt默认的样式了，其实效果还是能接受的，不过为了更加自我一些，你只需要加上下面的样式内容：

QComboBox QAbstractItemView::item:selected{background-color: #ccefe0;}

这样你会发现你基本已经接近你想要的情况了。

PS：附送样式，在无意间调整出来的，样式内容如下：

 QComboBox QAbstractItemView {
      border: 2px solid darkgray;
      selection-background-color: lightgray;

      padding-top:4px;padding-bottom:4px;
  }

padding,内容的加入会让你的选项内容进行相应的缩进处理，效果就不贴图了，大家自己去体验一下具体的效果吧。

秒客网

Qt中如何设置QComboBox的下拉列表的样式

相关文章