QComboBox的样式设置(滚动条)

转自 https://blog.csdn.net/zh15237774494/article/details/88855289

样式表(注意,这里的样式表,只是为了实现我的灰色风格,和滚动条没有关系,如果对这个不感兴趣的,可以跳过这个代码片)


/***************  QComboBox  ******************/

QComboBox{

border-left:1pxsolidrgb(195,195,195);

border-right:1pxsolidrgb(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:1pxsolidrgba(195,195,195,0);

selection-background-color:rgb(80,52,158);

}

QComboBoxQAbstractItemView{/*下拉框的显示框效果*/

border:1pxsolidrgb(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:0rgba(255,255,255,155), stop:0.3rgba(160,160,164,155),

stop:0.7rgba(160,160,164,155), stop:1rgba(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 定制 ****************/

QComboBoxQAbstractItemView

{

padding:5px;

background:rgb(51,51,51);

}

QComboBoxQAbstractItemView::item

{

margin:1px0;

padding:5px;

font-size:15px;

background:rgb(60,60,60);

color:#fff;

font-family:"Microsoft YaHei";

}

QComboBoxQAbstractItemView::item:hover

{

background-color:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,

stop:0rgba(127,127,127,255), stop:0.3rgba(106,106,106,255),

stop:0.7rgba(82,82,82,255), stop:1rgba(82,82,82,255));

border-radius:2px;

}

QComboBoxQAbstractItemView::item:selected

{

background-color:qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,

stop:0rgba(127,127,127,255), stop:0.3rgba(106,106,106,255),

stop:0.7rgba(82,82,82,255), stop:1rgba(82,82,82,255));

border-radius:2px;

}

到了这一步之后,应该会得到一个类似这样的下拉框,不要急,一步一步来

image

再加入这样一段代码:


// 设置滚动条的重点在这

ui->com_clock->view()->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);

然后再运行一次(确保选择项大于10,或者修改QCombobox的 maxVisibleItems = x x为整数)

这次应该就有滚动条了,效果是这样的(我设置了maxVisibleItems = 5)

image

OK,滚动条有是有了,但有点难看,继续用QSS美化

加上滚动条美化QSS


/******** combobox 滚动条  *********/

QComboBoxQScrollBar::vertical{/*主体部分*/

width:10px;

background:rgb(89,89,89);

border:none;

border-radius:5px;

}

QComboBoxQScrollBar::handle::vertical{/*滑块主体*/

border-radius:5px;

width:10px;

background:rgb(173,173,173);

}

QComboBoxQScrollBar::handle::vertical::hover{

background:rgb(232,232,232);

}

QComboBoxQScrollBar::add-line::vertical{/*上箭头*/

border:none;

}

QComboBoxQScrollBar::sub-line::vertical{/*下箭头*/

border:none;

}

结果和最初的截图一致了

image

参考博客:https://blog.csdn.net/Zzhouzhou237/article/details/73613278

你可能感兴趣的:(QComboBox的样式设置(滚动条))