Qt中ComboBox的CSS样式定制：匹配Figma设计需求

根据你提供的设计目标，以下是对应的Qt样式表（QSS）代码，直接复制即可使用，可根据设计细节调整颜色、圆角等数值：

/* 基础ComboBox容器样式 */
QComboBox {
    border: 1px solid #E0E0E0; /* 浅灰边框，匹配设计质感 */
    border-radius: 8px; /* 圆角尺寸，按需调整 */
    padding: 6px 30px 6px 12px; /* 内边距：左右留空适配箭头和文本 */
    background-color: #FFFFFF; /* 白色背景 */
    font-size: 14px;
    color: #333333; /* 常规文本颜色 */
}

/* 鼠标悬浮状态 */
QComboBox:hover {
    border-color: #BDBDBD; /* 悬浮时边框加深 */
    background-color: #FAFAFA; /* 浅灰背景过渡 */
}

/* 下拉按钮区域 */
QComboBox::drop-down {
    border: none; /* 移除默认按钮边框 */
    width: 24px; /* 按钮宽度 */
    border-radius: 0 8px 8px 0; /* 右侧圆角与容器对齐 */
    background-color: transparent;
}

/* 自定义下拉箭头 */
QComboBox::down-arrow {
    image: none; /* 清除默认箭头 */
    color: #666666; /* 箭头颜色 */
    font-family: "Segoe UI Symbol";
    content: "▼"; /* 用Unicode字符替代图片，也可替换为image: url(箭头图片路径); */
    font-size: 12px;
}

/* 下拉列表容器 */
QComboBox QAbstractItemView {
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    background-color: #FFFFFF;
    selection-background-color: #2196F3; /* 选中项高亮背景色 */
    selection-color: #FFFFFF;
    padding: 4px 0;
}

/* 下拉列表项基础样式 */
QComboBox QAbstractItemView::item {
    padding: 8px 12px;
    font-size: 14px;
    color: #333333;
}

/* 下拉列表项悬浮状态 */
QComboBox QAbstractItemView::item:hover {
    background-color: #E3F2FD; /* 悬浮浅蓝背景，匹配设计风格 */
}

使用方法 #

1. 代码中调用：直接将上述QSS字符串传入comboBox->setStyleSheet()
2. Qt Designer中设置：选中ComboBox，在右侧属性面板的styleSheet栏粘贴代码

调整提示 #

• 可根据Figma设计的具体色值、圆角大小修改对应CSS属性
• 若需用自定义图片作为箭头，替换QComboBox::down-arrow中的content为image: url(你的箭头图片路径);，并调整按钮宽度适配图片

内容的提问来源于stack exchange，提问作者Thanh Duy Cao