好长一段时间没发博客了
最近在做的QT项目中,下拉框(QCombobox)的选项比较多,但发现,点击下拉框之后,会显示出一部分(10条,这个可以调整。大家应该都知道)剩下的鼠标滚轮滚动可以查看,但没有滚动条,容易带来误会。查了一些资料,没找到有哪一篇帖子是完全契合需求的,所以整理一下。
首先是效果图
展开前:
展开后(截图时窗口靠下。所以是向上弹出的,但滚动条是有的)
实现这样的效果并没有用到重写等操作。仅需要CSS和一些设置代码即可。
步骤1:首先,QCombobox要设置列表项的样式,直接对QCombobox写QSS是不行的(个人意见,没有对这个进行深层次的了解),一般都会用到下面这句代码,对QCombobox进行定制,可以看到,这里定制使用的是QListView
//这里的com_clock是我的 QCombobox的控件名
ui->com_clock->setView(new QListView);
步骤2:使用QSS改变样式,实现一些交互效果
加上样式表(注意,这里的样式表,只是为了实现我的灰色风格,和滚动条没有关系,如果对这个不感兴趣的,可以跳过这个代码片)
/*************** QComboBox ******************/
QComboBox{
border-left: 1px solid rgb(195,195,195);
border-right: 1px solid rgb(195,195,195);
background: rgb(50,50,50);
color:white;
selection-background-color:rgb(80,52,158);
combobox-popup: 0;
}
QComboBox:editable{
color:white;
font:20px;
}
QComboBox:enabled{
border: 1px solid rgba(195,195,195,0);
selection-background-color:rgb(80,52,158);
}
QComboBox QAbstractItemView{ /*下拉框的显示框效果*/
border:1px solid rgb(195,195,195);
border:2px;
}
QComboBox::item:hover{
background-color:rgb(195,195,195);
}
QComboBox::drop-down {
subcontrol-origin: padding;
subcontrol-position: center right;
width: 15px;
height:15px;
padding:5px;
border-radius:3px;
border-right-color: rgb(195,195,195);
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(255,255, 255, 155), stop:0.3 rgba(160,160,164,155),
stop:0.7 rgba(160,160,164,155), stop:1 rgba(255,255, 255, 155));
}
QComboBox::down-arrow {
image: url(":/image/spectrum/downArrow.png");
width: 15px;
height:15px;
border-radius:5px;
}
QComboBox::down-arrow:hover{
border-image: url(":/image/spectrum/downArrow.png");
width: 15px;
height:15px;
border-radius:5px;
}
QComboBox::down-arrow:on {
top: 0px;
left: 0px;
}
/************** QComboBox 定制 ****************/
QComboBox QAbstractItemView
{
padding:5px;
background:rgb(51,51,51);
}
QComboBox QAbstractItemView::item
{
margin:1px 0;
padding:5px;
font-size:15px;
background:rgb(60,60,60);
color:#fff;
font-family:"Microsoft YaHei";
}
QComboBox QAbstractItemView::item:hover
{
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(127,127, 127, 255), stop:0.3 rgba(106,106,106,255),
stop:0.7 rgba(82,82,82,255), stop:1 rgba(82,82, 82, 255));
border-radius:2px;
}
QComboBox QAbstractItemView::item:selected
{
background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
stop:0 rgba(127,127, 127, 255), stop:0.3 rgba(106,106,106,255),
stop:0.7 rgba(82,82,82,255), stop:1 rgba(82,82, 82, 255));
border-radius:2px;
}
到了这一步之后,应该会得到一个类似这样的下拉框,不要急,一步一步来
再加入这样一段代码:
//设置滚动条的重点在这
ui->com_clock->view()->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
然后再运行一次(确保选择项大于10,或者修改QCombobox的 maxVisibleItems = x x为整数)
这次应该就有滚动条了,效果是这样的(我设置了maxVisibleItems = 5)
OK,滚动条有是有了,但有点难看,继续用QSS美化
加上滚动条美化QSS
/******** combobox 滚动条 *********/
QComboBox QScrollBar::vertical{ /*主体部分*/
width:10px;
background:rgb(89,89,89);
border:none;
border-radius:5px;
}
QComboBox QScrollBar::handle::vertical{ /*滑块主体*/
border-radius:5px;
width: 10px;
background:rgb(173,173,173);
}
QComboBox QScrollBar::handle::vertical::hover{
background:rgb(232,232,232);
}
QComboBox QScrollBar::add-line::vertical{/*上箭头*/
border:none;
}
QComboBox QScrollBar::sub-line::vertical{/*下箭头*/
border:none;
}
结果和最初的截图一致了
截图没有控制好,可能对比不是很好,见谅
参考博客:https://blog.csdn.net/Zzhouzhou237/article/details/73613278
参考博客:还参考了另一篇博客,是讲的下拉框委托的,突然找不到了,等找到了再修改