QComboBox自定义设置


样式示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
QComboBox {
    border: 1px solid gray;
    border-radius: 3px;
    padding: 1px 18px 1px 3px;
    min-width: 6em;
}
 
QComboBox:editable   {
    background: white;
}
 
QComboBox:!editable,   QComboBox::drop-down:editable {
     background: qlineargradient(x1: 0, y1:   0, x2: 0, y2: 1,
                                 stop: 0   #E1E1E1, stop: 0.4 #DDDDDD,
                                 stop: 0.5   #D8D8D8, stop: 1.0 #D3D3D3);
}
 
/* QComboBox gets   the "on" state when the popup is open */
QComboBox:!editable:on,   QComboBox::drop-down:editable:on {
    background: qlineargradient(x1: 0, y1: 0,   x2: 0, y2: 1,
                                stop: 0   #D3D3D3, stop: 0.4 #D8D8D8,
                                stop: 0.5   #DDDDDD, stop: 1.0 #E1E1E1);
}
 
QComboBox:on { /*   shift the text when the popup opens */
    padding-top: 3px;
    padding-left: 4px;
}
 
QComboBox::drop-down   {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 15px;
 
    border-left-width: 1px;
    border-left-color: darkgray;
    border-left-style: solid; /* just a   single line */
    border-top-right-radius: 3px; /* same   radius as the QComboBox */
    border-bottom-right-radius: 3px;
}
 
QComboBox::down-arrow   {
    image:   url(/usr/share/icons/crystalsvg/16x16/actions/1downarrow.png);
}
 
QComboBox::down-arrow:on   { /* shift the arrow when popup is open */
    top: 1px;
    left: 1px;
}
 
//点击之后的样式
QComboBox::drop-down:checked{}

//设置下拉列表框样式

方法一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//QComboBox下拉列表不支持直接定义样式，需要在源代码中使用到样式委托对象QStyledItemDelegate
//用于下拉框item的样式美化
QStyledItemDelegate*   itemDelegate = new QStyledItemDelegate();
ui.comboBox1->setItemDelegate(itemDelegate);
//然后再在qss脚本中定义QAbstractItemView相关样式，以下是简易示例：
QComboBox   QAbstractItemView
{
     border: 1px solid rgb(161,161,161);
}
 
QComboBox   QAbstractItemView::item
{
    height: 24px;
}
 
QComboBox   QAbstractItemView::item:selected
{        
    background-color: rgba(54, 98, 180);
}

方法二

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//，当需要更加丰富的显示的时候，例如图片加文字等等，可以选择QListWidget；但是需要添加代理，才可以把数据写到combobox上。【使用listview时候，不需要代理】
   
//事例代码
m_listWidget = new QListWidget(this);
// 设置子项目代理，否则下拉框选项周围会出现虚线框
m_listWidget->setItemDelegate(new NoFocusFrameDelegate(this));
ui.comboBox->setEditable(true);
ui.comboBox->setModel(m_listWidget->model());
ui.comboBox->setView(m_listWidget);
  // 在下拉框中添加5个选项
for (int i = 0; i < 5; ++i)
{
    ComboboxItem* item = new ComboboxItem(this);//自定义的widget 类
    item->setLabelContent(QString("Account") + QString::number(i, 10));
    connect(item, SIGNAL(chooseAccount(const QString&)), this, SLOT(onChooseAccount(const QString&)));//不使用代理时候，可以使用槽函数来实现选择某一项。
    QListWidgetItem* widgetItem = new QListWidgetItem(m_listWidget);
    m_listWidget->setItemWidget(widgetItem, item);
}

方法三：使用listview

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
QComboBox *combox= new QComboBox();
cbb->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
combox->setView(new QListView());
int count = combox->count();
for(int i=0; i<count; ++i)
{
    static_cast< QStandardItemModel* >( combox->view()->model() )->item( i )->setTextAlignment( Qt::AlignCenter );
}
//qss
QComboBox QAbstractItemView{  
    outline: 0px;
    font: 11pt "PingFang SC Medium";
    background-color: rgb(255, 255, 255);
}  
QComboBox QAbstractItemView::item{  
    margin-left:10px;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 52px;
    border-radius: 5px;
    border: 1px outset rgb(212,212,212);
    border: 1px solid rgb(212,212,212);
    background-color: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0.320, stop:0 rgba(234, 234, 234, 255), stop:1 rgba(255, 255, 255, 255));
}  
QComboBox QAbstractItemView::item:selected{
    margin-left: 10px;
    margin-right: 10px;  
    margin-top: 5px;
    margin-bottom: 5px;
    height: 52px;
    border-radius: 5px;
    color: rgb(255, 255, 255);
    border: 1px outset rgb(30,139,195);
    border: 1px solid rgb(96,173,215);
    background-color: rgb(72,186,248);
}

3D效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* QComboBox gets   the "on" state when the popup is open */
 QComboBox:!editable:on,   QComboBox::drop-down:editable:on {
     background: qlineargradient(x1: 0, y1:   0, x2: 0, y2: 1,
                                 stop: 0   #D3D3D3, stop: 0.4 #D8D8D8,
                                 stop: 0.5   #DDDDDD, stop: 1.0 #E1E1E1);
 }
 QComboBox:on { /* shift the text when the   popup opens */
     padding-top: 3px;
     padding-left: 4px;
 }
QComboBox::down-arrow:on   { /* shift the arrow when popup is open */
     top: 1px;
     left: 1px;
 }

点击的时候，不是下拉而是弹窗的实现：使用事件过滤器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
QComboBox *cbb = new QComboBox();
cbb->installEventFilter(this);
 
//需要注册的控件才会触发该事件
bool SampleProOptionDlg::eventFilter(QObject *obj, QEvent *ev)
{
    if(ev->type() == QEvent::MouseButtonPress){
        QComboBox *cbb = qobject_cast<QComboBox*> (obj);
        if(nullptr != cbb){
            slotTestType(cbb);
            return true;//关键
        }
 
    }
    return QDialog::eventFilter(obj, ev);
}

使用技巧

  • 自动补全
  • 使用QLineEdit配合使用
1
2
3
ui->comboBox->setLineEdit(ui->lineEdit);
QCompleter *completer = new QCompleter(users, this);
ui->lineEdit->setCompleter(completer);

//自动补全下拉列表样式可以通过completer->popup()去设置。和QCombobox下拉列表一样
如果需要把值自动填入需要加入槽函数实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    word_list<<"Java"<<"C++"<<"C#"<<"PHP"<<"Perl"<<"Python"<<"Delphi"<<"Ruby";
    search_line_edit = new QLineEdit(this);
    completer = new QCompleter(this);
    string_list_model = new QStringListModel(word_list, this);
    completer->setCaseSensitivity(Qt::CaseInsensitive);
    completer->setModel(string_list_model);
    search_line_edit->setCompleter(completer);
    connect(search_line_edit, SIGNAL(editingFinished()), this, SLOT(editComplete()));
}
 
void Widget::editComplete()
{
    QString text = search_line_edit->text();
    if(QString::compare(text, QString("")) != 0) {
        bool is_contains = word_list.contains(text, Qt::CaseInsensitive);
        if(!is_contains) {
           word_list<<text;
           string_list_model->setStringList(word_list);
           //completer->setModel(new QStringListModel(wordList, this));
        }
    }
}

每次编译完成后按回车键，会将不存在列表中的文本加入到改列表中。Qt::CaseSensitivity取值，Qt::CaseInsensitive：大小写不敏感；Qt::CaseSensitive：大小写敏感。默认为：Qt::CaseSensitive。

  • 补全路径
1
2
3
4
5
6
7
{    
    QDirModel *model = new QDirModel(this);
    search_line_edit = new QLineEdit(this);
    completer = new QCompleter(this);
    completer->setModel(model);
    search_line_edit->setCompleter(completer);
}

组合框QComboBox的定制

https://www.cnblogs.com/csuftzzk/p/qss_combobox.html

http://blog.sina.com.cn/s/blog_a6fb6cc90101en3a.html

http://blog.sina.com.cn/s/blog_a6fb6cc90101ed6n.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/*普通常用*/
QComboBox QAbstractItemView
{
    border: 1px solid #d2d2d2;
    outline: 0px;
    font: 13pt "思源黑体 CN Medium";
    background-color: rgb(255, 255, 255);
    border-top: 1px solid rgb(62, 179, 233);
}  
 
QComboBox QAbstractItemView::item
{  
    margin-left:10px;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    height: 52px;
    border-radius: 5px;
    border: 1px outset rgb(212,212,212);
    border: 1px solid rgb(212,212,212);
    background-color: qlineargradient(spread:pad, x1:0, y1:1, x2:0, y2:0.320, stop:0 rgba(234, 234, 234, 255), stop:1 rgba(255, 255, 255, 255));
}  
 
QComboBox QAbstractItemView::item:selected
{
    margin-left: 10px;
    margin-right: 10px;  
    margin-top: 5px;
    margin-bottom: 5px;
    height: 52px;
    border-radius: 5px;
    color: rgb(255, 255, 255);
    border: 1px outset rgb(30,139,195);
    border: 1px solid rgb(96,173,215);
    background-color: rgb(30,139,195);
}
QComboBox
{
    height:41px;
    color: #444444;
    padding-left:5px;
    font: 13pt "思源黑体 CN Medium";
    border-radius: 2px;
    border: 1px solid rgb(195, 195, 195);
}
QComboBox:checked
{
    border: 1px solid rgb(62, 179, 233);
}
QComboBox::drop-down
{
    width:39px;
    height:41px;
    background-image: url(:/Style/img/QComboBox/comBox_uncheck(39x41).png);
}
QComboBox::drop-down:checked
{
    background-image: url(:/Style/img/QComboBox/comBox_check(39x41).png);
}
QComboBox:disabled
{
    height:41px;
    color: #444444;
    font: 13pt "思源黑体 CN Medium";
    border-radius: 2px;
    background-color: rgb(238, 238, 238);
    border: 1px solid rgb(195, 195, 195);
}
QComboBox::drop-down:disabled
{
    width:39px;
    height:41px;
    background-image: url(:/Style/img/QComboBox/comBox_gray(39x41).png);
}