QT学习记录5（QCombobox滚动条）

好长一段时间没发博客了

最近在做的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

参考博客：还参考了另一篇博客，是讲的下拉框委托的，突然找不到了，等找到了再修改