使用Qt Qml实现一个收缩导航栏

使用Qt qml实现抽屉式导航栏

        很多小伙伴想看问我这个收缩导航栏实现源码，其实实现的方式有很多，今天给大家带来的其中的一种方式。

主要步骤：

        1、实现一个width有变化动画的Rectangle，width值为展开、缩回时对应的大小。

                此处动画我使用 Behavior on width { }方式绑定，width变化时自动会执行内部的动画。

                宽度值使用 width: unfold? 200:64; 方式进行设定。

        2、实现一个按钮改变当前当前导航栏展开、缩回。

                此处我使用一个Rectangle的白底、底色边框来实现一种假的挖空效果。

                展开/缩回 图标使用了一个Image，使用旋转180度来切换朝向左、右的效果。

                此区域响应Mouse的click信号，切换导航栏状态 unfold = !unfold;

        3、准备好导航栏要显示的元素。

                使用一个ListModel作为数据模型，其中每一个ListElement作为一个导航栏元素。

                每个ListElement下有一个nane属性作为显示的名称，icon作为显示的图标资源。

        4、使用一个Column进行列布局。

                设置大小为fill 第一步中的Rectangle，并设置好spacing padding这几个布局基本设置。

        5、使用Repeater来创建多个组件扔给Column管理。

                设置model 为第三步中的ListModel。

                设置delegate进行组件的显示定制。基本的布局加一个鼠标的进入离开事件处理。

       

        6、源码分享

Rectangle{
    id: root;
    //显示区域的颜色背景
    width: 480;
    height: 640;
    color: "#6843d1";

    property bool unfold: false;
    property int selectTopPadding: 15;
    property int selectBottomPadding: 15;
    property int selectSpacing: 5;
    property int selectCompomonetHeight: 45;

    Rectangle{
        id: barRect;
        width: unfold ? 200 : 64;
        height: root.selectBottomPadding +
                root.selectBottomPadding +
                appModel.count * root.selectCompomonetHeight +
                (appModel.count-1) * root.selectSpacing;
        radius: 10;
        anchors.centerIn: parent;
        color: "#f5f5f5";
        clip: true;

        Behavior on width{
            NumberAnimation{duration: 300;}
        }

        ListModel{
            id: appModel;
            ListElement{
                name: "Home";
                icon: "qrc:/image/home.png";
            }
            ListElement{
                name: "Profile";
                icon: "qrc:/image/user.png";
            }
            ListElement{
                name: "Message";
                icon: "qrc:/image/msg.png";
            }
            ListElement{
                name: "Help";
                icon: "qrc:/image/help.png";
            }
            ListElement{
                name: "Setting";
                icon: "qrc:/image/setting.png";
            }
            ListElement{
                name: "Sign Out";
                icon: "qrc:/image/exit.png";
            }
        }

        Component{
            id: appDelegate;
            Rectangle {
                id: delegateBackground;
                width: barRect.width;
                height: root.selectCompomonetHeight;
                radius: 5;
                color: "#00000000";
                //显示图标
                Image {
                    id: imageIcon;
                    width: 24;
                    height: 24;
                    anchors.verticalCenter: parent.verticalCenter;
                    anchors.left: parent.left;
                    anchors.leftMargin: 18;
                    mipmap: true;
                    source: icon;
                }
                //显示APP文字
                Text {
                    anchors.left: imageIcon.right;
                    anchors.leftMargin: 40;
                    anchors.verticalCenter: imageIcon.verticalCenter;
                    color: "#6843d1"
                    text: name;
                    font{family: "微软雅黑"; pixelSize: 20;}
                }
                //鼠标处理
                MouseArea{
                    anchors.fill: parent;
                    hoverEnabled: true;
                    onEntered: delegateBackground.color = "#10000000";
                    onExited: delegateBackground.color = "#00000000";
                }
            }
        }

        Column{
            anchors.fill: parent;
            spacing: root.selectSpacing;
            topPadding: root.selectTopPadding;
            bottomPadding: root.selectBottomPadding;
            Repeater{
                model: appModel;
                delegate: appDelegate;
            }
        }

    }

    // 展开/收回按钮
    Rectangle{
        width: 34;
        height: width;
        radius: width/2;
        color: "#f5f5f5";
        border.color: "#6843d1";
        border.width: 5;
        anchors.left: barRect.right;
        anchors.leftMargin: -width/2;
        anchors.verticalCenter: barRect.verticalCenter;
        Image {
            width: 24;
            height: 24;
            anchors.centerIn: parent;
            mipmap: true;
            //此处使用旋转1180度实现展开按钮图标和收回按钮图标
            rotation: unfold? 180:0;
            source: "qrc:/image/arrows.png";
        }

        MouseArea{
            anchors.fill: parent;
            onClicked: {
                unfold = !unfold;
            }
        }
    }

}

有问题或修正的地方请留言~