qt qml-通用QML界面V2-剪映暗黑风格界面

qt qml-通用QML界面V2-剪映暗黑风格界面

本文章介绍的是基于Qt QML技术开发的通用QML界面版本2，其中新增加了一个剪映暗黑风格界面。在该界面中，我们实现了一个侧边栏的功能，用户既可以设置左侧的侧边栏，也可以设置右侧的侧边栏，具有非常好的扩展性。

首先，我们来看一下侧边栏的实现。侧边栏主要分为两部分：抽屉栏和可伸缩菜单。其中，抽屉栏负责展示菜单项以及点击事件的触发。可伸缩菜单则是通过动态添加子项来实现自适应的效果。

抽屉栏的实现:

Item {
    id: leftSidebar // 左侧侧边栏
    width: 180
    height: parent.height
    property bool visible: true
    property real animationTime: 300
    property alias content: column.content

    Rectangle {
        id: background
        color: "#212121"
        width: parent.width
        height: parent.height
        opacity: 0.9
        visible: leftSidebar.visible

        property real opacityDuration: 200

        Behavior on opacity {
            NumberAnimation {
                duration: leftSidebar.animationTime
                easing.type: Easing.InOutQuad
            }
        }

        MouseArea {
            anchors.fil