qml自定义标题栏

要实现自定义的标题栏只需在原来的窗口的基础上创建一个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)
            }
        }
    }
}
posted @ 2015-06-29 13:25  xwq--  阅读(2682)  评论(0编辑  收藏  举报