Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Recreating the Slack.App channel selector with Qt



  • I am looking to implement a control very similar to the channel selector in the Slack app.

    Attached is a gif of me hovering my mouse above certain icons and clicking on them.

    What would be the best control to implement something like this in Qt? I started looking at QTreeView but I'm not that's best. I would prefer to keep this in Widgets world and not use QML, though I'm not entirely opposed to the idea.

    Recommendations and suggestions are welcome!

    0_1544473245901_slack.gif


  • Lifetime Qt Champion

    Hi,

    Looks rather like a QListView with a custom QStyledItemDelegate for the painting.


  • Lifetime Qt Champion

    Hi
    How many channels will there be?
    A listview + delegate would be able to handle a long list with grace.
    Some stylesheet for the scrollbar and some code for the hover effect.



  • Only took a couple days but here is! Used QListView with a custom QStyledItemDelegate.

    0_1544642535396_Untitled.gif

    One thing I don't understand is early on I had defined a stylesheet for my QListView derived control. The stylesheet looked pretty basic:

    QListView
    {
        background: #181F26;
        border-style: none;
    }
    
    QListView::item::selected
    {
        border-color: #93C0A4;
        border-style: outset;
        border-width: 2px;
        border-radius: 5px;
    }
    
    QListView::item::hover
    {
        border-color: #606060;
        border-style: outset;
        border-width: 3px;
        border-radius: 5px;
    }
    

    Now, most of that is largely ignored (I think?) in my derived paint() method. Yet, if I remove the stylesheet, then QStyle::State_Selected and QStyle::State_MouseOver don't work as expected. Why is this?


  • Lifetime Qt Champion

    @Wolosocu
    Hi
    Good work. it looks nice.
    Unless you use QStyle paint functions, any stylesheet have no effect.
    QPainter have no idea about it.

    Im not sure how
    QStyle::State_Selected and QStyle::State_MouseOver
    is not working./ be different.


Log in to reply