Qt/QML学习-MenuBar&ToolBar

QML学习

main.qml

复制代码
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("MenuBar&ToolBar")
    // 菜单栏
    MenuBar {
        id: menuBar
        contentWidth: parent.width
        // 绘制菜单栏背景
        background: Rectangle {
            color: "lightGray"
            Rectangle {
                width: parent.width
                height: 1
                anchors.bottom: parent.bottom
                color: "black"
            }
        }
        // 菜单选项代理
        delegate: MenuBarItem {
            // 绘制菜单选项背景
            background: Rectangle {
                color: highlighted? "black": "gray"
                border.width: 1
            }
            // 绘制菜单选项内容
            contentItem: Text {
                font.pointSize: 15
                color: "white"
                text: menu.title
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
            }
        }

        Menu {
            id: menu
            title: "菜单1"
            // 绘制每个选项视图
            delegate: MenuItem {
                id: menuItem
                // 绘制选项展开箭头
                arrow: Canvas  {
                    x: parent.width - width
                    implicitWidth: 40
                    implicitHeight: 40
                    visible: menuItem.subMenu
                    onPaint: {
                        var ctx = getContext("2d")
                        ctx.moveTo(12, 12)
                        ctx.lineTo(width - 12, height / 2)
                        ctx.lineTo(12, height - 12)
                        ctx.closePath()
                        ctx.fill()
                    }
                }
                // 绘制选项指示器
                indicator: Rectangle {
                    width: 24       // 14 + 10
                    height: 20
                    anchors.verticalCenter: parent.verticalCenter
                    color: "transparent"
                    Rectangle {
                        width: 14
                        height: 14
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left
                        anchors.leftMargin: 10
                        visible: menuItem.checked
                        color: "black"
                        radius: 7
                    }
                }
                // 绘制选项内容视图
                contentItem: Text {
                    leftPadding: menuItem.indicator.width
                    rightPadding: menuItem.arrow.width
                    text: menuItem.text
                    font.pointSize: 15
                    opacity: enabled ? 1.0 : 0.3
                    color: menuItem.highlighted ? "white" : "black"
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                    elide: Text.ElideRight
                }
                // 绘制选项背景视图
                background: Rectangle {
                    implicitWidth: 200
                    implicitHeight: 40
                    opacity: enabled ? 1 : 0.3
                    color: menuItem.highlighted ? "gray" : "transparent"
                }
            }
            Action {
                text: "选项1"
                checkable: true
                checked: true
            }
            MenuSeparator {}
            Action {
                text: "选项2"
            }
            Menu{
                title: "选项3"
                Action{ text: "选项4" }
                Action{ text: "选项5" }
            }
        }

        Menu {
            title: "About"
            Action {
                text: "选项1"
                checkable: true
            }
        }
    }
    // 工具栏
    ToolBar {
        anchors.top: menuBar.bottom
        width: parent.width

        Row {
            ToolButton {
               text: "关注"
               contentItem: Rectangle {
                   color: "transparent"
                   border.width: 1
                   Text {
                       anchors.centerIn: parent
                       text: parent.parent.text
                   }
               }
               padding: 0
            }
            ToolButton {
               text: "点赞"
            }
        }
    }
}

演示

视频讲解

相关推荐
数字芯片实验室2 小时前
分享一个可以学习正则表达式的网址:Pythex.org
学习·正则表达式
陈洪奇2 小时前
注册中心学习笔记整理
笔记·学习
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
哈市雪花4 小时前
相机:以鼠标点为中心缩放(使用OpenGL+QT开发三维CAD)
qt·相机·opengl·cad·缩放·工业软件·渲染效果
Tony小周7 小时前
实现一个点击输入框可以弹出的数字软键盘控件 qt 5.12
开发语言·数据库·qt
fen_fen7 小时前
学习笔记(32):matplotlib绘制简单图表-数据分布图
笔记·学习·matplotlib
萝卜青今天也要开心11 小时前
2025年上半年软件设计师考后分享
笔记·学习
amazinging12 小时前
北京-4年功能测试2年空窗-报培训班学测开-第四十七天
python·学习·selenium
吃货界的硬件攻城狮12 小时前
【STM32 学习笔记】SPI通信协议
笔记·stm32·学习
一个天蝎座 白勺 程序猿12 小时前
Python练习(1)Python基础类型操作语法实战:20道实战题解与案例分析(上)
开发语言·python·学习