很多 App 都有侧滑菜单功能,下面的教程演示如何使用 QML 实现像墨迹天气侧滑菜单效果。
实现方法
第一步创建2个视图,一个主视图normal_view,一个菜单视图menu_view,在应用程序中放置两个视图,并且把他们充满整个窗体,需要注意的是主视图需要定义在菜单视图之后,这样主视图才能够盖住菜单视图。Rectangle {
id: menu_view
anchors.fill: parent
color: "#F0F1F6";
...
}
Rectangle {
id: normal_view
anchors.fill: parent
color: "#50709B"
...
}
下一步是需要动态把主视图移动到右边,这样在下面的菜单视图才能够显示出来。我使用了一个transform,如果设置menu_translate.x为100,那么主视图normal_view将会向右移动100像素。想要保证主视图在移动的时候能够平滑一点(不是直接从0跳到100),需要添加x属性的动画行为。Rectangle {
id: normal_view
...
transform: Translate {
id: menu_translate
x: 0
Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutQu