css - 样式QtComboBox，QListViewItem-设置文本填充

信息:Qt 4.8，Qt Designer

我正在努力在下拉列表框上设置文本项的填充。我的理解是，整个过程是QComboBox小部件，下拉部分是QListView。但是我无法确定要使用哪个CSS选择器来更改下拉列表中文本项的样式。

我希望将悬停元素的背景颜色一直扩展到最左侧，而不是保留5px的边距。文字本身排列整齐，只是左边的白色空白困扰着我。

如果可以删除突出显示的元素周围的虚线边框，那也很好。



我想我只是没有使用正确的元素选择器。我试过QListView::item和QListViewItem。这是我的CSS应用于组合框。

QComboBox{
border:                 none;
background-color:   rgb(87, 96, 134);
color:                      rgb(255, 255, 255);
font-weight:            bold;
padding:                    5px

}

QComboBox::drop-down{
    border:                 none;
    background-color:   rgb(87, 96, 134);
    color:                      rgb(255, 255, 255);
    font-weight:            bold;
    padding:                    0px;
}

QComboBox::down-arrow{
    image:                      url(:/icons/combobox_down_arrow.png);
    padding-right:          5px;
}

QListView{
    border:                 none;
    color:                      rgb(87, 96, 134);
    background-color:   rgb(255, 255, 255);
    font-weight:            bold;
    selection-background-color: rgb(47, 175, 178);
    show-decoration-selected: 1;
    margin-left:                -10px;
    padding-left    :           15px;
}

QListView::item:hover{

    background-color:   rgb(47, 175, 178);
    border:                 none;
}

有什么想法吗？

最佳答案

通过设置未记录的属性outline，可以仅使用CSS删除杂物边框:

QComboBox QAbstractItemView {
    outline: none;
}

QListView也可以在此选择器中使用。在本示例中使用QAbstractItemView，因为它是QListView的基类。请注意，不是为每个元素而是为元素的外部容器设置此属性。

还有其他使用编码删除虚线边框的方法，例如QT - CSS: decoration on focus

看起来需要更改代码以具有更好的填充灵活性。 QComboBox使用基于QAbstractItemDelegate的自己的QItemDelegate私有(private)实现。但是，其他控件使用QStyledItemDelegate( QStyledItemDelegate vs. QItemDelegate )。这就是为什么CSS元素选择器(QListView::item)对QComboBox元素不起作用。

在源代码中有以下注释及其解释:



如果上面的注释不是问题，则可以将QStyledItemDelegate设置为QComboBox对象:

QComboBox *combobox = new QComboBox;
combobox->setItemDelegate(new QStyledItemDelegate(combobox));

现在，不再需要属性selection-background-color。可以自定义::item:

QComboBox QAbstractItemView::item {
    border: none;
    padding-left: 5px;
}

QComboBox QAbstractItemView::item:selected {
    background: rgb(47, 175, 178);
    padding-left: 5px;
}

注意，要设置填充，还需要至少提供border或background属性以及padding。否则，不考虑padding属性。

使用选择器::item:selected代替:hover，因为还可以通过键盘选择元素。

尽管有记录表明可以为QComboBox设置自定义 View ，但这并不是那么简单。 QComboBox也可以包含分隔符项。如果QComboBox中没有分隔符，则上述解决方案可以正常工作。要处理分隔符，元素委托(delegate)还应该了解它们。

可以继承QStyledItemDelegate的子类，并从QComboBoxDelegate的Qt私有(private)实现中复制所需的函数。该解决方案不是很好。它可能是，不能与新的Qt版本一起移植。 Qt5中QComboBoxDelegate的实现与Qt4不兼容。但是，Qt5可以与Qt4实现一起使用，因此可以从Qt4中获取此类。 QItemDelegate基类被QStyledItemDelegate代替:

class ComboBoxDelegateStyled : public QStyledItemDelegate
{
    Q_OBJECT
public:
    ComboBoxDelegateStyled(QObject *parent, QComboBox *cmb) :
        QStyledItemDelegate(parent), mCombo(cmb) {}

    static bool isSeparator(const QModelIndex &index) {
        return index.data(Qt::AccessibleDescriptionRole).toString() == QLatin1String("separator");
    }

protected:
    void paint(QPainter *painter,
               const QStyleOptionViewItem &option,
               const QModelIndex &index) const {
        if (isSeparator(index)) {
            QRect rect = option.rect;
            if (const QStyleOptionViewItemV3 *v3 = qstyleoption_cast<const QStyleOptionViewItemV3*>(&option))
                if (const QAbstractItemView *view = qobject_cast<const QAbstractItemView*>(v3->widget))
                    rect.setWidth(view->viewport()->width());
            QStyleOption opt;
            opt.rect = rect;
            mCombo->style()->drawPrimitive(QStyle::PE_IndicatorToolBarSeparator, &opt, painter, mCombo);
        } else {
            QStyledItemDelegate::paint(painter, option, index);
        }
    }

    QSize sizeHint(const QStyleOptionViewItem &option,
                   const QModelIndex &index) const {
        if (isSeparator(index)) {
            int pm = mCombo->style()->pixelMetric(QStyle::PM_DefaultFrameWidth, 0, mCombo);
            return QSize(pm, pm);
        }
        return QStyledItemDelegate::sizeHint(option, index);
    }
private:
    QComboBox *mCombo;
};

子类QComboBox可以使用ComboBoxDelegateStyled是有意义的:

class ComboBoxStyled : public QComboBox
{
public:
    explicit ComboBoxStyled(QWidget *parent = 0) : QComboBox(parent) {
        setItemDelegate(new ComboBoxDelegateStyled(this, this));
    }
};

现在可以使用类ComboBoxStyled代替QComboBox。它支持组合框分隔符绘图，还支持::item的CSS。

自定义QComboBox分隔符的类似解决方案:how to add stylesheet for separator in QCombobox

PyQt

以上行为对PyQt有效。可以使用outline删除虚线边框，并设置样式项委托(delegate)以自定义CSS ::item:

styledComboBox = QtGui.QComboBox()
delegate = QtGui.QStyledItemDelegate()
styledComboBox.setItemDelegate(delegate)

在这种情况下，组合框分隔符显示为没有文本的常规元素。
也可以创建自定义委托(delegate)来处理分隔符。

关于css - 样式QtComboBox，QListViewItem-设置文本填充，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33415621/