自定义标题栏和拖拽边框调整大小——qml

已于 2023-12-20 10:01:30 修改
阅读量3k 收藏 27
点赞数 4
分类专栏： qml 文章标签： qt 开发语言
于 2021-12-21 14:48:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaopei_yan/article/details/122060366
版权

前言

QtWidgets开发实现这两个功能网上有很多，qml却有很少，但是要想用qml去做好看的桌面端，这些工作就必不可少。

这篇文章参考的是网上的一篇博客QtQuick实现无边框窗口的拉伸，拖拽和自定义标题栏 - 简书 (jianshu.com)

，在此基础上进行了一些修改。

自定义标题栏

先说一下标题栏一般有什么功能：

1.显示标题

2.最小化，最大化（还原）、关闭

3.按着鼠标左键，可移动窗口（当时最大化窗口时，还原为常态），双击标题栏放大或还原窗口

由于我应用的标题是图片显示的，所以代码中就没有Text等控件来书写标题，所以代码中只有2、3功能的代码。

对了，在main.qml文件里别忘了设置窗口为无边框(Qt.FramelessWindowHint)

Window {
    id:mainWindow;
    width: 1500;
    height: 846;
    visible: true
    flags: Qt.Window | Qt.FramelessWindowHint;
}

2功能：最小化和关闭按钮都比较简单，写个按钮，直接调用窗口函数就可以。最大化（还原）按钮比较麻烦一些，就是图标切换麻烦些，我用属性maxImg、maxImg_hover和maxImg_pressed

代表最大化（还原）按钮的底图地址，通过切换属性的值来改变最大化时按钮的底图和常态时按钮的底图

3功能，逻辑与QtWidgets开发的一样，只是有不同的语言实现了。

以下是TitleBar.qml的全部内容：

import QtQuick 2.7
import QtQuick.Controls 2.13
import QtQuick.Window 2.2

Item{
    z:1;
    height: 100*hr;
    property bool  isMaximized: false;

    MouseArea{
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton //只处理鼠标左键
        property bool   isDoubleClicked:false
        property point clickPos: "0,0"
         onPressed:
         {
             isDoubleClicked = false;
             clickPos = Qt.point(mouse.x,mouse.y)
         }
         onPositionChanged: {
             if(!isDoubleClicked && pressed && mainWindow.visibility !== Window.Maximized && mainWindow.visibility !== Window.FullScreen) {
                 var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
                 mainWindow.x += delta.x
                 mainWindow.y += delta.y
             }
             if(mainWindow.visibility === Window.Maximized && pressed && !isDoubleClicked)
             {
                 isMaximized = false;
                 mainWindow.showNormal();
                 normBtn.maxImg="qrc:/res/max.png";
                 normBtn.maxImg_pressed="qrc:/res/max_pressed.png";
                 normBtn.maxImg_hover="qrc:/res/max_hover.png";
             }
         }
         onDoubleClicked :
         {
             isDoubleClicked = true; // 这个时候一定不能响应onPositionChanged不然会一直置顶。
             if(isMaximized){
                 isMaximized = false;
                 mainWindow.showNormal();
                 normBtn.maxImg="qrc:/res/max.png";
                 normBtn.maxImg_pressed="qrc:/res/max_pressed.png";
                 normBtn.maxImg_hover="qrc:/res/max_hover.png";
             }else{
                 isMaximized = true;
                 mainWindow.showMaximized();
                 normBtn.maxImg="qrc:/res/restore.png";
                 normBtn.maxImg_pressed="qrc:/res/restore_pressed.png";
                 normBtn.maxImg_hover="qrc:/res/restore_hover.png";
             }
         }
     }

    Button{
        id:closeBtn
        anchors{right: parent.right; rightMargin: 51*wr; top: parent.top;
                topMargin: 23*wr;}
        width: 65*wr; height:65*wr;
        hoverEnabled : true;

        background: Rectangle{
            color: Qt.rgba(0,0,0,0);
            Image {
                anchors.fill: parent;
                source: closeBtn.hovered ? (closeBtn.pressed ? "qrc:/res/close_pressed.png" :
                       "qrc:/res/close_hover.png") : "qrc:/res/close.png";
            }
        }

        onClicked: {
            mainWindow.close()
        }
    }
    Button{
        id: normBtn;
        property string maxImg: "qrc:/res/max.png";
        property string maxImg_hover: "qrc:/res/max_hover.png";
        property string maxImg_pressed: "qrc:/res/max_pressed.png";

        anchors{right: closeBtn.left; rightMargin: 10*wr; top: parent.top;
                topMargin: 23*wr;}
        width: 65*wr; height:65*wr;
        hoverEnabled : true
        background: Rectangle{
            color: Qt.rgba(0,0,0,0);
            Image {
                id:normBtnBg;
                anchors.fill: parent;
                source: normBtn.hovered ? (normBtn.pressed ? normBtn.maxImg_pressed:
                       normBtn.maxImg_hover) : normBtn.maxImg;
            }
        }
        onClicked:{
            if(isMaximized){
                isMaximized = false;
                mainWindow.showNormal();
                normBtn.maxImg="qrc:/res/max.png";
                normBtn.maxImg_pressed="qrc:/res/max_pressed.png";
                normBtn.maxImg_hover="qrc:/res/max_hover.png";
            }else{
                isMaximized = true;
                mainWindow.showMaximized();
                normBtn.maxImg="qrc:/res/restore.png";
                normBtn.maxImg_pressed="qrc:/res/restore_pressed.png";
                normBtn.maxImg_hover="qrc:/res/restore_hover.png";
            }
        }
    }
    Button{
        id: minBtn
        anchors{right: normBtn.left; rightMargin: 10*wr; top: parent.top;
                topMargin: 23*wr;}
        width: 65*wr; height:65*wr;
        hoverEnabled : true
        background: Rectangle{
            color: Qt.rgba(0,0,0,0);
            Image{
                anchors.fill: parent;
                source: minBtn.hovered ? (minBtn.pressed ? "qrc:/res/min_pressed.png" :
                        "qrc:/res/min_hover.png") : "qrc:/res/min.png";
            }
        }
        onClicked:{
            mainWindow.showMinimized();
        }
    }
}

无边框实现拖拽边沿改变大小

这部分代码和参考博客的不同的是，鼠标的形状的改变是我用qml实现的，而不是用c++.

ResizeItem.qml

import QtQuick 2.0
import QtQuick.Window 2.2

Item {
    property int enableSize: 4
    property bool isPressed: false
    property point customPoint

    //左上角
    Item {
        id: leftTop
        width: enableSize
        height: enableSize
        anchors.left: parent.left
        anchors.top: parent.top
        z: 1000
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true

            onPressed: press(mouse)
            cursorShape: containsMouse?Qt.SizeFDiagCursor:Qt.ArrowCursor;
            onReleased: release()
            onPositionChanged: positionChange(mouse, -1, -1)
        }
    }

    //Top
    Item {
        id: top
        height: enableSize
        anchors.left: leftTop.right
        anchors.right: rightTop.left
        anchors.top: parent.top
        z: 1000
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true

            onPressed: press(mouse)
            cursorShape: containsMouse?Qt.SizeVerCursor:Qt.ArrowCursor;
            onReleased: release()

            onMouseYChanged: positionChange(Qt.point(customPoint.x, mouseY), 1, -1)
        }
    }

    //右上角
    Item {
        id: rightTop
        width: enableSize
        height: enableSize
        anchors.right: parent.right
        anchors.top: parent.top
        z: 1000
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true

            onPressed: {
                press(mouse);
            }
            cursorShape: containsMouse?Qt.SizeBDiagCursor:Qt.ArrowCursor;
            onReleased: release()
            onPositionChanged: positionChange(mouse, 1, -1)
        }
    }

    //Left
    Item {
        id: left
        width: enableSize
        anchors.left: parent.left
        anchors.top: leftTop.bottom
        anchors.bottom: leftBottom.top
        z: 1000
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true

            onPressed: press(mouse)
            cursorShape: containsMouse?Qt.SizeHorCursor:Qt.ArrowCursor;
            onReleased: release()

            onMouseXChanged: positionChange(Qt.point(mouseX, customPoint.y), -1, 1)
        }
    }

    //Center - 5
    Item {
        id: center
        anchors.left: left.right
        anchors.right: right.left
        anchors.top: top.bottom
        anchors.bottom: bottom.top
        MouseArea {
            anchors.fill: parent

            property point clickPos
            onPressed: clickPos = Qt.point(mouse.x,mouse.y)
            onPositionChanged: {
                if(pressed && mainWindow.visibility !== Window.Maximized && mainWindow.visibility !== Window.FullScreen) {
                    var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
                    mainWindow.x += delta.x
                    mainWindow.y += delta.y
                }
            }
        }
    }

    //Right
    Item {
        id: right
        width: enableSize
        anchors.right: parent.right
        anchors.top: rightTop.bottom
        anchors.bottom: rightBottom.top
        z: 1000
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true

            onPressed: press(mouse)
            cursorShape: containsMouse?Qt.SizeHorCursor:Qt.ArrowCursor;
            onReleased: release()

            onMouseXChanged: positionChange(Qt.point(mouseX, customPoint.y), 1, 1)
        }
    }

    //左下角
    Item {
        id: leftBottom
        width: enableSize
        height: enableSize
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        z: 1000
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true

            onPressed: press(mouse)
            cursorShape: containsMouse?Qt.SizeBDiagCursor:Qt.ArrowCursor;
            onReleased: release()

            onPositionChanged: positionChange(mouse, -1, 1)
        }
    }

    //bottom
    Item {
        id: bottom
        height: enableSize
        anchors.left: leftBottom.right
        anchors.right: rightBottom.left
        anchors.bottom: parent.bottom
        z: 1000
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true

            onPressed: press(mouse)
            cursorShape: containsMouse?Qt.SizeVerCursor:Qt.ArrowCursor;
            onReleased: release()

            onMouseYChanged: positionChange(Qt.point(customPoint.x, mouseY), 1, 1)
        }
    }

    //右下角
    Item {
        id:rightBottom
        width: enableSize
        height: enableSize
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        z: 1000
        MouseArea {
            anchors.fill: parent
            hoverEnabled: true
            cursorShape: containsMouse?Qt.SizeFDiagCursor:Qt.ArrowCursor;
            onPressed: press(mouse)
            onReleased: release()

            onPositionChanged: positionChange(mouse,1,1)
        }
    }

    function press(mouse) {
        isPressed = true
        customPoint = Qt.point(mouse.x, mouse.y)
    }

    function release() {
        isPressed = false
        //customPoint = undefined
    }

    function positionChange(newPosition, directX/*x轴方向*/, directY/*y轴方向*/) {
        if(!isPressed) return

        var delta = Qt.point(newPosition.x-customPoint.x, newPosition.y-customPoint.y)
        var tmpW,tmpH

        if(directX >= 0)
            tmpW = mainWindow.width + delta.x
        else
            tmpW = mainWindow.width - delta.x

        if(directY >= 0)
            tmpH = mainWindow.height + delta.y
        else
            tmpH = mainWindow.height - delta.y

        if(tmpW < mainWindow.minimumWidth) {
            if(directX < 0)
                mainWindow.x += (mainWindow.width - mainWindow.minimumWidth)
            mainWindow.width = mainWindow.minimumWidth
        }
        else {
            mainWindow.width = tmpW
            if(directX < 0)
                mainWindow.x += delta.x
        }

        if(tmpH < mainWindow.minimumHeight) {
            if(directY < 0)
                mainWindow.y += (mainWindow.height - mainWindow.minimumHeight)
            mainWindow.height = mainWindow.minimumHeight
        }
        else {
            mainWindow.height = tmpH
            if(directY < 0)
                mainWindow.y += delta.y
        }
    }
}

 main.qml里加ResizeItem后的代码

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    id:mainWindow;
    width: 1500;
    height: 846;
    visible: true
    flags: Qt.Window | Qt.FramelessWindowHint;

    title: qsTr("RX-Box");

    ResizeItem {
        enableSize: 8
        anchors.fill: parent
        focus: true

        Image {
            id: bgImg;
            z:1;
            anchors.fill: parent;
            source: "qrc:/res/bg.png";
        }
        TitleBar{
            id:titleBar
            z:mystackview.z+1;
            anchors{left: parent.left;right: parent.right; top: parent.top;}
        }


    Component.onCompleted: {
        mainWindow.show();
    }
}

结束语

就这样吧~

十年之少
关注
  • 4
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
102.qt qml-最全Table交互之多列固定、行列拖拽、自定义委托、标题交互使用教程
抵抗时间扭曲，坚持做一件有意义的事
07-12 444
qt qml-最全Table交互之多列固定、行列拖拽、自定义委托、标题交互、使用教程
MySQL相关知识点（原理、面试、工作）
本人拙笔，记录一些开发、面试中的笔记，希望能帮到你。
03-04 806
MySQL相关常识欢迎使用Markdown234新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown234 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mark
qml实现自定义标题栏按钮
weixin_30847865的博客
06-29 359
自定义的标题栏按钮是由Rectangle来实现的，在Rectangle中需要4张图片，分别在鼠标进入按钮区、鼠标离开按钮区（正常状态下）、鼠标按下和鼠标释放时所加载的图片。下面是实现自定义按钮的代码(我把它放在了一个MaxButton.qml文件中)： Rectangle { radius: 10 //设置圆角半径 property string ...
qml自定义标题栏
weixin_30755709的博客
06-29 419
要实现自定义的标题栏只需在原来的窗口的基础上创建一个Rectangle并将其定位在窗口顶部即可，实现代码如下： ApplicationWindow { id: mainWindow visible: true width: 900 height: 600 title: qsTr("Hello World") flags: Qt....
QML实现自定义标题栏
qq_20388417的博客
07-18 2224
最近在做音乐播放器，系统提供的标题栏也太丑了，所以准备自定义一个。 废话不多说，直接上效果图： 播放滚动条有点丑，下一步打算盘它。 上代码： Window { id: root visible: true width: 480 height: 100 title: qsTr("音乐播放器") flags: Qt.Window | ...
QML自定义标题栏
qq_34248512的博客
11-26 1578
1. 去掉系统标题栏 flags: Qt.Window | Qt.FramelessWindowHint 2.增加拖拽效果 MouseArea { anchors.fill: parent acceptedButtons: Qt.LeftButton property point clickPos: "0,0" //此处是为了增加了一点颜色动画 onReleased: titleBar.state= "Re
Qt qml实现无标题栏菜单栏窗口 鼠标拖动代码
04-13
最后，`FramelessWindowHint`在QML中是`Window`组件的标志之一，用于指示窗口应该去除边框和标题栏。在上述示例中，我们通过将`flags`属性设置为`Qt.FramelessWindowHint`来实现这一效果。然而，为了确保窗口可以被...
qt quick qml无标题栏圆角窗口程序框架，自绘最大化、最小化、关闭按钮，自由拖拽、移动
05-17
qml实现无边框窗口，开发环境需要qt5.15支持。 实现的功能：1.无边框自绘窗口。2.实现最大化、最小化、关闭按钮。3.完美实现窗口拖拽移动。4.完美实现窗口拉伸。5.边框实现阴影效果。6.边框四角圆角切割
QML c++交互 无边框 透明 可以拖动的 窗口的 demo
03-16
由于QML中的`Window`组件默认不允许用户通过点击非标题栏区域来移动窗口，所以我们需要自定义行为。这通常涉及在QML中添加鼠标事件处理器，或者在C++中扩展`QQuickWindow`类并重写相应的函数。 在QML中，可以这样...
QML实现窗口无边框以及可拖动拉伸
06-22
这样，窗口就会失去默认的边框和标题栏。 ```qml import QtQuick 2.0 import QtQuick.Controls 2.5 ApplicationWindow { id: mainWindow width: 640 height: 480 flags: Qt.FramelessWindowHint // 设置无边框...
Qt 实现 自定义窗口标题栏
12-07
以上代码用Qt实现了自定义窗口标题栏，非常实用，提供了窗口图标、窗口标题、最小化、最大化、关闭按钮等几个部分。可以应用到每一个窗口中去，保持每个窗口外观的一致性，同时自定义的标题栏也比系统自带的漂亮很多。
qt5 自定义标题栏
03-20
用qt5写的自定义标题栏，做相应的改变也可以在其他版本运行，去掉了系统默认的标题栏，自己实现关闭，最大化，最小化，双击最大化最小化功能，这对标题栏的美化有帮助
Qt 5.11 无边框可拖动 可改变大小窗口
11-19
QWidget 无边框，可拖动，可改变大小窗口。代码简单可复用。主窗口，子窗口都可以使用。
Qt5实现无边框可移动可拉伸靠边自动分屏的自定义窗体
09-12
代码大部分是网上东拼西凑出来的， 可以实现无边框的自定义窗体，可以拖动，可以拉伸，可以靠近屏幕边缘自动停靠分屏，最小化有渐变动画效果，介绍blog地址：...
QML实现自定义标题栏按钮
最新发布
QtCompany的博客
06-25 384
可以用它来实现标题栏中的关闭和最小化按钮。如果要想用它来实现最大化按钮还需要在他的父类中添加一些东西。因为窗口有两种状态，一种是正常大小，一种是最大窗口，所以要先在父类中判断窗口此时处在什么样的状态下，然后在将最大化按钮展现出不同的效果。自定义的标题栏按钮是由Rectangle来实现的，在Rectangle中需要4张图片，分别在鼠标进入按钮区、鼠标离开按钮区（正常状态下）、鼠标按下和鼠标释放时所加载的图片。
Qt自定义标题栏（可拖动标题栏编辑修改窗口大小）
weixin_46246664的博客
06-06 6427
记录下Qt的自定义标题栏
【QT 5 设置自定义标题栏+学习：《QT实现鼠标拖动调整窗口大小》+基础样例】
qq_22146161的博客
10-26 1048
然后我们在widget.ui文件内添加相关控件。（1）加入widget，在widget内加入一个label控件，并且改变widget布局。（2）增加3个按键控件，弹簧，与修改label名称。作为基本样例，它仍有很多要改善地方，可能不是在这篇里写的，有更好的方式，也会后续弄。
Qt Quick 5.2 开发笔记3-------qml界面之自定义TitleBar
老菜原创
03-07 5906
搞完了c++和QML的交互问题，接下去，终于可以放心开始做界面 先唱一首歌， 美工产品我们去哪里呀 有我在就天不怕地不怕 美工美工我是你的蓝图 一直陪你搞不清楚 产品产品我们去哪里呀 你就是我的天大和地大 程序程序时间的手一挥 你是永远的稀里糊涂 对了，我们这边产品经理兼美工兼测试兼技术支持兼…. 反正是几个小姑娘，她们的想法老在变，但变来变去，一点不会变：就是基本的显示组件。。哥就不等她们
qml 多界面切换——qml
xiaopei_yan的博客
04-19 6952
前言 无论用什么语言开发，稍微复杂点的界面，都会涉及到多界面切换。 之前用QtWidgets开发时，我曾写过一篇博客，现在我用qml开发移动端，觉得也有必要记录一下多界面切换这个知识点。 界面切换的几种方式 多界面切换根据不同的场合，可用不同的切换方式，当然，你非要只用一种方式也是可以的，这个都没规矩，你怎么方便怎么来。下面我列举我切换界面的方式和场合： StackView push/popComponent 我感觉最常用的就是此类了，StackView像一个队列似的，将界面压（push）进去.
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值