Qt: Sidebar Qt Creator style


Very simple tutorial about how to develop a dark sidebar like the Qt Creator tool. This is my solution based to stylesheet but same result can be reached in a lot of other ways. However I think this will get a good result with minimal efforts.




The control to use will be a List Widget than create a new window and add a QListWidget control in a side of client area central widget.


Just to show better the final result I added also some items with icon. For obtain a control similar to the Qt Creator sidebar you need to configure the list widget control in icon mode, set the icon order to top to bottom and set the icon size (in this example I used 48x48 icon). Normally the control show a small rectangle around the text of currently selected item. For avoid this simply set the focus rule of the widget to no focus and disable the selectionRectVisible option.


Now the magic stylesheet. Add to the list widget control the following stylesheet tags:

QListWidget 
{ 
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(100, 100, 100, 255), stop:1 rgba(150, 150, 150, 255));  
border-right: 2px groove gray; 
}

QListWidget::item:hover 
{ 
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(150, 150, 150, 255), stop:1 rgba(200, 200, 200, 255)); 
}

QListWidget::item:selected 
{ 
background: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(200, 200, 200, 200), stop:1 rgba(220, 220, 220, 255)); 
}

QListWidget::item 
{ 
border-bottom: 2px groove gray; 
padding: 10px; color: white; 
}

And the result will be the following:


The main difference is the missing shadow under text on the bottom of the icon but, unfortunately, the Qt stylesheet doesn't support shadow text property yet, hope for some future versions. However, consider the very small effort needed, I think this is a good result.

Comments

  1. im very impressed with your post because this post is very beneficial for me and provide a new knowledge to me
    Qt Creator 4.15.2 Crack

    ReplyDelete
  2. Wow, amazing block structure! How long
    Have you written a blog before? Working on a blog seems easy.
    The overview of your website is pretty good, not to mention what it does.
    In the content!
    Qt Creator Crack
    Telegram Desktop Crack
    Apeaksoft Screen Recorder Crack
    Ertugrul Ghazi Crack
    Adobe Audition CC Crack
    GraphPad Prism Crack

    ReplyDelete
  3. I am very happy to read this article. Thanks for giving us Amazing info. Fantastic post.
    Thanks For Sharing such an informative article, Im taking your feed also, Thanks.ipadian-premium-crack/

    ReplyDelete
  4. It solved all my queries perfectly. Our HP Printer offline service is also offered to get your printer offline.
    Our HP Printer offline service is also offered to get your printer offline.
    cinex-hd-crack

    ReplyDelete

  5. I was looking for this information from enough time and now I reached your website it’s really good content.
    Thanks for writing such a nice content for us.
    2020/12/14/microsoft-office-2007-product-key

    ReplyDelete
  6. I like your all post. You have done really good work. Thank you for the information you provide, it helped me a lot. I hope to have many more entries or so from you.
    Very interesting blog.https://vstmania.net/
    <a href="https://serialsoft.org/apeaksoft-screen-recorder-crack/"Serialsoft
    <a href="https://serialsoft.org/beecut-crack-2/"Serialsoft
    <a href="https://serialsoft.org/rosetta-stone/"Serialsoft

    ReplyDelete
  7. I was looking for this information from enough time and now I reached your website it’s really good content.
    Thanks for writing such a nice content for us.
    2020/12/29/winzip-activation-code

    ReplyDelete
  8. I am very happy to read this article. Thanks for giving us Amazing info. Fantastic post.
    Thanks For Sharing such an informative article, Im taking your feed also, Thanks.
    windows-firewall-control-crack/

    ReplyDelete
  9. Hi dear, It is really enjoyable to visit your website because you have such an amazing writing style.
    KMSPico Activator

    ReplyDelete

  10. I am very happy to read this article. Thanks for giving us Amazing info. Fantastic post.
    Thanks For Sharing such an informative article, Im taking your feed also, Thanks.autodesk-recap-pro-crack/

    ReplyDelete



  11. Wow! very beautiful, great, and good post. I like it very much.
    expertgps registration key full

    ReplyDelete
  12. I like your all post. You have done really good work. Thank you for the information you provide, it helped me a lot. I hope to have many more entries or so from you.
    Very interesting blog.
    SpyHunter 5 Crack

    ReplyDelete
  13. I like your all post. You have done really good work. Thank you for the information you provide, it helped me a lot. I hope to have many more entries or so from you.
    Very interesting blog.
    Reimage PC Repair Crack

    ReplyDelete

Post a Comment

Popular posts from this blog

Android: adb push and read-only file system error

Access GPIO from Linux user space

Launch an app from Android shell terminal