QComboBox使用详解（Qt)_qt combox

QComboBox 是 Qt 提供的一个下拉列表框控件，常用于让用户从多个选项中选择一个。它既可以展示文本选项，也可以展示图像和自定义的内容。以下是 QComboBox 的使用详解，包括基本用法、信号与槽的连接、自定义项、编辑功能等。

一、QComboBox基本用法

1.1 创建 QComboBox

#include <QComboBox>
#include <QWidget>
#include <QVBoxLayout>

class MainWindow : public QWidget {
public:
    MainWindow() {
        QVBoxLayout *layout = new QVBoxLayout(this);
        
        QComboBox *comboBox = new QComboBox(this);
        comboBox->addItem("Option 1");
        comboBox->addItem("Option 2");
        comboBox->addItem("Option 3");
        
        layout->addWidget(comboBox);
    }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1.2 QComboBox设置默认选项

comboBox->setCurrentIndex(1); // 设置默认选择第二个选项
1

二、QComboBox信号与槽

QComboBox 发出多个信号，常用的有 currentIndexChanged 和 activated。

2.1 连接信号与槽

connect(comboBox, SIGNAL(currentIndexChanged(int)), this, SLOT(onIndexChanged(int)));
1

2.2 槽函数定义

private slots:
    void onIndexChanged(int index) {
        qDebug() << "Current index:" << index;
    }
1
2
3
4

三、QComboBox添加和删除项

3.1 QComboBox添加项

comboBox->addItem("New Option");
comboBox->addItem(QIcon("icon.png"), "Icon Option"); // 带图标的选项
1
2

3.2 QComboBox插入项

comboBox->insertItem(1, "Inserted Option");
comboBox->insertItem(1, QIcon("icon.png"), "Inserted Icon Option");
1
2

3.3 QComboBox删除项

comboBox->removeItem(1); // 删除第二个选项
1

四、获取当前选项

4. 1 获取当前索引和文本

int currentIndex = comboBox->currentIndex();
QString currentText = comboBox->currentText();
1
2

五、可编辑的 QComboBox

5.1 设置可编辑

comboBox->setEditable(true);
1

5.2 设置验证器

可以为可编辑的 QComboBox 设置输入验证器，例如 QIntValidator。

comboBox->setValidator(new QIntValidator(0, 100, this));
1

六、自定义 QComboBox 项

在Qt中，自定义 QComboBox 项是一个常见的需求，特别是当你需要在下拉列表中显示复杂的内容或自定义格式的项目。你可以通过以下几种方式来自定义 QComboBox 项：

1. 使用自定义的 QStandardItem。
2. 使用自定义的 QStyledItemDelegate。
3. 直接在 QComboBox 中添加自定义的 QWidget 项目。

6.1 方法一：使用自定义的 QStandardItem

使用 QStandardItem 来管理复杂的数据，并在 QComboBox 中显示。

• 示例代码

#include <QApplication>
#include <QComboBox>
#include <QStandardItemModel>
#include <QStandardItem>
#include <QVBoxLayout>
#include <QWidget>
#include <QLabel>

class CustomComboBoxItem {
public:
    CustomComboBoxItem(const QString &text, const QString &description)
        : text(text), description(description) {}

    QString getText() const { return text; }
    QString getDescription() const { return description; }

private:
    QString text;
    QString description;
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QWidget window;
    QVBoxLayout layout(&window);

    QComboBox comboBox;

    QStandardItemModel *model = new QStandardItemModel(&comboBox);

    CustomComboBoxItem item1("Item 1", "This is item 1");
    CustomComboBoxItem item2("Item 2", "This is item 2");
    CustomComboBoxItem item3("Item 3", "This is item 3");

    QList<CustomComboBoxItem> items = {item1, item2, item3};

    for (const CustomComboBoxItem &item : items) {
        QStandardItem *standardItem = new QStandardItem(item.getText());
        standardItem->setData(item.getDescription(), Qt::UserRole);
        model->appendRow(standardItem);
    }

    comboBox.setModel(model);
    layout.addWidget(&comboBox);

    window.show();
    return app.exec();
}
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

6.2 方法二：使用自定义的 QStyledItemDelegate

使用 QStyledItemDelegate 来绘制和管理项目显示。

• 示例代码

#include <QApplication>
#include <QComboBox>
#include <QStyledItemDelegate>
#include <QPainter>
#include <QStandardItemModel>
#include <QVBoxLayout>
#include <QWidget>

class CustomComboBoxDelegate : public QStyledItemDelegate {
public:
    CustomComboBoxDelegate(QObject *parent = nullptr) : QStyledItemDelegate(parent) {}

    void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const override {
        QString text = index.data(Qt::DisplayRole).toString();
        QString description = index.data(Qt::UserRole).toString();

        painter->save();

        if (option.state & QStyle::State_Selected) {
            painter->fillRect(option.rect, option.palette.highlight());
            painter->setPen(option.palette.highlightedText().color());
        } else {
            painter->setPen(option.palette.text().color());
        }

        QRect textRect = option.rect.adjusted(5, 5, -5, -5);
        painter->drawText(textRect, Qt::AlignLeft, text);

        QRect descRect = option.rect.adjusted(5, 20, -5, -5);
        painter->drawText(descRect, Qt::AlignLeft, description);

        painter->restore();
    }

    QSize sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const override {
        return QSize(100, 50);
    }
};

class CustomComboBoxItem {
public:
    CustomComboBoxItem(const QString &text, const QString &description)
        : text(text), description(description) {}

    QString getText() const { return text; }
    QString getDescription() const { return description; }

private:
    QString text;
    QString description;
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QWidget window;
    QVBoxLayout layout(&window);

    QComboBox comboBox;

    QStandardItemModel *model = new QStandardItemModel(&comboBox);

    CustomComboBoxItem item1("Item 1", "This is item 1");
    CustomComboBoxItem item2("Item 2", "This is item 2");
    CustomComboBoxItem item3("Item 3", "This is item 3");

    QList<CustomComboBoxItem> items = {item1, item2, item3};

    for (const CustomComboBoxItem &item : items) {
        QStandardItem *standardItem = new QStandardItem(item.getText());
        standardItem->setData(item.getDescription(), Qt::UserRole);
        model->appendRow(standardItem);
    }

    comboBox.setModel(model);
    comboBox.setItemDelegate(new CustomComboBoxDelegate(&comboBox));

    layout.addWidget(&comboBox);

    window.show();
    return app.exec();
}
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
75
76
77
78
79
80
81
82

6.3 方法三：直接在 QComboBox 中添加自定义的 QWidget 项目

直接使用 QComboBox 的 setItemWidget() 方法来添加自定义的 QWidget 项目。

• 示例代码

#include <QApplication>
#include <QComboBox>
#include <QLabel>
#include <QVBoxLayout>
#include <QWidget>

class CustomComboBoxItemWidget : public QWidget {
public:
    CustomComboBoxItemWidget(const QString &text, const QString &description, QWidget *parent = nullptr)
        : QWidget(parent) {
        QVBoxLayout *layout = new QVBoxLayout(this);
        QLabel *textLabel = new QLabel(text, this);
        QLabel *descLabel = new QLabel(description, this);

        layout->addWidget(textLabel);
        layout->addWidget(descLabel);
    }
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);

    QWidget window;
    QVBoxLayout layout(&window);

    QComboBox comboBox;

    CustomComboBoxItemWidget *item1 = new CustomComboBoxItemWidget("Item 1", "This is item 1");
    CustomComboBoxItemWidget *item2 = new CustomComboBoxItemWidget("Item 2", "This is item 2");
    CustomComboBoxItemWidget *item3 = new CustomComboBoxItemWidget("Item 3", "This is item 3");

    comboBox.addItem("");
    comboBox.setItemData(0, QVariant::fromValue<void*>(item1));
    comboBox.setItemData(1, QVariant::fromValue<void*>(item2));
    comboBox.setItemData(2, QVariant::fromValue<void*>(item3));

    comboBox.setView(new QListView(&comboBox));
    for (int i = 0; i < comboBox.count(); ++i) {
        comboBox.setItemData(i, QVariant::fromValue<void*>(new CustomComboBoxItemWidget(
            QString("Item %1").arg(i+1),
            QString("This is item %1").arg(i+1),
            &comboBox
        )));
    }

    layout.addWidget(&comboBox);

    window.show();
    return app.exec();
}
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

• 解释

1. 自定义 QStandardItem：

   • 创建一个自定义的数据类 CustomComboBoxItem，用于存储每个项目的数据。
   • 使用 QStandardItemModel 和 QStandardItem 来管理 QComboBox 中的项目。

2. 自定义 QStyledItemDelegate：

   • 创建一个自定义的委托 CustomComboBoxDelegate，用于绘制每个项目的显示。
   • 使用 QComboBox 的 setItemDelegate() 方法将自定义委托应用到 QComboBox。

3. 自定义 QWidget 项目：

   • 创建一个自定义的 QWidget 类 CustomComboBoxItemWidget，用于显示每个项目的复杂内容。
   • 使用 QComboBox 的 setItemWidget() 方法将自定义的 QWidget 项目添加到 QComboBox 中。

通过这几种方式，你可以在 QComboBox 中显示自定义的项目，并根据需要对其进行管理和操作。

# 七、示例代码

以下是一个完整的示例代码，演示了 `QComboBox` 的各种用法。

```cpp
#include <QApplication>
#include <QComboBox>
#include <QVBoxLayout>
#include <QWidget>
#include <QDebug>
#include <QStandardItemModel>
#include <QStandardItem>

class MainWindow : public QWidget {
    Q_OBJECT

public:
    MainWindow() {
        QVBoxLayout *layout = new QVBoxLayout(this);

        QComboBox *comboBox = new QComboBox(this);
        comboBox->addItem("Option 1");
        comboBox->addItem("Option 2");
        comboBox->addItem("Option 3");
        comboBox->setCurrentIndex(1);

        // 可编辑
        comboBox->setEditable(true);

        // 自定义项
        QStandardItemModel *model = new QStandardItemModel();
        QStandardItem *item = new QStandardItem("Custom Item");
        item->setIcon(QIcon("icon.png"));
        model->appendRow(item);
        comboBox->setModel(model);

        layout->addWidget(comboBox);

        connect(comboBox, SIGNAL(currentIndexChanged(int)), this, SLOT(onIndexChanged(int)));
    }

private slots:
    void onIndexChanged(int index) {
        qDebug() << "Current index:" << index;
    }
};

int main(int argc, char *argv[]) {
    QApplication app(argc, argv);
    MainWindow window;
    window.show();
    return app.exec();
}

#include "main.moc"
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

通过上述示例和详细解析，你应该能够快速掌握 QComboBox 的使用方法，并在你的应用中灵活运用。

其他QT文章
1. QT开发环境安装以配置。
2. QT线段画板实战
3. 半小时玩转QT桌面系统托盘(含托盘消息)
4. QT入门开发一个时钟
5. 半小时教你做大转盘游戏（QT篇）
6. 手把手教你制作【带吸附效果的线段绘制】（QT）
7. 手把手教你开发-滚动效果号码抽奖（QT）
8. 100行代码实现贪吃蛇小游戏
9.C++实现《扫雷》游戏（入门经典）
10. svg转图片工具开发
11. Qt网路与通信(获取本机网络信息）
12. Qt网路与通信(UDP客户与服务）
13. Qt网络与通信（TCP聊天室）
14. Qt多线程以及线程池
15. Qt散点图、折线图、柱状图、盒须图、饼状图、雷达图开发实例
16. 取色器（QT）
17. MQTT客户端入门开发
18.QT文件上传带进度条实例（含源码）
19. Qt音乐播放器开发实例（可毕设含源码）
​