QT有关QCobobox控件的样式设置（圆角、下拉框，向上展开、可编辑、内部布局等）

原创

已于 2022-04-24 11:10:17 修改 · 3.1w 阅读

348 ·

CC 4.0 BY-SA版权

文章标签：

#qt #css #开发语言 #c++ #ui

于 2022-03-18 10:12:51 首次发布

本文详细介绍了如何调整Qt中的QComboBox样式，包括设置基础样式、圆角透明、下拉选项的悬浮和选中效果，以及通过代码动态添加选项。还探讨了如何解决字体居中、下拉框位置调整和编辑模式样式等问题。

前言

QT设计界面时，难免会遇到修改QCombobox样式的问题。相比于其他的QLabel、QPushButton等控件，QCobobox的样式设置明显困难并复杂很多。以下介绍一下目前为止，本人参考网上代码，制作的一款QCobobox下拉框的样式风格。

效果图：
在这里插入图片描述

正文

一、基础样式表

/*QCombobox主体*/
QComboBox {
   
   
    border: 2px solid #f3f3f3;/*设置线宽*/
	background-color: rgb(237, 242, 255);/*背景颜色*/
    border-radius: 15px;/*圆角*/
    padding: 1px 2px 1px 2px;  /*针对于组合框中的文本内容*/
	text-align:bottom;
    min-width: 9em;   /*# 组合框的最小宽度*/
    /*min-height: 5em;*/

	border-style:solid;/*边框为实线型*/
	border-width:2px;/*边框宽度*/
	border-color:rgb(77, 123, 255);/*边框颜色*/

	padding-left: 10px;/*左侧边距*/
}
/*QCombobox右侧按钮*/
QComboBox::drop-down {
   
   
    subcontrol-origin: padding;
    subcontrol-position: top right;/*放于右方顶部*/
    width: 50px;/*设置按钮范围宽度*/
 	/*border-radius: 15px;
    border-left-width: 1px;
    border-left-color: darkgray;
    border-left-style: solid;*/

    border-top-right-radius: 3px;/*设置边框圆角*/
    border-bottom-right-radius: 3px;
/*padding-right: 50px;*/
}
/*QCombobox右侧按钮的箭头图标*/
QComboBox::down-arrow {
   
   
	border-image: url(:/image/down_list.png);/*自定义图片填充*/
	width: 10px;/*设置该图标的宽高*/
	height: 10px;
}


/* 下拉后，整个下拉窗体样式 */
QComboBox QAbstractItemView {
   
   
    border: 2px solid #f3f3f3;/*边框宽度、线形、颜色*/
	background-color: rgba(237, 242, 255, 1);/*背景颜色*/
    border-radius: 15px;/*圆角*/
    padding: 1px 2px 1px 2px;  /*针对于组合框中的文本内容*/
    min-width: 9em;   /*# 组合框的最小宽度*/
}

/* 下拉后，整个下拉窗体每项的样式 */
QComboBox QAbstractItemView::item {
   
   
	border-radius: 15px;/*圆角*/
    height: 30px;   /* 项的高度（设置pComboBox->setView(new QListView());后，该项才起作用） */
	background-color: rgb(237, 242, 255);

}

/*以下部分不知为何不生效，有待调试*/
/* 下拉后，整个下拉窗体越过每项的样式 */
QComboBox QAbstractItemView::item:hover {
   
   
    color: #FFFFF0;
       /* 整个下拉窗体越过每项的背景色 */
	background-color: rgb(98, 0, 255);
}

/* 下拉后，整个下拉窗体被选择的每项的样式 */
QComboBox QAbstractItemView::item:selected {
   
   
    color: #FFFFF0;
	background-color: rgb(0, 85, 200);
}

补充：
1.用border-radius: 15px;设置圆角的时候，该控件的高度至少要保证30px，才能显示出圆角，否则为矩形。
2.要在对应的父窗口类初始化代码中，添加setView(new QListView());，下拉框的展开框样式才会生效。

	//combobox下拉框样式表生效
    ui->comboBox->setView

最低0.47元/天解锁文章