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

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

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(new 
### 实现多选功能的QComboBox 在Qt Designer中,默认情况下`QComboBox`仅支持单项选择。然而,通过特定的方法组合可以实现一个多选的功能。具体来说,这涉及到使用`setModel`、`setView`以及`setLineEdit`这三个函数来定制化`QComboBox`的行为[^1]。 对于希望直接在Qt Designer内完成这一修改的需求而言,实际上并不能直接在此环境中调整上述属性以达到目的;因为这些设置通常是在编程阶段由开发者编写的Python或其他兼容Qt语言代码里完成。不过,在Qt Designer里面仍然能做初步准备: - 首先放置一个普通的`QComboBox`到设计画布上; - 接着考虑后续将在转换后的`.py`文件中加入额外逻辑以便启用多选特性。 当从Qt Designer导出的设计稿被转译成Python脚本后,可以在该脚本的基础上添加如下所示的Python代码片段,以此方式增强原有的`QComboBox`使其具备多选能力: ```python from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QComboBox, QListWidget, QLineEdit import sys class MultiSelectComboBox(QComboBox): def __init__(self): super().__init__() self.setEditable(True) line_edit = self.lineEdit() line_edit.setReadOnly(True) list_widget = QListWidget(self) self.setView(list_widget) model = QStringListModel(['Option 1', 'Option 2', 'Option 3'], self) self.setModel(model) if __name__ == '__main__': app = QApplication(sys.argv) widget = QWidget() layout = QVBoxLayout(widget) combo_box = MultiSelectComboBox() layout.addWidget(combo_box) widget.show() sys.exit(app.exec_()) ``` 这段程序展示了如何继承并扩展`QComboBox`类,创建一个新的名为`MultiSelectComboBox`的类,它内部实现了基本的多选机制。注意这里只是简单示范,并未完全覆盖所有可能的应用场景下的细节处理。 为了更贴近实际项目中的应用情况,建议深入研究PyQt5文档及相关资源,了解有关模型/视图架构的知识点,这对于理解和优化此类自定义组件非常有帮助。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值