Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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:

how it would look like on mac

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

like image 696
Alexandre Van de Sande Avatar asked Mar 05 '15 13:03

Alexandre Van de Sande


1 Answers

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
        }
    }
}

enter image description here

like image 194
Eduard Avatar answered Oct 03 '22 02:10

Eduard