QComboBox

QComboBox 是Qt 框架中一个常用的下拉列表框控件，允许用户从预定义的选项中选择或直接输入内容。它的样式美化稍微有点复杂，比如本身的边框，下拉按钮，以及弹出来的选项窗口等。

这里尤其需要注意的下拉弹出的窗口，这个窗口不支持样式直接设置，所以需要结合代码中对该窗口进行特殊设置以支持样式。

这里参考Microsoft样式中的左侧竖线丨，通过border来控制，配合渐变色实现上下透明。

下拉按钮

下拉按钮主要通过 drop-down 和 down-arrow 来实现的。这里实现在左侧显示分割线以及结合svg图片实现不同状态。

QComboBox::drop-down {
  width: 12px;
  padding: 10px;
  border-left: 1px solid #d9d9d9;
}

QComboBox::drop-down:hover {
  border-left-color: #1677ff;
}

QComboBox::down-arrow {
  image: url("Data/icons/arrow_down.svg");
}

QComboBox::down-arrow:on {
  image: url("Data/icons/arrow_up.svg");
}

下拉弹出窗口

弹出窗口其实是一个 QListView ，但是直接通过 QSS 是没有办法设置样式的，这里需要在代码中通过 setView 来设置一个新的 QListView ，同时也可以支持无边框设置，背景透明（支持圆角设置），比如下面的代码：

def FramelessComboBox(comboBox, minWidth=50):
    comboBox.setView(QListView())
    view = comboBox.view()
    view.setMinimumWidth(comboBox.width() + minWidth)
    if view.parentWidget():
        p = view.parentWidget()
        p.setAttribute(Qt.WA_TranslucentBackground)
        p.setWindowFlags(
            p.windowFlags() | Qt.FramelessWindowHint | Qt.NoDropShadowWindowHint
        )

选项样式

参考Microsoft的样式，其实是左边一个带颜色的竖线，这里没办法实现圆角，通过 qlineargradient 来实现，具体可以看下面的设计图，注意的是需要把上下留一定距离用来做透明。

border-left: 3px solid qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0.18 rgba(255, 255, 255, 0), stop:0.2 rgba(0, 103, 192, 255), stop:0.8 rgba(0, 103, 192, 255), stop:0.82 rgba(255, 255, 255, 0));

样式代码

QComboBox {
  color: #000;
  border: 1px solid #d9d9d9;
  background-color: #fff;
  padding: 4px 11px;
  border-radius: 6px;
  combobox-popup: 0;
}

QComboBox:disabled {
  color: rgba(0, 0, 0, 0.25);
  border-color: #d9d9d9;
  background-color: #f6f6f6;
}

QComboBox:hover,
QComboBox:focus {
  border-color: #1677ff;
}

QComboBox::drop-down {
  width: 12px;
  padding: 10px;
  border-left: 1px solid #d9d9d9;
}

QComboBox::drop-down:hover {
  border-left-color: #1677ff;
}

QComboBox::down-arrow {
  image: url("Data/icons/arrow_down.svg");
}

QComboBox::down-arrow:on {
  image: url("Data/icons/arrow_up.svg");
}

QComboBox QFrame {
  background-color: transparent;
}

QComboBox QAbstractItemView {
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  background-color: #fff;
}


QComboBox QListView {
  outline: none;
  font-weight: normal;
}

QComboBox QListView::item {
  color: #000;
  min-height: 32px;
  padding: 0px 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-left: 3px solid transparent;
  margin: 0px 6px 2px 6px;
}

QComboBox QListView::item:hover {
  background-color: #F0F0F0;
}

QComboBox QListView::item:selected {
  font-weight: 600;
  background-color: #F0F0F0;
  border-left: 3px solid qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0.18 rgba(255, 255, 255, 0), stop:0.2 rgba(0, 103, 192, 255), stop:0.8 rgba(0, 103, 192, 255), stop:0.82 rgba(255, 255, 255, 0));
}

完整代码：https://github.com/PyQt5/PyQt/blob/master/QComboBox/ComboBoxStyle.py

效果图

渐变设计