QML - Підручник 031. Вимкніть системне обрамлення вікон у QML і напишіть код для обробки переміщення та зміни розміру вікон

QML, Qt, Frameless Window, Custom Style

Якщо з якоїсь причини, ви вирішили відмовитися від стандартного системного обрамлення вікна та реалізувати всі Title Bar`и вікна самостійно в QML, то ви цілком можете реалізувати це засобами QML, що буде навіть простіше ніж у C++, на мій погляд. Для ознайомлення можете переглянути статтю по кастомізації вікна програми у стилі AIMP . Там є значна частка коду реалізації механіки переміщення вікна, а також його ресайза. Перевага QML в даному випадку полягає в тому, що QML відразу забезпечує верстку програми, а значить можна за допомогою MouseArea і якір відразу визначити потрібну обробку при кліку і переміщенні миші без будь-яких спеціальних розрахунків положення курсору в області вікна.

А механіка розрахунку зміни розмірів та положення буде подібна до тієї, яка була застосована в статті з кастомізації додатка в C++. Тобто необхідно буде запам'ятати положення, де було натиснуто кнопку миші, а потім вже щодо цього положення робити ресайз і переміщення вікна програми, поки кнопка не буде відпущена.

Як видно на малюнку вище, потрібно створити 5 областей MouseArea, чотири з яких відповідатимуть за ресайз програми, а п'ята центральна за переміщення програми. Тобто можна буде пересувати програму, затиснувши кнопку миші в будь-якому місці п'ятої центральної області.

Якщо Вам знадобиться спеціальний Title Bar, він також може відповідати за переміщення вікна програми. Тобто необов'язково робити всю центральну область чутливою до переміщення.

main.qml

Програма створюється за замовчуванням і змінюватиме лише файл main.qml, який я і наведу як приклад.

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

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

    flags: Qt.FramelessWindowHint // Отключаем обрамление окна

    // Объявляем свойства, которые будут хранить позицию зажатия курсора мыши
    property int previousX
    property int previousY

    MouseArea {
        id: topArea
        height: 5
        anchors {
            top: parent.top
            left: parent.left
            right: parent.right
        }
        // Устанавливаем форму курсора, чтобы было понятно, что это изменение размера
        cursorShape: Qt.SizeVerCursor

        onPressed: {
            // Запоминаем позицию по оси Y
            previousY = mouseY
        }

        // При изменении позиции делаем пересчёт позиции окна, и его высоты
        onMouseYChanged: {
            var dy = mouseY - previousY
            mainWindow.setY(mainWindow.y + dy)
            mainWindow.setHeight(mainWindow.height - dy)
        }
    }

    // Аналогичные расчёты для остальных трёх областей ресайза
    MouseArea {
        id: bottomArea
        height: 5
        anchors {
            bottom: parent.bottom
            left: parent.left
            right: parent.right
        }
        cursorShape: Qt.SizeVerCursor

        onPressed: {
            previousY = mouseY
        }

        onMouseYChanged: {
            var dy = mouseY - previousY
            mainWindow.setHeight(mainWindow.height + dy)
        }
    }

    MouseArea {
        id: leftArea
        width: 5
        anchors {
            top: topArea.bottom
            bottom: bottomArea.top
            left: parent.left
        }
        cursorShape: Qt.SizeHorCursor

        onPressed: {
            previousX = mouseX
        }

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

    MouseArea {
        id: rightArea
        width: 5
        anchors {
            top: topArea.bottom
            bottom: bottomArea.top
            right: parent.right
        }
        cursorShape:  Qt.SizeHorCursor

        onPressed: {
            previousX = mouseX
        }

        onMouseXChanged: {
            var dx = mouseX - previousX
            mainWindow.setWidth(mainWindow.width + dx)
        }
    }

    // Центральная область для перемещения окна приложения
    // Здесь уже потребуется использовать положение как по оси X, так и по оси Y
    MouseArea {
        anchors {
            top: topArea.bottom
            bottom: bottomArea.top
            left: leftArea.right
            right: rightArea.left
        }

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