How to remove focus rectangle on QListView and similar using QStyledItemDelegate with style sheets?



  • I'm trying to get rid of the ugly focus rectangle on windows and linux shown on the focused item in a QListView.
    There are many solution on the web, the reimplementation of the QStyledItemDelegate::paint() method to unset the focus state works great unless you are using style sheets on the QListView.

    So my question. Is there a way to disable the focus rectangle without losing the possibility of using style sheets?

    Thank you



  • I looked for a practical solution too but unfortunately I got nothing; but some guy filed a feature request in this link: https://bugreports.qt-project.org/browse/QTBUG-4281 I wish to get the interest by Digia or Qt community



  • hello,
    have you tried this approach:
    @myListView->setStyleSheet("QListView::item:focus{border:none;}")@



  • [quote author="SeitsemaN" date="1377905416"]hello,
    have you tried this approach:
    @myListView->setStyleSheet("QListView::item:focus{border:none;}")@
    [/quote]

    This is absolutely incorrect! Have you tried it before suggestion?!


  • Lifetime Qt Champion

    Did you take a look at the "style sheet example for customizing QListView":http://qt-project.org/doc/qt-4.8/stylesheet-examples.html#customizing-qlistview ?



  • [quote]Did you take a look at the style sheet example for customizing QListView[/quote]
    Sure, no mentioning about focus removing by stylesheet!


  • Lifetime Qt Champion

    To make things clear: the focus rectangle is when you select an item or hover it ? Both ?


  • Moderators

    Can you give a specific example of the stylesheet that doesn't work?

    I tried this with the delegate:
    @
    void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
    {
    QStyleOptionViewItem option2 = option;
    option2.state = option.state & (~QStyle::State_HasFocus);
    QStyledItemDelegate::paint(painter, option2, index);
    }
    @
    and it doesn't affect stylesheets at all, i.e. thay still work as expected. For example this
    @
    listWidget->setStyleSheet("QListView::item:selected { color: red; background-color: yellow; }");
    @
    still colors the selected items.

    Btw. the focus rectangle, ugly as it may be, is an important usability feature. Think twice before removing it.



  • [quote]
    To make things clear: the focus rectangle is when you select an item or hover it ? Both ?
    [/quote]
    It's exactly the active item after selecting it.

    By code you can get hell of it by using:
    [code]setFocusPolicy(Qt::NoFocus);[/code]

    But this solution isn't practical because you've to set it for each widget in the GUI; For that I prefer to use stylesheet instead.



  • I could disable focus rect by adding this line to my .qss file:
    *{outline: none;}
    At least it worked for all buttons in the app.



  • [quote author="SeitsemaN" date="1378298986"]I could disable focus rect by adding this line to my .qss file:
    *{outline: none;}
    At least it worked for all buttons in the app.[/quote]

    This solution doesn’t\t fix the issue because it works for single type of widgets (ex. it doesn't fix QListWidget issue!)



  • I'm afraid there is no way of getting rid of this focus rect through the style sheet. Howewer, you can implement your own QStyle (or use QProxyStyle) like this:
    @
    #include <QApplication>
    #include <QProxyStyle>
    #include "MyMainWindow.h"
    class MyProxyStyle : public QProxyStyle
    {
    public:
    virtual void drawPrimitive(PrimitiveElement element, const QStyleOption * option,
    QPainter * painter, const QWidget * widget = 0) const
    {
    if (PE_FrameFocusRect == element)
    {
    /// do not draw focus rectangle
    }
    else
    {
    QProxyStyle::drawPrimitive(element, option,painter, widget);
    }
    }
    };

    int main(int argc, char **argv)
    {
    QApplication a(argc, argv);
    a.setStyle(new MyProxyStyle);
    MyMainWindow mw;
    mw.resize(700, 800);
    mw.show();
    }
    @
    Btw, this is slightly modified vesrion of what you can find in Qt Assistant.
    This worked for my test app (Qt5.1.1) with QListView and QListWidget.



  • [quote]I’m afraid there is no way of getting rid of this focus rect through the style sheet.[/quote]
    For that we files a suggestion to add this feature.

    [quote]Howewer, you can implement your own QStyle (or use QProxyStyle)[/quote]
    Actually it really the hard way to do it (although it fix it)



  • Hi glowc,
    You must use @QListView
    {
    outline: none;
    }@



  • [quote author="blueshift" date="1379779695"]Hi glowc,
    You must use @QListView
    {
    outline: none;
    }@[/quote]

    It doesn't behave just like setFocusPolicy



  • [quote author="blueshift" date="1379779695"]Hi glowc,
    You must use @QListView
    {
    outline: none;
    }@[/quote]

    I think this is the answer of the question.

    It doesn't behave just like setFocusPolicy but that's what glowck wants.

    glowck(and I) just want to remove unnecessary ugly rectangle(appearance) because it's replaced by color, image or something. If it behaves like setFocusPolicy I can't select in the list.

    Thanks blueshift, it solved my problem.



  • Thank you so much blueshift! I was going out mad!
    :)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.