css – 样式QtComboBox,QListViewItem – 设置文本填充

2023年3月30日 850次阅读

信息：Qt 4.8,Qt Designer

我正在努力设置组合框下拉文本项的填充.我的理解是整个事情是QComboBox小部件,下拉部分是QListView.但我无法确定用于更改下拉列表中文本项的样式的css选择器.

我希望悬停项目的背景颜色一直向左延伸,而不是留下5px的边距.文本本身排列很好,只是左边的白色间隙让我烦恼.

如果我能删除突出显示项目周围的虚线边框,我也会很棒.

《css – 样式QtComboBox,QListViewItem – 设置文本填充》

我想我只是没有使用正确的项目选择器.我试过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;
}

思考？

最佳答案 通过设置未记录的属性大纲,可以仅使用CSS删除dotter边框：

QComboBox QAbstractItemView {
    outline: none;
}

QListView也可以在这个选择器中使用. QAbstractItemView用于此示例,因为它是QListView的基类.请注意,此属性不是按项目设置,而是针对项目的外部容器设置.

还有其他方法可以使用编码来删除虚线边框,例如QT – CSS: decoration on focus

看起来需要更改代码以使用填充具有更好的灵活性. QComboBox基于QItemDelegate使用自己的QAbstractItemDelegate私有实现.但是,其他控件使用QStyledItemDelegate
(QStyledItemDelegate vs. QItemDelegate).这就是为什么项目的CSS选择器(QListView :: item)对QComboBox项目没有影响的原因.

源代码中有以下注释和说明：

Note that this class is intentionally not using QStyledItemDelegate
Vista does not use the new theme for combo boxes and there might be
other side effects from using the new class

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

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

现在,不再需要属性选择 – 背景颜色.可以自定义:: item：

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

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

注意,为了设置填充,还需要提供例如至少边界或背景属性以及填充.否则,不考虑填充属性.

使用selector :: item：selected代替：hover,因为也可以通过键盘选择项目.

尽管记录了可以为QComboBox设置自定义视图但它并不那么简单. QComboBox也可以有分隔符项.如果QComboBox中没有分隔项,则上述解决方案可以正常工作.要处理分隔符,项目委托也应该知道它们.

可以将QStyledItemDelegate子类化,并从QComboBoxDelegate的Qt私有实现中复制所需的函数.那解决方案不是很好.对于新的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.它支持组合框分隔符绘图,也支持CSS for :: item.

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

PyQt的

上述行为对PyQt有效.可以使用大纲删除虚线边框,并设置样式项委托以自定义CSS :: item：

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

在这种情况下,组合框分隔符显示为没有文本的常规项.
也可以创建自定义委托来处理分隔符.

点赞