qml实现自定义标题栏按钮

自定义的标题栏按钮是由Rectangle来实现的，在Rectangle中需要4张图片，分别在鼠标进入按钮区、鼠标离开按钮区（正常状态下）、鼠标按下和鼠标释放时所加载的图片。下面是实现自定义按钮的代码(我把它放在了一个MaxButton.qml文件中)：

Rectangle {

    radius: 10      //设置圆角半径

    property string normalPath              //按钮正常和鼠标离开按钮区后的图片路径

    property string enterPath               //鼠标进入按钮区域时的图片路径

    property string pressPath               //鼠标按下时的图片路径

    property string releasedPath            //鼠标释放后的图片路径

    signal buttonClick()                    //鼠标点击时发送此信号

    Image {

        id: background

        anchors.fill: parent

        source: normalPath

    }

    MouseArea {                             //处理鼠标事件

        anchors.fill: parent

        hoverEnabled: true                  //处理没有按下时的鼠标事件

        onClicked: buttonClick()            //点击按钮时发送buttonClick信号

        onEntered: background.source = enterPath              //鼠标进入按钮区

        onPressed: background.source = pressPath              //鼠标按下

        onExited: background.source = normalPath               //鼠标离开按钮区

        onReleased: background.source = releasedPath             //鼠标释放

    }

}

可以用它来实现标题栏中的关闭和最小化按钮。如果要想用它来实现最大化按钮还需要在他的父类中添加一些东西。因为窗口有两种状态，一种是正常大小，一种是最大窗口，所以要先在父类中判断窗口此时处在什么样的状态下，然后在将最大化按钮展现出不同的效果。以下是我在用它实现最大化按钮时在父类中的代码：

/**定义一个windowStatus属性来保存此时窗口的状态，

  *等于true时说明窗口此时处于正常大小，

  *等于false时说明窗口此时处于最大化状态

  **/

property bool windowStatus: true MaxButton {//定义最大化按钮

    id: maxButton

    width: 35

    height: 25

    anchors.top: parent.top

    anchors.right: closeButton.left

    //因为加载的窗口默认正常大小，所以初始化按钮时加载窗口处于正常状态下的图片

    normalPath: "qrc:/image/全屏_2.png"

    enterPath: "qrc:/image/全屏_3.png"

    pressPath: "qrc:/image/全屏_1.png"

    releasedPath: "qrc:/image/全屏_2.png"

    onButtonClick: maxButtonClicket()

}

function maxButtonClicket() {

    if(windowStatus) {//检查此时窗口的状态

        //windowStatus=true说明窗口此时处于正常大小

        windowStatus = false    //改变窗口状态

        mainWindow.showMaximized()             //将窗口最大化

        //重新加载窗口最大化后的最大化按钮图标

        maxButton.normalPath = "qrc:/image/窗口_2.png"

        maxButton.enterPath = "qrc:/image/窗口_3.png"

        maxButton.pressPath = "qrc:/image/窗口_1.png"

        maxButton.releasedPath = "qrc:/image/窗口_2.png"

    }else { //windowStatus=false说明窗口此时处于最大化

        windowStatus = true

        mainWindow.showNormal()    //将窗口改为正常大小

        maxButton.normalPath = "qrc:/image/全屏_2.png"

        maxButton.enterPath = "qrc:/image/全屏_3.png"

        maxButton.pressPath = "qrc:/image/全屏_1.png"

        maxButton.releasedPath = "qrc:/image/全屏_2.png"

    }

}

巴特西

qml实现自定义标题栏按钮

最新文章

热门文章