Important: Please read the Qt Code of Conduct -

Recreating the Github for Mac UI with Qt

  • Is it possible to mimic the appearance of the main window in the Mac App Store application using QML/Qt Quick? Or else, how could this be done?
    Basically it consists of enlarging the title bar, and centering the traffic lights (capture: or even: ).

    Would definitely appreciate the help!

  • Yes, and it is quite simple. In your first image you can use 2 BorderImages{} for background and header and three custom created button from appropriate images.
    Second image will have one more BorderImage{} for the footer.

  • Thanks for the reply ixSci!

    So using BorderImage(s) will remove/overwrite the default title bar (the one available by default -, or do I need to add/remove something elsewhere?

    Thanks again!

  • No, QtQuick is all about creation you should search for "qt frameless window mac os x" or something similar in google since it has nothing to do with QtQuick.
    So you can create window of that appearance in QtQuick and show it in QDeclarativeView without standard frame which is drawn by Mac OS X

  • Thanks for the extra explanations! Really appreciated.
    I'll give it a shot!

  • Here's a problem I have with this solution:
    How can I know which theme the Mac user is using (Graphite/Blue), as the "traffic lights" will have to reflect the user's choice if I want my app to look properly native? (also, the traffic lights do not look the same in Snow Leopard and Lion, which is yet another issue)

    Would there be a way I could get a tall title bar (similar to what's in - also build with Qt), without having to try to replicate the behavior of the Mac native traffic lights myself?

  • HI again,

    Any chance someone could share additional code snippets (or a simple demo app on Github?) where the traffic lights aren't re-recreated (but "just" moved down the default location?).

    Thanks a lot for your help!

  • Not sure what you're trying to do. Why do you want to "mimic" while you can have the real thing using QWidgets? Just create a QMainWindow and call @setUnifiedToolBarOnMac(true);@
    Also add a QToolBar to the window and you'll get the "tall titlebar" you're looking for. Then you can use QML in the centralWidget of QMainWindow if you want to.

Log in to reply