How to create a window without a title bar but with the close/minimize/maximizie buttons in QML?

Question

I want to create an application without the title bar, but with native close, minimize and maximize buttons. This is the intent of the layout:

The app is built using Go and QML. I was able to remove the title bars by adding:

flags: Qt.FramelessWindowHint | Qt.Window

But this means that I'm having to recreate all kinds of native behaviors, like window moving and resizing. I'm also recreating the close/minimize/fullscreen buttons by hand, but it means I lose all kinds of native OS behaviour like the window snapping in windows or the zoom option on mac.

Is there a better way to do this? Is it possible at least to create the native max-min-close buttons instead of building it by scratch?

Thanks for all

Answer 1

You can use objective-c to setup your window correctly. This might be a little buggy, but I got it working through this (create a separate .mm class):

#include "macwindow.h"
#include <Cocoa.h>

MacWindow::MacWindow(long winid)
{
   NSView *nativeView = reinterpret_cast<NSView *>(winid);
   NSWindow* nativeWindow = [nativeView window];

   [nativeWindow setStyleMask:[nativeWindow styleMask] | NSFullSizeContentViewWindowMask | NSWindowTitleHidden];
   [nativeWindow setTitlebarAppearsTransparent:YES];

   [nativeWindow setMovableByWindowBackground:YES];
}

In your main.cpp you need to pass the window id like this:

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QWindow>
#include "macwindow.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    QWindowList windows = QGuiApplication::allWindows();
    QWindow* win = windows.first();

    MacWindow* mac = new MacWindow(win->winId());

    return app.exec();
}   

In your .pro file you'll need to add the Cocoa reference:

macx:LIBS += -framework Foundation -framework Cocoa
macx:INCLUDEPATH += /System/Library/Frameworks/Foundation.framework/Versions/C/Headers \
/System/Library/Frameworks/AppKit.framework/Headers \
/System/Library/Frameworks/Cocoa.framework/Headers

Not sure why, but I had to add a TextEdit with the focus attribute to get the window drawn correctly, otherwise it appeared just black (my main.qml):

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

ApplicationWindow {
    visible: true
    color: "white"
    width: 600
    height: 400
    minimumWidth: width
    minimumHeight: height
    maximumWidth: width
    maximumHeight: height

    Rectangle {
        anchors.fill: parent
        color: "white"

        TextEdit {
            opacity: 0
            focus: true
        }
    }
}

Answer 2

My solution (based on Eduard's one, adjusted so window is draggable).

(Complete source code https://github.com/teimuraz/qt-macos-without-title)

Create macos.h and macos.mm files (If you create it with qt creator rename macos.cpp to macos.mm)

macos.h

#ifndef MACOS_H
#define MACOS_H

#include <QGuiApplication>
#include <QWindow>

class MacOS {
    MacOS(long winid);
public:
    static void removeTitlebarFromWindow(long winId = -1);
};

#endif // MACOS_H

macos.mm

#include "macos.h"
#include <Cocoa/Cocoa.h>

#include <QGuiApplication>
#include <QWindow>

void MacOS::removeTitlebarFromWindow(long winId)
{
    if(winId == -1) {
        QWindowList windows = QGuiApplication::allWindows();
        QWindow* win = windows.first();
        winId = win->winId();
    }

    NSView *nativeView = reinterpret_cast<NSView *>(winId);
    NSWindow* nativeWindow = [nativeView window];

    [nativeWindow setStyleMask:[nativeWindow styleMask] | NSFullSizeContentViewWindowMask | NSWindowTitleHidden];
    [nativeWindow setTitlebarAppearsTransparent:YES];
    [nativeWindow setMovableByWindowBackground:YES];
}

main.qml

import QtQuick

import QtQuick.Controls

ApplicationWindow {
    id: mainWindow
    visible: true
    width: 640
    height: 480

   // Make windows draggable, currently whole windows area is draggable, but can be adjusted to make draggable only top area
   property int previousX
   property int previousY

    MouseArea {
        anchors {
            top: parent.top
            bottom: parent.bottom
            left: parent.left
            right: parent.right
        }

        onPressed: {
            previousX = mouseX
            previousY = mouseY
        }

        onMouseXChanged: {
            var dx = mouseX - previousX
            mainWindow.setX(mainWindow.x + dx)
        }

        onMouseYChanged: {
            var dy = mouseY - previousY
            mainWindow.setY(mainWindow.y + dy)
        }
    }
}

main.cpp

Just add MacWindow::removeTitlebarFromWindow();

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "macos.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(u"qrc:/qt-macos-without-title/main.qml"_qs);
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    MacOS::removeTitlebarFromWindow();

    return app.exec();
}

And finally include cocoa lib in .pro file

yourapp.pro

...
macx:LIBS += -framework Foundation -framework Cocoa
macx:INCLUDEPATH += /System/Library/Frameworks/Foundation.framework/Versions/C/Headers \
/System/Library/Frameworks/AppKit.framework/Headers \
/System/Library/Frameworks/Cocoa.framework/Headers