QML 自定义窗口简易实现：使用过滤 Window 事件的方式

素颜马尾好姑娘i 2022-12-21 06:30 218阅读 0赞

# 1.前言 #

QML 自定义窗口目前看到的主要有两种方式，一种是纯 QML 实现，使用 MouseArea 来处理鼠标相关事件；另一种是事件过滤，用系统本地 API 进行操作。前两天看了涛哥的自定义窗口（[https://github.com/jaredtao/TaoQuick][https_github.com_jaredtao_TaoQuick]），是继承 QQuickWindow + 本地 API 的方式实现的。我本来也想借鉴下，但是发现 QML 的 Window 在 Qt5 后面的版本改为了 QQuickWindow 的子类 QQuickWindowQmlImpl ，还是个没导出的类。所以我就改了下自己的思路，由继承 Window 改为过滤其事件。

# 2.实现 #

我使用的方式是：创建一个 QObject 子类过滤 Window 的事件，过滤到移动和拉伸等操作的时候就去设置 Window 相关参数。

目前实现的功能只有拖拽标题栏和边框缩放，最终效果如下：

![20201115202516622.gif][]

这里面也遇到不少问题：

> 整个 Window 上的鼠标事件都会被传递进来，即使上面放了个 MouseArea 或者 Button ，而 QWidget 就不会接收小部件的事件。
> 
> 鼠标在不同的子部件移动时，Window 里没有特殊的信号，有时会有 CursorChange 的事件。
> 
> MouseArea 来作为标题栏的区域绑定，不然用 Rectangle 也不知道是点击在了按钮还是标题栏空白处，毕竟都会传递到 Window。
> 
> QML 拉伸的时候窗口会闪烁，这是原生就有的问题，做个橡皮筋效果应该会舒服点。

# 3.代码  #

完整代码链接：[https://github.com/gongjianbo/MyTestCode/tree/master/Qml/QmlFramelessWindow][https_github.com_gongjianbo_MyTestCode_tree_master_Qml_QmlFramelessWindow]

这里贴出过滤器类和 QML 使用示例的代码：

#ifndef FRAMELESSHELPER_H
    #define FRAMELESSHELPER_H
    
    #include <QQuickItem>
    #include <QQuickWindow>
    #include <QEvent>
    
    /**
     * @brief 一个简易的无边框辅助类
     * @author 龚建波
     * @date 2020-11-15
     * @details
     * 之前看有网友用的Window+本地事件来做的
     * Qt5 QML 中的 Window类型
     * 可能是QQuickWindow或者QQuickWindowQmlImpl（子类），后者未导出
     * 所以思路由重写事件改为过滤，但最终的实现效果感觉不大好，resize得时候一样会有闪烁
     * （拉伸时闪烁也是老问题了）
     * 感觉解决拉伸时闪烁问题还是用橡皮筋好一点
     *
     * 使用说明：
     * 1.注册为QML类型
     * 2.锚定window（Window）和title（MouseArea）两个区域，且设置borderWidth边距
     * FramelessHelper {
     *      window: root
     *      title: title_area
     *      borderWidth: 6
     * }
     * 3.Window设置flags为无边框
     * flags: Qt.Window|Qt.FramelessWindowHint|Qt.WindowMinMaxButtonsHint
     */
    class FramelessHelper : public QObject
    {
        Q_OBJECT
        //边距
        Q_PROPERTY(int borderWidth READ getBorderWidth WRITE setBorderWidth NOTIFY borderWidthChanged)
        //拖动使能
        Q_PROPERTY(bool moveEnable READ getMoveEnable WRITE setMoveEnable NOTIFY moveEnableChanged)
        //正在拖动
        Q_PROPERTY(bool moving READ getMoving NOTIFY movingChanged)
        //拉伸缩放使能
        Q_PROPERTY(bool resizeEnable READ getResizeEnable WRITE setResizeEnable NOTIFY resizeEnableChanged)
        //正在拖边框改变大小
        Q_PROPERTY(bool resizing READ getResizing NOTIFY resizingChanged)
        //绑定主窗口，Window类型
        Q_PROPERTY(QQuickWindow* window MEMBER window WRITE setWindow NOTIFY windowChanged)
        //绑定标题栏，MouseArea类型
        Q_PROPERTY(QQuickItem* title MEMBER title WRITE setTitle NOTIFY titleChanged)
    private:
        //区域划分-九宫格，便于判断当前点击位置
        //竖向上中下0x01-0x02-0x04
        //横向左中右0x10-0x20-0x40
        //判断时分别取pos-x和y判断区域进行叠加
        enum FramelessArea
        {
            FContentArea = 0x00 //内容区域
            ,FLeftArea = 0x10 //左侧
            ,FRightArea = 0x20 //右侧
            ,FTopArea = 0x01 //顶部
            ,FBottomArea = 0x02 //底部
            ,FLeftTopCorner = 0x11 //左上角
            ,FRightTopCorner = 0x21 //右上角
            ,FLeftBottomCorner = 0x12 //左下角
            ,FRightBottomCorner = 0x22 //右下角
        };
    public:
        explicit FramelessHelper(QObject *parent = nullptr);
    
        int getBorderWidth() const;
        void setBorderWidth(int width);
    
        bool getMoveEnable() const;
        void setMoveEnable(bool enable);
    
        bool getMoving() const;
        void setMoving(bool state);
    
        bool getResizeEnable() const;
        void setResizeEnable(bool enable);
    
        bool getResizing() const;
        void setResizing(bool state);
    
        void setWindow(QQuickWindow *newWindow);
        void setTitle(QQuickItem *newTitle);
    
    protected:
        bool eventFilter(QObject *watched, QEvent *event) override;
    
    private:
        //处理窗口相关事件
        void filterWindowEvent(QEvent *event);
        //处理标题栏相关事件
        void filterTitleEvent(QEvent *event);
        //鼠标移动
        void mouseMoveEvent(QMouseEvent *event);
        //判断是否最大化
        bool windowIsMaxed() const;
        //更新鼠标位置
        void updatePosition(const QPoint &pos);
        //判断鼠标位置更新鼠标形状
        void updateCursor(int area);
        //重置为默认鼠标形状
        void resetCuror();
    
    signals:
        void borderWidthChanged();
        void moveEnableChanged();
        void movingChanged();
        void resizeEnableChanged();
        void resizingChanged();
        void windowChanged();
        void titleChanged();
    
    private:
        //边框
        int borderWidth=6;
        //移动标志
        bool moveEnable=true;
        bool moving=false;
        //缩放标志
        bool resizeEnable=true;
        bool resizing=false;
        //暂存鼠标位置信息
        QPoint screenPosTemp=QPoint(0, 0);
        //暂存窗体位置、大小信息
        QRect geometryTemp;
        //当前区域
        FramelessArea cursorArea=FContentArea;
        //窗口-需要绑定Window
        QQuickWindow *window=nullptr;
        //标题栏-需要绑定MouseArea
        QQuickItem *title=nullptr;
    };
    
    #endif // FRAMELESSHELPER_H

#include "FramelessHelper.h"
    
    #include <QCursor>
    #include <QEnterEvent>
    #include <QMouseEvent>
    #include <QDebug>
    
    FramelessHelper::FramelessHelper(QObject *parent)
        : QObject(parent)
    {
    
    }
    
    int FramelessHelper::getBorderWidth() const
    {
        return borderWidth;
    }
    
    void FramelessHelper::setBorderWidth(int width)
    {
        if(borderWidth!=width){
            borderWidth=width;
            emit borderWidthChanged();
        }
    }
    
    bool FramelessHelper::getMoveEnable() const
    {
        return moveEnable;
    }
    
    void FramelessHelper::setMoveEnable(bool enable)
    {
        if(moveEnable!=enable){
            moveEnable=enable;
            emit moveEnableChanged();
        }
    }
    
    bool FramelessHelper::getMoving() const
    {
        return moveEnable&&moving;
    }
    
    void FramelessHelper::setMoving(bool state)
    {
        if(moving!=state){
            moving=moveEnable&&state;
            emit movingChanged();
        }
    }
    
    bool FramelessHelper::getResizeEnable() const
    {
        return resizeEnable;
    }
    
    void FramelessHelper::setResizeEnable(bool enable)
    {
        if(resizeEnable!=enable){
            resizeEnable=enable;
            emit resizeEnableChanged();
        }
    }
    
    bool FramelessHelper::getResizing() const
    {
        return resizeEnable&&resizing;
    }
    
    void FramelessHelper::setResizing(bool state)
    {
        if(resizing!=state){
            resizing=resizeEnable&&state;
            emit resizingChanged();
        }
    }
    
    void FramelessHelper::setWindow(QQuickWindow *newWindow)
    {
        if(newWindow&&newWindow!=window){
            if(window)
                window->removeEventFilter(this);
            window=newWindow;
            window->installEventFilter(this);
            emit windowChanged();
        }
    }
    
    void FramelessHelper::setTitle(QQuickItem *newTitle)
    {
        if(newTitle&&newTitle!=title){
            if(title)
                title->removeEventFilter(this);
            title=newTitle;
            title->installEventFilter(this);
            emit titleChanged();
        }
    }
    
    bool FramelessHelper::eventFilter(QObject *watched, QEvent *event)
    {
        //qDebug()<<watched<<event;
        if(watched==window){
            filterWindowEvent(event);
        }else if(watched==title){
            filterTitleEvent(event);
        }
        return false;
    }
    
    void FramelessHelper::filterWindowEvent(QEvent *event)
    {
        if(!window)
            return;
        switch (event->type()) {
        //case QEvent::CursorChange: break;
        case QEvent::Enter:
            //根据位置更新鼠标样式
            updatePosition(static_cast<QEnterEvent*>(event)->pos());
            break;
        case QEvent::Leave:
            //恢复鼠标样式
            resetCuror();
            break;
        case QEvent::CursorChange:
            //跑到别的区域上了
        case QEvent::UpdateRequest:
            //QExposeEvent的时候会设置为默认样式，这里重置回来
            if(getResizing()||getMoving())
                updateCursor(cursorArea);
            break;
        case QEvent::MouseButtonPress:
            //screenPosTemp = static_cast<QMouseEvent*>(event)->screenPos().toPoint();
            screenPosTemp=QCursor::pos();
            geometryTemp = window->geometry();
            //非边框区域FContentArea
            if (getResizeEnable()&&cursorArea!=FContentArea&&!windowIsMaxed()) {
                //非最大化时点击了边框，且允许缩放
                setResizing(true);
            }
            break;
        case QEvent::MouseButtonRelease:
            geometryTemp = window->geometry();
            //非拖动标题栏时释放鼠标
            if(!getMoving()){
                setResizing(false);
                updatePosition(static_cast<QMouseEvent*>(event)->pos());
            }
            break;
        case QEvent::MouseMove:
            mouseMoveEvent(static_cast<QMouseEvent*>(event));
            break;
        default: break;
        }
    }
    
    void FramelessHelper::filterTitleEvent(QEvent *event)
    {
        if(!window||!title)
            return;
        switch (event->type()) {
        case QEvent::MouseButtonPress:
            //点击标题栏
            if (getMoveEnable()) {
                if (windowIsMaxed()) {
                    //最大化状态下点击标题栏
                }else if(cursorArea==FContentArea){
                    //非边框区域时可以拖动
                    setMoving(true);
                }
            }
            break;
        case QEvent::MouseButtonDblClick:
            //双击标题栏，切换最大和普通大小
            if(windowIsMaxed()){
                window->showNormal();
            }else{
                window->showMaximized();
            }
            break;
        case QEvent::MouseButtonRelease:
            //拖动标题栏时释放鼠标
            if(getMoving()){
                setMoving(false);
                updatePosition(static_cast<QMouseEvent*>(event)->pos());
                QRect geometry=window->geometry();
                //如果拖到了标题栏就最大化
                if(geometry.y()<0){
                    geometry.moveTop(0);
                    window->setGeometry(geometry);
                    window->showMaximized();
                }
            }
            break;
        case QEvent::MouseMove:
            //最大化时拖动标题栏就恢复为普通大小并可拖动
            if (getMoveEnable()&&windowIsMaxed()) {
                QMouseEvent *mouse_event=static_cast<QMouseEvent*>(event);
                const int old_width=window->width();
                const int old_pos=mouse_event->pos().x();
                window->showNormal();
                QRect geometry=window->geometry();
                const QPoint cursor_pos=QCursor::pos();
                //标题栏上，鼠标所在x按照原来的比例设置，y不变
                geometry.moveLeft(cursor_pos.x()-geometry.width()*(old_pos/(double)old_width));
                geometry.moveTop(cursor_pos.y()-title->height()/2);
                window->setGeometry(geometry);
                geometryTemp=geometry;
                setMoving(true);
            }
            break;
        default: break;
        }
    }
    
    void FramelessHelper::mouseMoveEvent(QMouseEvent *event)
    {
        if(getMoving()){
            //按住标题栏拖动
            event->accept();
            const QPoint move_vec=QCursor::pos()-screenPosTemp;
            window->setGeometry(QRect(geometryTemp.topLeft()+move_vec,geometryTemp.size()));
        }else if(getResizing()){
            //按住边框拖拽大小
            event->accept();
            const QPoint move_vec=QCursor::pos()-screenPosTemp;
            //每个方向单独计算
            //然后判断计算出来的pos和size是否有效,大于最小尺寸
            //因为每个方向固定的边不一样，所以单独处理
            QRect new_geometry=geometryTemp;
            //横项调整
            switch (cursorArea&0xF0) {
            case FLeftArea: //左侧
                new_geometry.setLeft(geometryTemp.left()+move_vec.x());
                if (new_geometry.width()<window->minimumWidth()){
                    new_geometry.setLeft(geometryTemp.right()-window->minimumWidth());
                }
                break;
            case FRightArea: //右侧
                new_geometry.setRight(geometryTemp.right()+move_vec.x());
                if (new_geometry.width()<window->minimumWidth()){
                    new_geometry.setRight(geometryTemp.left()+window->minimumWidth());
                }
                break;
            default: break;
            }
            //竖向调整
            switch (cursorArea&0x0F) {
            case FTopArea: //顶部
                new_geometry.setTop(geometryTemp.top()+move_vec.y());
                if(new_geometry.height()<window->minimumHeight())
                    new_geometry.setTop(geometryTemp.bottom()-window->minimumHeight());
                break;
            case FBottomArea: //底部
                new_geometry.setBottom(geometryTemp.bottom()+move_vec.y());
                if(new_geometry.height()<window->minimumHeight())
                    new_geometry.setBottom(geometryTemp.top()+window->minimumHeight());
                break;
            default: break;
            }
            window->setGeometry(new_geometry);
        }else if(getResizeEnable()){
            //根据位置更新鼠标样式
            updatePosition(event->pos());
        }
    }
    
    bool FramelessHelper::windowIsMaxed() const
    {
        //判断窗口是否最大化
        return (window&&(window->visibility()==QWindow::Maximized
                         ||window->visibility()==QWindow::FullScreen));
    }
    
    void FramelessHelper::updatePosition(const QPoint &pos)
    {
        if(!window||windowIsMaxed())
            return;
        //根据鼠标坐标判断所在区域
        int pos_area=cursorArea;
        //可拖拽大小时才判断
        if (resizeEnable)
        {
            if (pos.x()<borderWidth) {
                pos_area=0x10;
            }else if (pos.x()>window->width()-borderWidth) {
                pos_area=0x20;
            }else {
                pos_area=0x00;
            }
            if (pos.y()<borderWidth) {
                pos_area+=0x01;
            }else if (pos.y()>window->height()-borderWidth) {
                pos_area+=0x02;
            }else {
                pos_area+=0x00;
            }
        }
        if (pos_area == cursorArea)
            return;
        cursorArea=(FramelessArea)pos_area;
        updateCursor(cursorArea);
    }
    
    void FramelessHelper::updateCursor(int area)
    {
        //根据鼠标悬停位置更换鼠标形状
        switch (area) {
        case FLeftArea:
        case FRightArea:
            window->setCursor(Qt::SizeHorCursor);
            break;
        case FTopArea:
        case FBottomArea:
            window->setCursor(Qt::SizeVerCursor);
            break;
        case FLeftTopCorner:
        case FRightBottomCorner:
            window->setCursor(Qt::SizeFDiagCursor);
            break;
        case FRightTopCorner:
        case FLeftBottomCorner:
            window->setCursor(Qt::SizeBDiagCursor);
            break;
        default:
            window->setCursor(Qt::ArrowCursor);
            break;
        }
    }
    
    void FramelessHelper::resetCuror()
    {
        if(!window)
            return;
        //重置为默认鼠标样式
        cursorArea=FContentArea;
        window->setCursor(Qt::ArrowCursor);
    }

import QtQuick 2.15
    import QtQuick.Window 2.15
    import QtQuick.Controls 2.15
    import GongJianBo 1.0
    
    //演示FramelessHelper的使用
    Window {
        id: root
        width: 640
        height: 480
        minimumHeight: 200
        minimumWidth: 500
        visible: true
        title: qsTr("Qml 简易无边框 (by 龚建波)")
        flags: Qt.Window
               |Qt.FramelessWindowHint
               |Qt.WindowMinMaxButtonsHint
    
        FramelessHelper{
            window: root
            title: title_area
            borderWidth: 6
        }
    
        //边框
        Rectangle{
            anchors.fill: parent
            border.color: "gray"
            border.width: 6
        }
    
        //标题栏
        MouseArea{
            id: title_area
            height: 50
            width: root.width
            Rectangle{
                anchors.fill: parent
                color: "darkCyan"
                opacity: 0.5
            }
    
            Text{
                anchors{
                    left: parent.left
                    verticalCenter: parent.verticalCenter
                    margins: 20
                }
                font.pixelSize: 20
                color: "white"
                text: root.title
            }
    
            Row{
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                anchors.margins: 10
                spacing: 10
    
                Button{
                    width: 70
                    height: 30
                    text: "min"
                    onClicked: root.showMinimized()
                }
                Button{
                    width: 70
                    height: 30
                    text: "max"
                    onClicked: {
                        if(root.visibility==Window.Maximized)
                            root.showNormal()
                        else
                            root.showMaximized()
                    }
                }
                Button{
                    width: 70
                    height: 30
                    text: "close"
                    onClicked: Qt.quit()
                }
            }
        }
    
        ListView{
            anchors.fill: parent
            anchors.margins: 20
            anchors.topMargin: 70
            clip: true
            model: 50
            spacing: 5
            delegate: Rectangle{
                height: 40
                width: ListView.view.width
                border.color: "gray"
                Text {
                    anchors.centerIn: parent
                    text: index
                }
            }
        }
    }

[https_github.com_jaredtao_TaoQuick]: https://github.com/jaredtao/TaoQuick
[20201115202516622.gif]: /images/20221120/c44d47f82bc8433da9824e6b62de99a9.png
[https_github.com_gongjianbo_MyTestCode_tree_master_Qml_QmlFramelessWindow]: https://github.com/gongjianbo/MyTestCode/tree/master/Qml/QmlFramelessWindow