很多 App 都有侧滑菜单功能,下面的教程演示如何使用 QML 实现像墨迹天气侧滑菜单效果。

SlidingMenu

实现方法

第一步创建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.OutQuad } }
    }
}

添加特效

在菜单视图上添加一个简单的透明特效:

Rectangle {
    id: menu_view
    ...
    opacity: menu_shown ? 1 : 0
    Behavior on opacity { NumberAnimation { duration: 300 } }  
}

当菜单视图显示出来后在主视图上添加阴影边框,通过把BorderImage的Z轴改为-1让它显示到normal_view的下面。

Rectangle {
    id: normal_view
    ...

    BorderImage {
        anchors.top: parent.top
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.margins: -4
        z: -1 /* this will place it below normal_view */
        visible: menu_shown
        source: "qrc:///res/shadow.png"
        border { left: 4; top: 4; right: 4; bottom: 4 }
    }
}

代码下载

标签: Qt, QML, 侧滑菜单, SlidingMenu

添加新评论