深入浅出之QComboBox下拉组合框组件

QComboBox是Qt GUI库中的一个核心组件，它是一个复合型图形用户界面控件，常用于提供一种紧凑的方式来展示可选项列表。以下是对QComboBox的详细介绍：

一、基本特性

1. 外观：QComboBox通常表现为一个下拉列表框，包含一个文本标签区域和一个下拉箭头按钮。点击箭头时会显示出可供选择的项目列表。
2. 选项管理：可以预先填充一系列固定的选项供用户选择，选项列表可以动态添加或移除。当不展开下拉列表时，仅显示当前选定项的文字，占用较少的屏幕空间。
3. 可编辑性：默认情况下，QComboBox可能不允许用户直接在组合框内编辑文本，但可以通过设置属性使其成为可编辑的，允许用户手动输入文本或者修改现有选项。

二、成员函数与信号

1. 成员函数：

   • QComboBox(QWidget* parent = nullptr)：构造函数，用于创建一个新的QComboBox对象，并指定其父对象。
   • addItem(const QString &text, const QVariant &userData = QVariant())：向下拉列表中添加一个项目，并可选地附加一个用户数据（QVariant类型）。
   • insertItem(int index, const QString &text, const QVariant &userData = QVariant())：在指定索引处插入一个项目。
   • removeItem(int index)：移除指定索引处的项目。
   • clear()：清除下拉列表中的所有项目。
   • count() const：返回下拉列表中的项目数量。
   • itemText(int index) const：返回指定索引处的项目的文本。
   • itemData(int index, int role = Qt::UserRole) const：返回指定索引处的项目的用户数据，role参数用于指定要检索的数据的角色。
   • currentIndex() const：返回当前选中项目的索引，如果没有选中任何项目，则返回-1。
   • setCurrentIndex(int index)：设置当前选中项目的索引。
   • currentText() const：返回当前选中项目的文本。

2. 信号：

   • currentIndexChanged(int index)：当当前选中项目的索引发生变化时发射。
   • activated(int index)：当用户选择一个项目并释放鼠标按钮或按下回车键时发射，与currentIndexChanged不同，这个信号只在用户通过用户界面进行交互时发射。
   • currentTextChanged(const QString &text)：当currentText属性变化时发射。
   • editTextChanged(const QString &text)：在编辑框中修改文字时发射。
   • highlighted(int index)：移动鼠标使下拉列表中的某一项被高亮显示但还没有完成选择时发射。
   • textActivated(const QString &text)：在下拉列表中选择某一项时发射，即使选择的项没有发生变化。
   • textHighlighted(const QString &text)：当下拉列表中的某一项被高亮显示但还没有完成选择时发射。

下面以表格形式展现

三、QComboBox美化

QComboBox的美化主要涉及对其外观和行为的定制，包括边框、背景色、字体、下拉箭头、下拉列表等元素的样式调整。以下是一些常用的美化方法：

3.1、使用样式表（QSS）

Qt提供了样式表（QSS）机制，允许开发者以类似于CSS的方式定制控件的外观。以下是一些QComboBox样式表的示例：

基础样式

QComboBox {
    border: 2px solid #f3f3f3; /* 边框宽度、线形、颜色 */
    background-color: rgb(237, 242, 255); /* 背景颜色 */
    border-radius: 15px; /* 圆角 */
    padding: 1px 2px 1px 2px; /* 内边距 */
    text-align: bottom; /* 文本对齐方式 */
    min-width: 9em; /* 最小宽度 */
    border-style: solid; /* 边框风格 */
    border-width: 2px; /* 边框宽度（与上面的border属性重复，可省略） */
    border-color: rgb(77, 123, 255); /* 边框颜色（与上面的border属性重复，可省略） */
    padding-left: 10px; /* 左侧内边距 */
}

下拉箭头样式

QComboBox::down-arrow {
    image: url(:/image/down_list.png); /* 自定义图片填充 */
    width: 10px; /* 宽度 */
    height: 10px; /* 高度 */
}

下拉按钮样式

QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right; /* 放于右方顶部 */
    width: 50px; /* 按钮宽度 */
    border-top-right-radius: 3px; /* 圆角 */
    border-bottom-right-radius: 3px; /* 圆角 */
}

下拉列表样式

QComboBox QAbstractItemView {
    border: 2px solid #f3f3f3; /* 边框 */
    background-color: rgba(237, 242, 255, 1); /* 背景颜色 */
    border-radius: 15px; /* 圆角 */
    padding: 1px 2px 1px 2px; /* 内边距 */
    min-width: 9em; /* 最小宽度 */
}

QComboBox QAbstractItemView::item {
    border-radius: 15px; /* 圆角 */
    height: 30px; /* 项的高度 */
    background-color: rgb(237, 242, 255); /* 背景颜色 */
}

QComboBox QAbstractItemView::item:hover {
    color: #FFFFF0; /* 文字颜色 */
    background-color: rgb(98, 0, 255); /* 背景颜色 */
}

QComboBox QAbstractItemView::item:selected {
    color: #FFFFF0; /* 文字颜色 */
    background-color: rgb(0, 85, 200); /* 背景颜色 */
}

3.2、设置视图

为了使下拉列表的样式生效，需要设置QComboBox的视图。通常，QComboBox的默认视图并不是QAbstractItemView，因此需要手动设置。

ui->comboBox->setView(new QListView());

3.3、其他美化方法

1. 调整大小策略

   可以通过设置QComboBox的sizeAdjustPolicy属性来调整其大小策略。例如，QComboBox::AdjustToContents会根据内容自动调整大小。

2. 字体设置

   可以使用QComboBox的setFont()方法来设置字体样式。另外，如果需要获取系统字体列表，可以使用QFontComboBox控件。

3. 动态添加选项

   可以通过代码动态地向QComboBox中添加选项，以适应不同的应用场景。

3.4 注意事项

1. 在使用样式表时，要确保路径和图片资源的正确性。
2. 某些样式可能受到Qt版本和操作系统的限制，因此在不同环境下可能会有所不同。
3. 在设置视图时，要确保已经包含了必要的头文件和库。

通过以上方法，可以灵活地定制QComboBox的外观和行为，以满足不同的应用需求。

四、高级用法

1. 模型/视图架构：QComboBox遵循Qt的模型/视图架构，可以与任何实现了QAbstractItemModel的模型类协同工作，这意味着它可以灵活地绑定不同数据源并自定义显示方式。
2. 外观定制：可以通过样式表（QSS）进行外观定制，包括但不限于背景色、字体、边框样式等，甚至可以定制下拉列表中每一项的高度，这需要结合C++代码来实现。

五、示例代码

以下是一个简单的QComboBox用法示例：

#include <QApplication>
#include <QComboBox>
#include <QHBoxLayout>
#include <QLabel>
#include <QWidget>
#include <QMessageBox>

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

    QWidget *window = new QWidget;
    QHBoxLayout *layout = new QHBoxLayout(window);

    QLabel *label = new QLabel("请选择一个选项：", window);
    layout->addWidget(label);

    QComboBox *comboBox = new QComboBox(window);
    comboBox->addItem("选项1");
    comboBox->addItem("选项2");
    comboBox->addItem("选项3");

    layout->addWidget(comboBox);

    QObject::connect(comboBox, SIGNAL(currentIndexChanged(int)), [](int index) {
        QString text = "你选择的选项是：" + comboBox->itemText(index);
        QMessageBox::information(nullptr, "选择结果", text);
    });

    window->show();
    return app.exec();
}

在这个示例中，我们创建了一个窗口和一个水平布局，然后创建了一个QComboBox和一个QLabel，并将它们添加到布局中。最后，我们连接了QComboBox的currentIndexChanged信号到一个lambda函数，该函数在用户选择不同选项时显示一个消息框。 

参考：

1. C++ Qt开发：ComboBox下拉组合框组件-腾讯云开发者社区-腾讯云