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

How to develop nice-looking, visually modern applications in QT?



  • Hello,

    I'm wondering how to develop visually modern, with attractive GUI applications in QT. When I run QT Creator and start new project, the GUI looks very basic and "pure", just like simple win32 apps. Also, I read that Spotify windows application was created with Qt framework and their application GUI looks amazing. So, the question is: how did they create such an amazing application using Qt framework?


  • Lifetime Qt Champion

    Hi
    Most liley its due to custom styling.
    Either its QML app that is by nature custom drawn or
    Widgets with stylesheet.

    One option to make Qwidget based apps look more like nwer style is
    https://github.com/laserpants/qt-material-widgets
    That gives that modern look. so to speak.



  • @mrjj

    I tried to use that "stylesheet", but I couldn't figure out how to use it. Maybe
    someone could guide me on how to use them. I tried to clone that GitHub repository but furthermore I didn't know what to do.



  • Here a lots of examples how the stylesheet works for all kind of basic widgets.
    Take a look at those:
    https://doc.qt.io/qt-5/stylesheet-examples.html


  • Lifetime Qt Champion

    Hi
    Its not stylesheet but actual new widgets.

    It will build a static lib

    alt text
    i used mingw. just open its .pro file and build all. it did not like visual studio compiler.

    then copy the resulting libcompomponents.a file to your project folder
    then copy from Material components folder to your project folder for the includes (.h)

    alt text

    then add to your .pro file
    INCLUDEPATH += components/
    LIBS += -L$$PWD/./ -lcomponents

    and to your main.cpp

    int main(int argc, char *argv[])
    {
        QApplication a(argc, argv);
    
        Q_INIT_RESOURCE(resources); // this loads the icons etc from the lib
    ....
    

    then in mainwindow.cpp i did

    #include <qtmaterialcheckbox.h>

    auto a= new QtMaterialCheckBox(centralWidget());

    and behold ! a new checkbox :)

    alt text

    Hope this helps.



  • @mrjj

    Thank you so much!! it's working right now:)


  • Lifetime Qt Champion

    @privatepepper
    Very happy to hear.
    Im not 100% if one can make it a Qt module or something more clever but at least this way
    it works then !


Log in to reply