QSS QComboBox自定义样式,且自定义滚动条。(设置下拉菜单高度)

86 篇文章 1 订阅

QComboBox样式包括它的主窗体样式,下拉框样式和滚动条样式,其中滚动条使用的自己创建的QScrollbar的方式来实现的,你也可以用默认的,然后使用QCombobox QScrollBar::vertical的方式修改样式.
注意:通过color设置QCombobox的文本颜色,一些环境下不会生效,需要添加padding:0px;

    m_bar = new QScrollBar(this);
    m_bar->setObjectName("myscrollbar");
    QStringList items;
    for (int i = 0; i < 52; i++)
        items<<QString::number(i);
    m_cbox->addItems(items);
    m_cbox->setView(new QListView);
    m_cbox->setMaxVisibleItems(10);
    QString boxqss;
    QFile file(":/qss");
    file.open(QIODevice::ReadOnly);
    boxqss = QString(file.readAll());
    QFile file1(":/qss1");
    file1.open(QIODevice::ReadOnly);
    boxqss.append(QString(file1.readAll()));
    qApp->setStyleSheet(boxqss);

    m_cbox->view()->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn);
    m_cbox->view()->setVerticalScrollBar(m_bar);

//如果qss不生效,就加上这句话。

m_cbox->setView(new QListView());
/*主窗体样式*/
QComboBox{
    background: rgb(0,0,255);
    color:yellow;
    combobox-popup: 0;         /*控制下拉框是否收缩*/
    font:16px;
    border-radius:10px;
    border-style:soild;
    border-width:10px;
    padding:0px; /*设置它的值,是为了使颜色生效。*/
}

QComboBox:pressed{
    background: rgb(255,0,255);
    color:black;
}
/*主窗体点击按钮背景*/
QComboBox::drop-down {
    subcontrol-position: center right;
    width: 15px;
    height:5px;
    padding:5px;
    border-radius:8px;
    background-color:red;
    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
    stop:0 rgba(255,0, 0, 155), stop:0.4 rgba(160,0,0,155),
    stop:0.6 rgba(160,0,0,155), stop:1 rgba(255,0, 0, 155));
}
/*主窗体点击按钮*/
QComboBox::down-arrow {
    width: 10px;
    height:10px;
    border-radius:5px;
    background-color: yellow;

}
QComboBox::down-arrow:hover{
    width: 15px;
    height:15px;
    border-radius:5px;
}
/*下拉框背景*/
QComboBox QAbstractItemView
{
    padding:1px;     /*边缘宽度*/
    background:gray;
}
/*下拉框item*/
QComboBox QAbstractItemView::item
{
    margin:5px;  /*间隔*/
    padding:5px;
    font-size:5px;
    background:green;
    color:red;
}
QComboBox QAbstractItemView::item:selected
{
    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1,
    stop:0 rgba(221,221, 221, 255), stop:0.3 rgba(223,212,106,255),
    stop:0.7 rgba(111,111,82,255), stop:1 rgba(221,221, 221, 255));
    border-radius:2px;
}

/*滑道样式*/
QScrollBar#myscrollbar:vertical
{
    width:10px;
    background:rgba(255,0,0);
    margin:0px,0px,0px,0px;
    padding-top:9px;
    padding-bottom:9px;
}
/*滑块样式*/
QScrollBar#myscrollbar::handle:vertical
{
    width:5px;
    background:rgba(0,0,0);
    border-radius:10px;
    min-height:100;
}
/*滑块悬浮样式*/
QScrollBar#myscrollbar::handle:vertical:hover
{
    width:5px;
    background:rgba(0,0,255);
    border-radius:10px;
    min-height:20;
}
/*滑道上边缘方块*/
QScrollBar#myscrollbar::add-line:vertical
{
    background:rgba(0,0,0);
    height:9px;width:8px;
    subcontrol-position:bottom;
}
/*滑道下边缘方块*/
QScrollBar#myscrollbar::sub-line:vertical
{
    background:rgba(255,255,255);
    height:9px;width:8px;
    subcontrol-position:top;
}
/*滑道上下边缘方块悬浮*/
QScrollBar#myscrollbar::add-line:vertical:hover
{
    background:rgba(255,255,255);
    height:9px;width:8px;
    subcontrol-position:bottom;
}
QScrollBar#myscrollbar::sub-line:vertical:hover
{
    background:rgba(0,0,0);
    height:9px;width:8px;
    subcontrol-position:top;
}
/*滑块上部分滑道*/
QScrollBar#myscrollbar::add-page:vertical
{
    background:rgba(0,255,255);
    border-radius:4px;
}
/*滑块下部分滑道*/
QScrollBar#myscrollbar::sub-page:vertical
{
    background:rgba(255,255,0);
    border-radius:4px;
}

/*滑块上下部分悬浮*/
QScrollBar#myscrollbar::add-page:vertical:hover
{
    background:rgba(255,255,0);
    border-radius:4px;
}
QScrollBar#myscrollbar::sub-page:vertical:hover
{
    background:rgba(0,255,255);
    border-radius:4px;
}

在这补充一点,在qss中通过设置“combobox-popup:0”的值可以达到设置QComboBox下拉框位置的效果。
代码:

QComboBox
{
	combobox-popup:0;
}

分别可以达到的效果:
在这里插入图片描述在这里插入图片描述
如果需要设置下拉菜单的高度,是通过设置Iiem的数量来控制的。在QSS中设置QAbstractItemView是无效的。方法如下:

        m_cbox->setStyleSheet("QComboBox{combobox-popup:0;}");
        m_cbox->setMaxVisibleItems(10);
        m_cbox->view()->setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);

更详细的位置设置,需要使用QStyle来实现,这边不细讲,可以借鉴这篇博客:[Qt中QComboBox下拉列表(popup)位置与样式的控制]

  • 8
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东方忘忧

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值