演示效果
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5CM1ADNxcDOjZWNyMzM2UjNzYzX0MDOwMDM1AzLcFTMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
菜单按钮点击事件:
Button {
width: 100
height: 48
text: qsTr("菜单")
onClicked: onMenu();
}
function onMenu()
{
menuTranslate.x = bMenuShown ? 0 : width * 0.8
bMenuShown = !bMenuShown;
}
MouseArea {
anchors.fill: parent
enabled: bMenuShown
onClicked: onMenu();
}
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
ApplicationWindow {
visible: true
width: 800
height: 600
title: qsTr("Qt基于Qml侧边滑动菜单示例")
property bool bMenuShown: false
Rectangle {
anchors.fill: parent
color: "blue";
opacity: bMenuShown ? 1 : 0
Behavior on opacity {
NumberAnimation {
duration: 300
}
}
}
Rectangle {
anchors.fill: parent
color: "black"
opacity: bMenuShown ? 0.5 : 1
Behavior on opacity {
NumberAnimation {
duration: 300
}
}
Button {
width: 100
height: 48
text: qsTr("菜单")
onClicked: onMenu();
}
//动画
transform: Translate {
id: menuTranslate
x: 0
Behavior on x {
NumberAnimation {
duration: 400;
easing.type: Easing.OutQuad
}
}
}
MouseArea {
anchors.fill: parent
enabled: bMenuShown
onClicked: onMenu();
}
}
function onMenu()
{
menuTranslate.x = bMenuShown ? 0 : width * 0.8
bMenuShown = !bMenuShown;
}
}