欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

qml自定义标题栏

程序员文章站 2022-07-13 23:46:48
...

要实现自定义的标题栏只需在原来的窗口的基础上创建一个Rectangle并将其定位在窗口顶部即可,实现代码如下:

ApplicationWindow {
    id: mainWindow
    visible: true
    width: 900
    height: 600
    title: qsTr("Hello World")
    flags: Qt.Window | Qt.FramelessWindowHint   //去标题栏

    Rectangle {
        id: mainTitle                       //创建标题栏
        anchors.top: parent.top             //对标题栏定位
        anchors.left: parent.left
        anchors.right: parent.right
        height: 25                          //设置标题栏高度
        color: "#00A600"                    //设置标题栏背景颜色
    }
}

以上代码并未实现在鼠标点击标题栏是对窗口进行拖动,下面的代码添加了鼠标拖动效果:

ApplicationWindow {
    id: mainWindow
    visible: true
    width: 900
    height: 600
    title: qsTr("Hello World")
    flags: Qt.Window | Qt.FramelessWindowHint   //去标题栏

    property int mainWindowX //用来存储主窗口x坐标
    property int mainWindowY //存储窗口y坐标
    property int xMouse //存储鼠标x坐标
    property int yMouse //存储鼠标y坐标

    Rectangle {
        id: mainTitle                       //创建标题栏
        anchors.top: parent.top             //对标题栏定位
        anchors.left: parent.left
        anchors.right: parent.right
        height: 25                          //设置标题栏高度
        color: "#00A600"                    //设置标题栏背景颜色

        MouseArea { //为窗口添加鼠标事件
            anchors.fill: parent
            acceptedButtons: Qt.LeftButton //只处理鼠标左键
            onPressed: { //接收鼠标按下事件
                xMouse = mouseX
                yMouse = mouseY
                mainWindowX = mainWindow.x
                mainWindowY = mainWindow.y
            }
            onPositionChanged: { //鼠标按下后改变位置
                mainWindow.x = mainWindowX + (mouseX - xMouse)
                mainWindow.y = mainWindowX + (mouseY - yMouse)
            }
        }
    }
}