积累：QComboBox样式实现带“图标+序号”切换

夏之七

于 2024-02-29 09:10:33 发布

阅读量322

点赞数 2

分类专栏： Qt 文章标签： qt QComboBox c++

本文链接：https://blog.csdn.net/locahuang/article/details/136326446

版权

Qt 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

1. 效果图

在这里插入图片描述

2. 源码实现

2.1 设置 QComboBox 样式

QComboBox{
	border-radius:3px;
	padding:3px 5px 3px 5px;
	border:1px solid #C2CCD8;
	background:none;
	selection-background-color:#667481;
	selection-color:#E7ECF0;
	border-color: #d4d4d4;
}

QComboBox::drop-down{
	subcontrol-origin:padding;
	subcontrol-position:top right;
	width:15px;
	border-left-width:1px;
	border-left-style:solid;
	border-top-right-radius:3px;
	border-bottom-right-radius:3px;
	border-left-color:#C2CCD8;
}

QComboBox::down-arrow{
	image:url(:/image/add_bottom.png);
}

2.2 主要实现源码

	//信号+槽
	connect(ui->pic_cbb, SIGNAL(currentIndexChanged(int)), this,  SLOT(showCurPic(int)));

	//下拉框添加内容
	QStringList listprj;
    for(int i = 0; i < 3; i++)
    {
        listprj.push_back(QString::number(i+1, 10));
    }
    ui->pic_cbb->addItems(listprj);
    ui->pic_cbb->setItemIcon(0, QIcon(":/image/baihe.jpeg"));
    ui->pic_cbb->setItemIcon(1, QIcon(":/image/mudan.jpg"));
    ui->pic_cbb->setItemIcon(2, QIcon(":/image/yujinxiang.jpeg"));

//槽函数
void MainWindow::showCurPic(int iIndex)
{
    if(0 == iIndex)
    {
    	//do something
		//...
		
        ui->picShow->setStyleSheet(
            "QWidget{\
            border:none;\
            border-image: url(:/image/baihe.jpeg);\
            }");
        ui->themeFlower->setText("1号花：百合");
    }
    else if(1 == iIndex)
    {
    	//do something
		//...
		
        ui->picShow->setStyleSheet(
            "QWidget{\
            border:none;\
            border-image: url(:/image/mudan.jpg);\
            }");
        ui->themeFlower->setText("2号花：牡丹");
    }
    else if(2 == iIndex)
    {
    	//do something
		//...
		
        ui->picShow->setStyleSheet(
            "QWidget{\
            border:none;\
            border-image: url(:/image/yujinxiang.jpeg);\
            }");
        ui->themeFlower->setText("3号花：郁金香");
    }
}