└── 抽屉式导航栏
    └── main.qml


/抽屉式导航栏/main.qml:
--------------------------------------------------------------------------------
  1 | import QtQuick 2.8
  2 | import QtQuick.Window 2.2
  3 | import QtQuick.Controls 2.1
  4 | import QtGraphicalEffects 1.0
  5 | Rectangle{
  6 |     //显示区域的颜色背景
  7 |     width: 480;
  8 |     height: 640;
  9 |     color: "#6843d1";
 10 | 
 11 | 
 12 |     property bool unfold: false;
 13 | 
 14 |     Rectangle{
 15 |         id: barRect;
 16 |         width: unfold ? 240 : 64;
 17 |         height: 384;
 18 |         radius: 10;
 19 |         anchors.centerIn: parent;
 20 |         color: "#f5f5f5";
 21 |         clip: true;
 22 | 
 23 |         Behavior on width{
 24 |             NumberAnimation{duration: 300;}
 25 |         }
 26 | 
 27 |         ListModel{
 28 |             id: appModel;
 29 |             ListElement{
 30 |                 name: "Home";
 31 |                 icon: "qrc:/image/home.png";
 32 |             }
 33 |             ListElement{
 34 |                 name: "Profile";
 35 |                 icon: "qrc:/image/user.png";
 36 |             }
 37 |             ListElement{
 38 |                 name: "Message";
 39 |                 icon: "qrc:/image/msg.png";
 40 |             }
 41 |             ListElement{
 42 |                 name: "Help";
 43 |                 icon: "qrc:/image/help.png";
 44 |             }
 45 |             ListElement{
 46 |                 name: "Setting";
 47 |                 icon: "qrc:/image/setting.png";
 48 |             }
 49 |             ListElement{
 50 |                 name: "Sign Out";
 51 |                 icon: "qrc:/image/exit.png";
 52 |             }
 53 |         }
 54 | 
 55 |         Component{
 56 |             id: appDelegate;
 57 |             Rectangle {
 58 |                 id: delegateBackground;
 59 |                 width: barRect.width;
 60 |                 height: 48;
 61 |                 radius: 5;
 62 |                 color: "#00000000";
 63 | 				//显示图标
 64 |                 Image {
 65 |                     id: imageIcon;
 66 |                     width: 24;
 67 |                     height: 24;
 68 |                     anchors.verticalCenter: parent.verticalCenter;
 69 |                     anchors.left: parent.left;
 70 |                     anchors.leftMargin: 18;
 71 |                     mipmap: true;
 72 |                     source: icon;
 73 |                 }
 74 | 				//显示APP文字
 75 |                 Text {
 76 |                     anchors.left: imageIcon.right;
 77 |                     anchors.leftMargin: 40;
 78 |                     anchors.verticalCenter: imageIcon.verticalCenter;
 79 |                     color: "#6843d1"
 80 |                     text: name;
 81 |                     font{family: "微软雅黑"; pixelSize: 20;}
 82 |                 }
 83 | 				//鼠标处理
 84 |                 MouseArea{
 85 |                     anchors.fill: parent;
 86 |                     hoverEnabled: true;
 87 |                     onEntered: delegateBackground.color = "#10000000";
 88 |                     onExited: delegateBackground.color = "#00000000";
 89 |                 }
 90 |             }
 91 |         }
 92 | 
 93 |         GridView{
 94 |             id: appGrid;
 95 |             width: 160;
 96 |             height: parent.height;
 97 |             anchors.left: parent.left;
 98 |             anchors.top: parent.top;
 99 |             anchors.topMargin: 12;
100 |             model: appModel;
101 |             delegate: appDelegate;
102 |             cellWidth: width;
103 |             cellHeight: 60;
104 |         }
105 |     }
106 | 
107 |     // 展开/收回按钮
108 |     Rectangle{
109 |         width: 34;
110 |         height: width;
111 |         radius: width/2;
112 |         color: "#f5f5f5";
113 |         border.color: "#6843d1";
114 |         border.width: 5;
115 |         anchors.left: barRect.right;
116 |         anchors.leftMargin: -width/2;
117 |         anchors.verticalCenter: barRect.verticalCenter;
118 |         Image {
119 |             width: 24;
120 |             height: 24;
121 |             anchors.centerIn: parent;
122 |             mipmap: true;
123 | 			//此处使用旋转1180度实现展开按钮图标和收回按钮图标
124 |             rotation: unfold? 180:0;
125 |             source: "qrc:/image/arrows.png";
126 |         }
127 | 
128 |         MouseArea{
129 |             anchors.fill: parent;
130 |             onClicked: {
131 |                 unfold = !unfold;
132 |             }
133 |         }
134 |     }
135 | 
136 | }
137 | 
138 | 


--------------------------------------------------------------------------------