update

example/AboutPage.qml

@@ -4,11 +4,12 @@ import FluentUI 1.0
 FluWindow {
 
     width: 500
-    height: 500
+    height: 600
     title:"关于"
 
     FluAppBar{
         id:appbar
+        title:"关于"
     }
 
     FluText{

example/MainPage.qml

@@ -9,10 +9,10 @@ import FluentUI 1.0
 FluWindow {
     id:rootwindow
     width: 800
-    height: 600
+    height: 700
     title: "FluentUI"
     minimumWidth: 600
-    minimumHeight: 400
+    minimumHeight: 500
 
     FluAppBar{
         id:appbar
@@ -61,17 +61,6 @@ FluWindow {
                 page:"qrc:/T_Typography.qml"
             }
         }
-
-        FluMenu{
-            id:menu
-            FluMenuItem{
-                text:"123"
-            }
-            FluMenuItem{
-                text:"456"
-            }
-        }
-
     }
 
     FluIconButton{
@@ -82,8 +71,25 @@ FluWindow {
             leftMargin: 12
             bottomMargin: 12
         }
+        FluMenu{
+            id:menu
+            x:40
+            margins:4
+            FluMenuItem{
+                text:"关于"
+                onClicked:{
+                    FluApp.navigate("/About")
+                }
+            }
+            FluMenuItem{
+                text:"设置"
+                onClicked:{
+                    FluApp.navigate("/Setting")
+                }
+            }
+        }
         onClicked:{
-            menu.popup()
+            menu.open()
         }
     }
 

example/SettingPage.qml

@@ -4,11 +4,12 @@ import FluentUI 1.0
 FluWindow {
 
     width: 500
-    height: 500
+    height: 600
     title:"设置"
 
     FluAppBar{
         id:appbar
+        title:"设置"
     }
 
     FluText{

src/FluApp.cpp

@@ -41,11 +41,10 @@ void FluApp::navigate(const QString& route){
     }
     bool isAppWindow = route==initialRoute();
     FramelessView *view = new FramelessView();
-    view->setColor(QColor(0,0,0,0));
+    view->setColor(QColor(Qt::transparent));
     QObject::connect(view, &QQuickView::statusChanged, view, [&](QQuickView::Status status) {
         if (status == QQuickView::Status::Ready) {
             Q_EMIT windowReady(view);
-
             view->moveToScreenCenter();
             view->show();
         }

src/FramelessView_unix.cpp

@@ -16,7 +16,6 @@ FramelessView::FramelessView(QWindow *parent) : Super(parent), d(new FramelessVi
 {
     setFlags(Qt::CustomizeWindowHint | Qt::Window | Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint | Qt::WindowTitleHint | Qt::WindowSystemMenuHint);
     setResizeMode(SizeRootObjectToView);
-
     setIsMax(windowState() == Qt::WindowMaximized);
     setIsFull(windowState() == Qt::WindowFullScreen);
     connect(this, &QWindow::windowStateChanged, this, [&](Qt::WindowState state) {

src/FramelessView_win.cpp

@@ -21,13 +21,10 @@ static bool isFullWin(QQuickView* win)
 {
     return win->windowState() == Qt::WindowFullScreen;
 }
-
-
 FramelessView::FramelessView(QWindow *parent) : Super(parent), d(new FramelessViewPrivate)
 {
     setFlags(Qt::CustomizeWindowHint | Qt::Window | Qt::FramelessWindowHint | Qt::WindowMinMaxButtonsHint | Qt::WindowTitleHint | Qt::WindowSystemMenuHint);
     setResizeMode(SizeRootObjectToView);
-
     setIsMax(windowState() == Qt::WindowMaximized);
     setIsFull(windowState() == Qt::WindowFullScreen);
     connect(this, &QWindow::windowStateChanged, this, [&](Qt::WindowState state) {

src/controls/FluDropShadow.qml

@@ -4,5 +4,5 @@ import QtGraphicalEffects 1.15
 DropShadow {
     radius: 5
     samples: 4
-    color: FluApp.isDark ? "#80FFFFFF" : "#80000000"
+    color: FluApp.isDark ? "#80FFFFFF" : "#40000000"
 }

src/controls/FluMenu.qml

@@ -1,41 +1,26 @@
 import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import QtQuick.Controls 2.15
-import QtQuick.Controls.impl 2.15
-import QtQuick.Templates 2.15 as T
-import QtQuick.Window 2.15
-import QtGraphicalEffects 1.15
 
-T.Menu {
+Popup {
-    id: control
+    id: popup
+    default property alias content: container.children
 
-    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+    background: FluRectangle {
-                            contentWidth + leftPadding + rightPadding)
+        implicitWidth: 140
-    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+        implicitHeight: container.height
-                             contentHeight + topPadding + bottomPadding)
+        color:FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(237/255,237/255,237/255,1)
-    margins: 0
+        radius: [5,5,5,5]
-    delegate: FluMenuItem { }
+        layer.effect: FluDropShadow{}
-
+        layer.enabled: true
-    contentItem: ListView {
+        Column{
-        implicitHeight: contentHeight
+            spacing: 5
-        model: control.contentModel
+            topPadding: 5
-        interactive: Window.window ? contentHeight > Window.window.height : false
+            bottomPadding: 5
-        clip: true
+            id:container
-        currentIndex: control.currentIndex
+            function closePopup(){
-        ScrollIndicator.vertical: ScrollIndicator {}
+                popup.close()
-    }
+            }
-
-    background: Item {
-        implicitWidth: 122
-        implicitHeight: 30
-        Rectangle{
-            anchors.fill: parent
-            color: "#FFFFFF"
-            layer.effect: FluDropShadow{}
-            layer.enabled: true
         }
-
-
     }
-
-
 }

src/controls/FluMenuItem.qml

@@ -1,29 +1,40 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
-import QtQuick.Controls.impl 2.15
-import QtQuick.Templates 2.15 as T
-import QtQuick.Shapes 1.15
 
-T.MenuItem {
+Item {
-    id: control
 
-    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+    id:root
-                            implicitContentWidth + leftPadding + rightPadding)
+    width: 140
-    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+    height: 32
-                             implicitContentHeight + topPadding + bottomPadding,
-                             implicitIndicatorHeight + topPadding + bottomPadding)
-    padding: 0
-      spacing: 6
 
-    contentItem: FluText {
+    property string text: "MenuItem"
-        text: control.text
+    signal clicked
+
+    Rectangle{
+        anchors.centerIn: parent
+        width: 100
+        height: 32
+        radius: 4
+        color:{
+            if(mouse_area.containsMouse){
+                return FluApp.isDark ? Qt.rgba(56/255,56/255,56/255,1) : Qt.rgba(230/255,230/255,230/255,1)
+            }
+            return FluApp.isDark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(237/255,237/255,237/255,1)
+        }
+
+        FluText{
+            text: root.text
+            anchors.centerIn: parent
+        }
+
+        MouseArea{
+            id:mouse_area
+            hoverEnabled: true
+            anchors.fill: parent
+            onClicked: {
+                root.clicked()
+                root.parent.closePopup()
+            }
+        }
     }
-
-    background: Rectangle {
-        implicitWidth: 120
-        implicitHeight: 30
-        width: control.width
-              height: control.height
-    }
-
 }

src/controls/FluRectangle.qml

@@ -14,7 +14,7 @@ Item{
         id:container
         width: root.width
         height: root.height
-        visible: false
+        opacity: 0
         color:root.color
     }
 

src/controls/FluWindow.qml

@@ -46,7 +46,9 @@ Item {
         layer.enabled: true
         layer.effect: DropShadow {
             radius: 5
-            samples: 4
+            samples: 5
+            horizontalOffset: 0
+            verticalOffset: 0
             color: "#40000000"
         }
     }