初始化界面布局

qml/AppUI/App.qml

@@ -1,8 +0,0 @@
-import QtQuick 2.0
-
-Rectangle {
-    color: "blue";
-    Text {
-        text: "AppUI"
-    }
-}

qml/AppUI/AppPage.qml

@@ -1,21 +1,9 @@
-import QtQuick 2.12
-import QtQuick.Controls 2.0 as QQC2
-
-import AppUI 1.0 as AppUI
-import AppControls2 1.0 as AppControls2
+import QtQuick 2.0
 
 Item {
-    AppUI.AppTest {
-        width: 200
-        height: 480
-    }
-
     ListView {
-        x: 200
-        width: 200
-        height: 480
+        anchors.fill: parent
         clip: true
-
         model: modelManager.getAppModel()
         delegate: Rectangle {
             width: ListView.view.width;
@@ -30,9 +18,4 @@ Item {
         }
     }
 
-    AppControls2.AppTest {
-        x: 400
-        width: 200
-        height: 480
-    }
 }

qml/AppUI/FullScreenUI.qml

@@ -0,0 +1,15 @@
+import QtQuick 2.0
+
+Item {
+    Rectangle {
+        anchors.fill: parent
+        color: "yellow"
+
+        MouseArea {
+            anchors.fill: parent;
+            onClicked: {
+                mainWindow.isFullScreen = !mainWindow.isFullScreen;
+            }
+        }
+    }
+}

qml/AppUI/NormalUI.qml

@@ -0,0 +1,25 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.0 as QQC2
+
+Item {
+    Row {
+        anchors.fill: parent;
+
+        AppPage {
+            width: 300
+            height: parent.height;
+        }
+
+        Sidebar {
+            width: parent.width - 300;
+            height: parent.height;
+
+            MouseArea {
+                anchors.fill: parent;
+                onClicked: {
+                    mainWindow.isFullScreen = !mainWindow.isFullScreen;
+                }
+            }
+        }
+    }
+}

qml/AppUI/Sidebar.qml

@@ -0,0 +1,8 @@
+import QtQuick 2.0
+import AppControls2 1.0 as AppControls2
+
+Item {
+    AppControls2.AppTest {
+        anchors.fill: parent;
+    }
+}

qml/AppUI/qmldir

@@ -1,2 +1,5 @@
 module AppUI
-AppTest 1.0 App.qml
+AppPage 1.0 AppPage.qml
+Sidebar 1.0 Sidebar.qml
+NormalUI 1.0 NormalUI.qml
+FullScreenUI 1.0 FullScreenUI.qml

qml/main.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.12
 import org.ukui.menu.core 1.0
 
+import AppUI 1.0 as AppUI
 
 MenuMainWindow {
     id: mainWindow
@@ -12,10 +13,22 @@ MenuMainWindow {
 
     onIsFullScreenChanged: {
         console.log("full screen", isFullScreen)
+        //loader.source = isFullScreen ? "qrc:/qml/FullScreenUI.qml" : "qrc:/qml/NormalUI.qml";
     }
 
-    Loader {
+    AppUI.NormalUI {
         anchors.fill: mainWindow.contentItem;
-        source: "qrc:/qml/UkuiMenuUI.qml"
+        transitions: Transition {
+            NumberAnimation {
+                easing.type: Easing.OutBounce;
+                properties: "width,height";
+                duration: 4000;
+            }
+        }
+        Behavior on width {
+            PropertyAnimation {
+
+            }
+        }
     }
 }

qml/qml.qrc

@@ -1,9 +1,11 @@
 <RCC>
     <qresource prefix="/qml">
         <file>main.qml</file>
-        <file>UkuiMenuUI.qml</file>
         <file>AppUI/qmldir</file>
-        <file>AppUI/App.qml</file>
+        <file>AppUI/NormalUI.qml</file>
+        <file>AppUI/FullScreenUI.qml</file>
+        <file>AppUI/AppPage.qml</file>
+        <file>AppUI/Sidebar.qml</file>
         <file>AppControls2/qmldir</file>
         <file>AppControls2/App.qml</file>
     </qresource>