QML 自定义菜单及按钮的应用 [转]

最新推荐文章于 2024-10-10 17:47:01 发布

转载最新推荐文章于 2024-10-10 17:47:01 发布 · 541 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://edu.youkuaiyun.com/learn/30741

QT 专栏收录该内容

110 篇文章

订阅专栏

本文介绍了如何使用QML语言创建自定义按钮，并实现颜色变化和状态切换。通过实例展示了如何在布局中应用这些自定义控件，包括正常、鼠标悬停和按下状态。同时涵盖了添加按钮到项目中的步骤和属性设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

QML 自定义菜单及按钮的应用 [转]

复制一份qrc，重命名：

工程文件中添加，然后右键项目执行qmake：

自定义按钮（属性的应用，接口）：

import QtQuick 2.14
import QtQuick.Controls 2.14

Button {
    id: control
    property color normalColor: "#E4E4E4"
    property color hoveredColor: "#F65050"
    property color iconHoveredColor: "white"
    property color pressedColor: "#FFAAAA"
    states: [
        State {
            name: "pressed"
            when: control.down
            PropertyChanges {
                target: bg
                color: control.pressedColor
            }
        },
        State {
            name: "hovered"
            when: control.hovered
            PropertyChanges {
                target: bg
                color: control.hoveredColor
            }
            PropertyChanges {
                target: control
                icon.color: control.iconHoveredColor
            }
        }
    ]
    background: Rectangle {
        id: bg
        color: control.normalColor
    }
}

布局：

import QtQuick.Layouts 1.14

Rectangle {
        id: appContent
        anchors.fill: parent
        anchors.margins: gConfig.isMaxed ? 0 : 10
        color: "#ffffff"
        border.color: "#DEDEDE"
        ColumnLayout {
            anchors.fill: parent
            spacing: 0
            Header {
                Layout.fillWidth: true
                height: 30
            }
            Item {
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
        }
    }

自定义按钮的应用：

import QtQuick 2.14
import QtQuick.Controls 2.14
import "../widgets"

Rectangle {
    height: parent.height
    color: "#E4E4E4"
    MoveArea {
        height: parent.height
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.rightMargin: 135
        dispatcher: appWindow
    }
    Label {
        anchors.left: parent.left
        anchors.leftMargin: 10
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        width: 350
        verticalAlignment: Label.AlignVCenter
        text: qsTr("Qt Quick")
        font.pixelSize: 12
        font.family: "microsoft yahei"
    }

    CButton {
        id: minWindow
        width: 45
        height: 30
        hoveredColor: "#DEDEDE"
        pressedColor: "#CCCCCC"
        iconHoveredColor: "#666666"
        anchors.right: parent.right
        anchors.rightMargin: 90
        display: AbstractButton.IconOnly
        icon.source: "../../assets/svgs/min.svg"
        icon.width: 13
        icon.height: 1
        onClicked: {
            appWindow.showMinimized()
            gConfig.isMaxed = false
        }
    }
    CButton {
        id: normalWindow
        visible: gConfig.isMaxed
        width: 45
        height: 30
        hoveredColor: "#DEDEDE"
        pressedColor: "#CCCCCC"
        iconHoveredColor: "#666666"
        anchors.right: closeBtn.left
        display: AbstractButton.IconOnly
        icon.source: "../../assets/svgs/normal.svg"
        icon.width: 12
        icon.height: 12
        onClicked: {
            appWindow.showNormal()
            gConfig.isMaxed = false
        }
    }
    CButton {
        visible: !gConfig.isMaxed
        id: maxWindow
        width: 45
        height: 30
        hoveredColor: "#DEDEDE"
        pressedColor: "#CCCCCC"
        iconHoveredColor: "#666666"
        anchors.right: closeBtn.left
        display: AbstractButton.IconOnly
        icon.source: "../../assets/svgs/max.svg"
        icon.width: 11
        icon.height: 11
        onClicked: {
            appWindow.showMaximized()
            gConfig.isMaxed = true
        }
    }
    CButton {
        id: closeBtn
        width: 45
        height: 30
        anchors.right: parent.right
        display: AbstractButton.IconOnly
        icon.source: "../../assets/svgs/close.svg"
        icon.width: 10
        icon.height: 10
        onClicked: appWindow.close()
    }
}