QML学习

• MenuBar&ToolBar例程
• 视频讲解
• 代码

main.qml

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15Window {width: 640height: 480visible: truetitle: qsTr("MenuBar&ToolBar")// 菜单栏MenuBar {id: menuBarcontentWidth: parent.width// 绘制菜单栏背景background: Rectangle {color: "lightGray"Rectangle {width: parent.widthheight: 1anchors.bottom: parent.bottomcolor: "black"}}// 菜单选项代理delegate: MenuBarItem {// 绘制菜单选项背景background: Rectangle {color: highlighted? "black": "gray"border.width: 1}// 绘制菜单选项内容contentItem: Text {font.pointSize: 15color: "white"text: menu.titlehorizontalAlignment: Text.AlignLeftverticalAlignment: Text.AlignVCenter}}Menu {id: menutitle: "菜单1"// 绘制每个选项视图delegate: MenuItem {id: menuItem// 绘制选项展开箭头arrow: Canvas  {x: parent.width - widthimplicitWidth: 40implicitHeight: 40visible: menuItem.subMenuonPaint: {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 + 10height: 20anchors.verticalCenter: parent.verticalCentercolor: "transparent"Rectangle {width: 14height: 14anchors.verticalCenter: parent.verticalCenteranchors.left: parent.leftanchors.leftMargin: 10visible: menuItem.checkedcolor: "black"radius: 7}}// 绘制选项内容视图contentItem: Text {leftPadding: menuItem.indicator.widthrightPadding: menuItem.arrow.widthtext: menuItem.textfont.pointSize: 15opacity: enabled ? 1.0 : 0.3color: menuItem.highlighted ? "white" : "black"horizontalAlignment: Text.AlignLeftverticalAlignment: Text.AlignVCenterelide: Text.ElideRight}// 绘制选项背景视图background: Rectangle {implicitWidth: 200implicitHeight: 40opacity: enabled ? 1 : 0.3color: menuItem.highlighted ? "gray" : "transparent"}}Action {text: "选项1"checkable: truechecked: 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.bottomwidth: parent.widthRow {ToolButton {text: "关注"contentItem: Rectangle {color: "transparent"border.width: 1Text {anchors.centerIn: parenttext: parent.parent.text}}padding: 0}ToolButton {text: "点赞"}}}
}

演示

视频讲解