diff --git a/doric-Qt/example/app/demo/DoricDemoBridge.cpp b/doric-Qt/example/app/demo/DoricDemoBridge.cpp
index 384aecdd..a297e16b 100644
--- a/doric-Qt/example/app/demo/DoricDemoBridge.cpp
+++ b/doric-Qt/example/app/demo/DoricDemoBridge.cpp
@@ -17,51 +17,54 @@ void DoricDemoBridge::navigate(QVariant route) {
   QString name;
   switch (route.toInt()) {
   case 0:
-    name = "Counter.js";
+    name = "ComponetDemo.js";
     break;
   case 1:
-    name = "EffectsDemo.js";
+    name = "Counter.js";
     break;
   case 2:
-    name = "Gobang.js";
+    name = "EffectsDemo.js";
     break;
   case 3:
-    name = "ImageDemo.js";
+    name = "Gobang.js";
     break;
   case 4:
-    name = "InputDemo.js";
+    name = "ImageDemo.js";
     break;
   case 5:
-    name = "LayoutDemo.js";
+    name = "InputDemo.js";
     break;
   case 6:
-    name = "LayoutTestDemo.js";
+    name = "LayoutDemo.js";
     break;
   case 7:
-    name = "ModalDemo.js";
+    name = "LayoutTestDemo.js";
     break;
   case 8:
-    name = "NetworkDemo.js";
+    name = "ModalDemo.js";
     break;
   case 9:
-    name = "PopoverDemo.js";
+    name = "NetworkDemo.js";
     break;
   case 10:
-    name = "ScrollerDemo.js";
+    name = "PopoverDemo.js";
     break;
   case 11:
-    name = "SimpleDemo.js";
+    name = "ScrollerDemo.js";
     break;
   case 12:
-    name = "Snake.js";
+    name = "SimpleDemo.js";
     break;
   case 13:
-    name = "StorageDemo.js";
+    name = "Snake.js";
     break;
   case 14:
-    name = "SwitchDemo.js";
+    name = "StorageDemo.js";
     break;
   case 15:
+    name = "SwitchDemo.js";
+    break;
+  case 16:
     name = "TextDemo.js";
     break;
   }
diff --git a/doric-Qt/example/app/main.qml b/doric-Qt/example/app/main.qml
index 7904ad87..720ec08f 100644
--- a/doric-Qt/example/app/main.qml
+++ b/doric-Qt/example/app/main.qml
@@ -15,7 +15,7 @@ ApplicationWindow {
 
         ListView {
             width: parent.width
-            model: 16
+            model: 17
             delegate: Rectangle {
                 Column {
                     anchors.centerIn: parent
@@ -23,36 +23,38 @@ ApplicationWindow {
                         text: {
                             switch (index) {
                                 case 0:
-                                    return "Counter.js"
+                                    return "ComponetDemo.js"
                                 case 1:
-                                    return "EffectsDemo.js"
+                                    return "Counter.js"
                                 case 2:
-                                    return "Gobang.js"
+                                    return "EffectsDemo.js"
                                 case 3:
-                                    return "ImageDemo.js"
+                                    return "Gobang.js"
                                 case 4:
-                                    return "InputDemo.js"
+                                    return "ImageDemo.js"
                                 case 5:
-                                    return "LayoutDemo.js"
+                                    return "InputDemo.js"
                                 case 6:
-                                    return "LayoutTestDemo.js"
+                                    return "LayoutDemo.js"
                                 case 7:
-                                    return "ModalDemo.js"
+                                    return "LayoutTestDemo.js"
                                 case 8:
-                                    return "NetworkDemo.js"
+                                    return "ModalDemo.js"
                                 case 9:
-                                    return "PopoverDemo.js"
+                                    return "NetworkDemo.js"
                                 case 10:
-                                    return "ScrollerDemo.js"
+                                    return "PopoverDemo.js"
                                 case 11:
-                                    return "SimpleDemo.js"
+                                    return "ScrollerDemo.js"
                                 case 12:
-                                    return "Snake.js"
+                                    return "SimpleDemo.js"
                                 case 13:
-                                    return "StorageDemo.js"
+                                    return "Snake.js"
                                 case 14:
-                                    return "SwitchDemo.js"
+                                    return "StorageDemo.js"
                                 case 15:
+                                    return "SwitchDemo.js"
+                                case 16:
                                     return "TextDemo.js"
                             }
                         }
diff --git a/doric-Qt/example/app/qml.qrc b/doric-Qt/example/app/qml.qrc
index 4b6147c5..4e7563e2 100644
--- a/doric-Qt/example/app/qml.qrc
+++ b/doric-Qt/example/app/qml.qrc
@@ -9,6 +9,7 @@
         <file alias="assets_iconfont.ttf">./resources/assets_iconfont.ttf</file>
     </qresource>
     <qresource prefix="/doric/bundles">
+        <file alias="ComponetDemo.js">../../../doric-demo/bundle/src/ComponetDemo.js</file>
         <file alias="Counter.js">../../../doric-demo/bundle/src/Counter.js</file>
         <file alias="EffectsDemo.js">../../../doric-demo/bundle/src/EffectsDemo.js</file>
         <file alias="Gobang.js">../../../doric-demo/bundle/src/Gobang.js</file>