update

example/App.qml

@@ -7,7 +7,7 @@ import FluentUI 1.0
 
 Window {
     id:app
-
+    color: "#00000000"
     Component.onCompleted: {
         FluApp.setAppWindow(app)
         FluApp.routes = {

example/MainPage.qml

@@ -5,11 +5,15 @@ import QtQuick.Layouts 1.15
 import QtGraphicalEffects 1.15
 import FluentUI 1.0
 
-Rectangle {
+FluWindow {
     id:rootwindow
     width: 800
     height: 600
-    color : "#F3F3F3"
+
+    FluAppBar{
+        id:appbar
+        title: "FluentUI"
+    }
 
     ListModel{
         id:nav_items
@@ -26,7 +30,7 @@ Rectangle {
     ListView{
         id:nav_list
         anchors{
-            top: parent.top
+            top: appbar.bottom
             bottom: parent.bottom
             topMargin: 20
             bottomMargin: 20
@@ -75,13 +79,13 @@ Rectangle {
     }
 
     Rectangle{
-        color: "#FFFFFF"
+        color: FluApp.isDark ? "#323232" : "#FFFFFF"
         radius: 10
         clip: true
         anchors{
             left: nav_list.right
             leftMargin: 2
-            top: parent.top
+            top: appbar.bottom
             topMargin: 20
             right: parent.right
             rightMargin: 10
@@ -89,7 +93,7 @@ Rectangle {
             bottomMargin: 20
         }
         border.width: 1
-        border.color: "#EEEEEE"
+        border.color: FluApp.isDark ? "#666666" : "#EEEEEE"
 
         Loader{
             anchors.fill: parent

example/SettingPage.qml

@@ -1,11 +1,14 @@
 import QtQuick 2.15
 import FluentUI 1.0
 
-Item {
+FluWindow {
 
     width: 500
     height: 500
 
+    FluAppBar{
+        id:appbar
+    }
 
     FluText{
         text:"Display"

example/T_Controls.qml

@@ -14,24 +14,23 @@ Item {
             fontStyle: FluText.TitleLarge
         }
 
-
-
         FluButton{
-
             Layout.topMargin: 20
+            onClicked: {
+                FluApp.getWIdByWindow(Window.window)
+//                FluApp.navigate("/Setting")
+            }
         }
 
         FluFilledButton{
             onClicked:{
                 FluApp.navigate("/Setting")
-                console.debug("FluFilledButton:"+Window.window.x)
             }
         }
 
         FluFilledButton{
             disabled: true
             onClicked:{
-                console.debug("FluFilledButton-disabled")
             }
         }
 
@@ -39,7 +38,7 @@ Item {
             Component.onCompleted: {
 
             }
-            icon:FluentIcons.FA_android
+            icon:FluentIcons.FA_close
         }
 
         FluToggleSwitch{

example/example.pro

@@ -1,7 +1,6 @@
 QT += quick
 CONFIG += c++11
 
-
 DEFINES += QT_DEPRECATED_WARNINGS QT_NO_WARNING_OUTPUT
 
 SOURCES += \
@@ -18,28 +17,28 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
 #### 如果你正在使用静态库.a 那么你还需要将下面的配置注释取消掉。
 #### 其它项目使用方法也是如此。
 
- DEFINES += STATICLIB
+# DEFINES += STATICLIB
 
- LIBNAME = FluentUI
+# LIBNAME = FluentUI
 
- CONFIG(debug, debug|release) {
+# CONFIG(debug, debug|release) {
-     contains(QMAKE_HOST.os,Windows) {
+#     contains(QMAKE_HOST.os,Windows) {
-         LIBNAME = FluentUI
+#         LIBNAME = FluentUId
-     }else{
+#     }else{
-        LIBNAME = FluentUI_debug
+#        LIBNAME = FluentUI_debug
-     }
+#     }
- }
+# }
 
- # Additional import path used to resolve QML modules in Qt Creator's code model
+# # Additional import path used to resolve QML modules in Qt Creator's code model
- QML_IMPORT_PATH = $$OUT_PWD/../bin/
+# QML_IMPORT_PATH = $$OUT_PWD/../bin/
 
- # Additional import path used to resolve QML modules just for Qt Quick Designer
+# # Additional import path used to resolve QML modules just for Qt Quick Designer
- QML_DESIGNER_IMPORT_PATH = $$OUT_PWD/../bin/
+# QML_DESIGNER_IMPORT_PATH = $$OUT_PWD/../bin/
 
- INCLUDEPATH += $$OUT_PWD/../bin/FluentUI/
+# INCLUDEPATH += $$OUT_PWD/../bin/FluentUI/
- DEPENDPATH += $$OUT_PWD/../bin/FluentUI/
+# DEPENDPATH += $$OUT_PWD/../bin/FluentUI/
 
- LIBS += -L$$OUT_PWD/../bin/FluentUI/ -l$${LIBNAME}
+# LIBS += -L$$OUT_PWD/../bin/FluentUI/ -l$${LIBNAME}
 # PRE_TARGETDEPS += $$OUT_PWD/../bin/FluentUI/lib$${LIBNAME}.a
 
 ### 注意:静态库 .so .dylib .dll 是自动安装的Qt qml plugin目录中，不需要此步配置

example/main.cpp

@@ -7,12 +7,9 @@
 
 int main(int argc, char *argv[])
 {
-    QCoreApplication::setAttribute(Qt::AA_UseSoftwareOpenGL);
+//    qputenv("QSG_RENDER_LOOP","basic");
-#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
-#endif
     QGuiApplication app(argc, argv);
-
     QQmlApplicationEngine engine;
     #if defined(STATICLIB)
         FluentUI::create(&engine);

src/FluApp.cpp

@@ -3,6 +3,7 @@
 #include <QQmlEngine>
 #include <QGuiApplication>
 #include <QQmlContext>
+#include <QQuickItem>
 #include "FramelessView.h"
 
 
@@ -16,6 +17,13 @@ FluApp *FluApp::getInstance()
     return FluApp::m_instance;
 }
 
+FluApp::FluApp(QObject *parent)
+    : QObject{parent}
+{
+    isDark(true);
+}
+
+
 
 void FluApp::setAppWindow(QWindow *window){
     appWindow = window;
@@ -28,29 +36,37 @@ void FluApp::run(){
     }
     FramelessView *view = new FramelessView();
     view->engine()->rootContext()->setContextProperty("FluApp",FluApp::getInstance());
+    view->setColor(QColor(255,0,0,1));
     const QUrl url(routes().value(initialRoute()).toString());
     QObject::connect(view, &QQuickView::statusChanged, view, [&](QQuickView::Status status) {
         if (status == QQuickView::Status::Ready) {
 
+                qDebug()<<"-----------winId:"<<view->winId();
         }
     });
     QObject::connect(view->engine(), &QQmlEngine::quit, qApp, &QCoreApplication::quit);
     QObject::connect(qApp, &QGuiApplication::aboutToQuit, qApp, [&view](){view->setSource({});});
+//    view->setTitle("FluentUI");
     view->setSource(url);
     view->moveToScreenCenter();
     view->show();
 }
 
 void FluApp::navigate(const QString& route){
-    qDebug()<<"开始路由跳转->"<<route;
     if(!routes().contains(route)){
         qErrnoWarning("没有找到当前路由");
         return;
     }
     FramelessView *view = new FramelessView();
     view->engine()->rootContext()->setContextProperty("FluApp",FluApp::getInstance());
+    view->setColor(isDark() ? QColor(0,0,0,1) : QColor(255, 255, 255, 1));
     view->setSource((routes().value(route).toString()));
     view->closeDeleteLater();
     view->moveToScreenCenter();
     view->show();
 }
+
+void FluApp::getWIdByWindow(QWindow *window){
+    qDebug()<< window->winId();
+    window->winId();
+}

src/FluApp.h

@@ -10,17 +10,22 @@ class FluApp : public QObject
 {
     Q_OBJECT
     Q_PROPERTY_AUTO(QString,initialRoute);
+    Q_PROPERTY_AUTO(bool,isDark);
     Q_PROPERTY_AUTO(QJsonObject,routes);
 public:
 
     static FluApp *getInstance();
 
+    explicit FluApp(QObject *parent = nullptr);
+
     Q_INVOKABLE void run();
 
     Q_INVOKABLE void navigate(const QString& route);
 
     Q_INVOKABLE void setAppWindow(QWindow *window);
 
+    Q_INVOKABLE void getWIdByWindow(QWindow *window);
+
 private:
     static FluApp* m_instance;
     QWindow *appWindow;

src/Fluent.cpp

@@ -4,6 +4,7 @@
 #include <QQmlContext>
 #include <QGuiApplication>
 #include <QQuickWindow>
+#include "WindowHelper.h"
 #include "FluApp.h"
 #include "Def.h"
 
@@ -27,6 +28,12 @@ void Fluent::registerTypes(const char *uri){
     int major = 1;
     int minor = 0;
 
+    qmlRegisterType<WindowHelper>(uri,major,minor,"WindowHelper");
+
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluWindow.qml"),uri,major,minor,"FluWindow");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluRectangle.qml"),uri,major,minor,"FluRectangle");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluAppBar.qml"),uri,major,minor,"FluAppBar");
+    qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluAppBar.qml"),uri,major,minor,"FluAppBar");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluButton.qml"),uri,major,minor,"FluButton");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluCheckBox.qml"),uri,major,minor,"FluCheckBox");
     qmlRegisterType(QUrl("qrc:/com.zhuzichu/controls/FluComboBox.qml"),uri,major,minor,"FluComboBox");

src/FluentUI.pro

@@ -6,7 +6,7 @@ TARGET      = $$qtLibraryTarget($$TARGET)
 uri         = FluentUI
 
 ##########################################
-CONFIG += staticlib  # staticlib or sharedlib
+CONFIG += sharedlib  # staticlib or sharedlib
 #** 多次切换编译构建模式，建议先清理缓存。项目右键->清理
 
 #*[staticlib] 构建静态库.a
@@ -29,6 +29,7 @@ HEADERS += \
     Fluent.h \
     FluentUI.h \
     FramelessView.h \
+    WindowHelper.h \
     qml_plugin.h \
     stdafx.h
 
@@ -38,6 +39,7 @@ SOURCES += \
     FluApp.cpp \
     Fluent.cpp \
     FluentUI.cpp \
+    WindowHelper.cpp \
     qml_plugin.cpp \
 
 win32 {

src/FramelessView_win.cpp

@@ -177,7 +177,6 @@ void FramelessView::showEvent(QShowEvent* e)
 }
 FramelessView::~FramelessView()
 {
-    qInfo()<<"FramelessView析构了";
     if (d->mMenuHandler != NULL)
     {
         ::DestroyMenu(d->mMenuHandler);

src/WindowHelper.cpp

@@ -0,0 +1,27 @@
+#include "WindowHelper.h"
+
+WindowHelper::WindowHelper(QObject *parent)
+    : QObject{parent}
+{
+
+}
+
+void WindowHelper::classBegin()
+{
+}
+
+void WindowHelper::componentComplete()
+{
+
+    auto rootItem = qobject_cast<QQuickItem*>(parent());
+    if (auto window = rootItem->window())
+    {
+        this->window = window;
+        this->window->setTitle("FluentUI");
+        qDebug()<<"--------->--------->";
+    }
+}
+
+void WindowHelper::setTitle(const QString& text){
+    window->setTitle(text);
+}

src/WindowHelper.h

@@ -0,0 +1,24 @@
+#ifndef WINDOWHELPER_H
+#define WINDOWHELPER_H
+
+#include <QObject>
+#include <QQuickWindow>
+#include <QQuickItem>
+
+class WindowHelper : public QObject, public QQmlParserStatus
+{
+    Q_OBJECT
+
+public:
+    explicit WindowHelper(QObject *parent = nullptr);
+    void classBegin() override;
+    void componentComplete() override;
+
+    Q_INVOKABLE void setTitle(const QString& text);
+private:
+
+  QQuickWindow* window;
+
+};
+
+#endif // WINDOWHELPER_H

src/controls/FluAppBar.qml

@@ -0,0 +1,112 @@
+import QtQuick 2.15
+import QtQuick.Window 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+
+
+Rectangle{
+
+    color: FluApp.isDark ? "#323232" : "#FFFFFF"
+    height: 50
+    width: {
+       if(parent==null)
+           return 200
+       return parent.width
+    }
+
+    property string title: "标题"
+
+    MouseArea{
+        property var lastClickTime: new Date()
+        anchors.fill: parent
+        anchors.topMargin: 5
+        acceptedButtons: Qt.LeftButton
+        onPressed: Window.window.startSystemMove()
+        onDoubleClicked: {
+            toggleMaximized();
+        }
+    }
+
+    function toggleMaximized() {
+        if (Window.window.visibility === Window.Maximized) {
+            Window.window.showNormal();
+        } else {
+            Window.window.showMaximized();
+        }
+    }
+
+
+
+    FluText {
+        text: title
+        anchors{
+            verticalCenter: parent.verticalCenter
+            left: parent.left
+            leftMargin: 14
+        }
+        fontStyle: FluText.Title
+        font.pixelSize: 14
+        font.bold: true
+    }
+
+    RowLayout{
+        anchors.right: parent.right;
+        height: parent.height
+        spacing: 5
+
+        RowLayout{
+            Layout.alignment: Qt.AlignVCenter
+            spacing: 5
+            FluText{
+                text:"夜间模式"
+                fontStyle: FluText.Body
+            }
+            FluToggleSwitch{
+                checked: FluApp.isDark
+                onClicked2:{
+                    FluApp.isDark = !FluApp.isDark
+                }
+            }
+        }
+
+        FluIconButton{
+            icon : FluentIcons.FA_window_minimize
+            Layout.alignment: Qt.AlignVCenter
+            iconSize: 15
+            iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
+            onClicked: {
+                Window.window.showMinimized()
+            }
+        }
+        FluIconButton{
+            icon :  {
+                if(Window.window == null)
+                    return false
+                return Window.Maximized === Window.window.visibility  ? FluentIcons.FA_window_restore : FluentIcons.FA_window_maximize
+            }
+            Layout.alignment: Qt.AlignVCenter
+            iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
+            iconSize: 15
+            onClicked: {
+                toggleMaximized()
+            }
+        }
+        FluIconButton{
+            icon : FluentIcons.FA_close
+            Layout.alignment: Qt.AlignVCenter
+            iconSize: 15
+            iconColor: FluApp.isDark ? "#FFFFFF" : "#000000"
+            onClicked: {
+                Window.window.close()
+            }
+        }
+    }
+
+    Rectangle{
+        width: parent.width;
+        height: 1;
+        anchors.bottom: parent.bottom;
+        color: FluApp.isDark ? "#666666" : "#EEEEEE"
+    }
+
+}

src/controls/FluButton.qml

@@ -1,6 +1,5 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
-import QtQuick.Controls.Material 2.15
 
 Rectangle {
     id: button
@@ -10,19 +9,33 @@ Rectangle {
     property int topPadding: 8
     property int bottomPadding: 8
     property bool disabled: false
+    property color primaryColor : "#0064B0"
     signal clicked
     radius: 4
-    color: button_mouse.containsMouse ? "#eeeeee" : "#FFFFFF"
+    color:{
+        if(FluApp.isDark){
+            if(disabled){
+                return "#C7C7C7"
+            }
+            return  button_mouse.containsMouse ? "#444444" : "#3e3e3e"
+        }else{
+            if(disabled){
+                return "#C7C7C7"
+            }
+            return  button_mouse.containsMouse ? "#FBFBFB" : "#FFFFFF"
+        }
+    }
     width: button_text.implicitWidth
     height: button_text.implicitHeight
-    border.color: "#cccccc"
+
+    border.color: FluApp.isDark ? "#505050" : "#DFDFDF"
     border.width: 1
 
-    Text {
+
+    FluText {
         id: button_text
         text: "Standard Button"
-        color: "#000000"
+        font.pixelSize: 14
-        font.pixelSize: 13
         leftPadding: button.startPadding
         rightPadding: button.endPadding
         topPadding: button.topPadding
@@ -35,6 +48,8 @@ Rectangle {
         anchors.fill: parent
         hoverEnabled: true
         onClicked: {
+            if(disabled)
+                return
             button.clicked()
         }
     }

src/controls/FluFilledButton.qml

@@ -1,6 +1,5 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
-import QtQuick.Controls.Material 2.15
 
 Rectangle {
     id: button
@@ -21,14 +20,12 @@ Rectangle {
     }
     width: button_text.implicitWidth
     height: button_text.implicitHeight
-    border.color: "#cccccc"
-    border.width: 1
 
-    Text {
+    FluText {
         id: button_text
-        text: "Standard Button"
+        text: "Filled Button"
         color: "#FFFFFFFF"
-        font.pixelSize: 13
+        font.pixelSize: 14
         leftPadding: button.startPadding
         rightPadding: button.endPadding
         topPadding: button.topPadding

src/controls/FluIconButton.qml

@@ -2,19 +2,43 @@
 
 Rectangle {
 
-    width: text.implicitWidth
+    id:button
-    height: text.implicitHeight
+    width: 30
+    height: 30
 
+    property int iconSize: 20
     property int icon
+    property color iconColor: "#000000"
+    signal clicked
+
+    radius: 4
+
+    color: {
+        if(FluApp.isDark){
+            return button_mouse.containsMouse ? "#000000" : "#00000000"
+        }else{
+            return button_mouse.containsMouse ? "#F4F4F4" : "#00000000"
+        }
+    }
 
     Text {
-        id:text
+        id:text_icon
         font.family: "fontawesome"
-        font.pixelSize: 16
+        font.pixelSize: iconSize
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
-//        text:icon
+        anchors.centerIn: parent
+        color: iconColor
         text: (String.fromCharCode(icon).toString(16));
     }
 
+    MouseArea{
+        id:button_mouse
+        anchors.fill: parent
+        hoverEnabled: true
+        onClicked: {
+            button.clicked()
+        }
+    }
+
 }

src/controls/FluRectangle.qml

@@ -0,0 +1,5 @@
+import QtQuick 2.15
+
+Item {
+
+}

src/controls/FluText.qml

@@ -16,10 +16,10 @@ Text {
         Caption
     }
 
-    property int fontStyle: FluText.Display
+    property int fontStyle: FluText.Body
-    property color textColor: "#333333"
+    property color textColor: FluApp.isDark ? "#FFFFFF" : "#1A1A1A"
 
-    property int pixelSize : 16
+    property int pixelSize : 14
 
     color: textColor
 
@@ -66,6 +66,7 @@ Text {
                 font.pixelSize = text.pixelSize * 0.8
                 break
             default:
+                font.pixelSize = text.pixelSize * 1.0
                 break
         }
     }

src/controls/FluToggleSwitch.qml

@@ -4,10 +4,15 @@ import QtQuick.Controls 2.0
 Switch {
     id: root
     property color checkedColor: "#0064B0"
-
+    signal clicked2
-    indicator: Rectangle {
     width: 40
+    implicitWidth: 40
     height: 20
+    implicitHeight: 20
+    checkable: false
+    indicator: Rectangle {
+        width: root.width
+        height: root.height
         radius: height / 2
         color: root.checked ? checkedColor : "white"
         border.width: 1
@@ -21,10 +26,17 @@ Switch {
             anchors.verticalCenter: parent.verticalCenter
             color: root.checked ? "#FFFFFF" : "#666666"
 //            border.color: "#D5D5D5"
-
             Behavior on x {
                 NumberAnimation { duration: 200 }
             }
         }
     }
+    MouseArea{
+        id:switch_mouse
+        anchors.fill: parent
+        hoverEnabled: true
+        onClicked: {
+            root.clicked2()
+        }
+    }
 }

src/controls/FluWindow.qml

@@ -0,0 +1,36 @@
+import QtQuick 2.15
+import QtQuick.Window 2.15
+import QtQuick.Layouts 1.15
+import FluentUI 1.0
+
+Rectangle {
+
+    id:root
+    property bool isMax: {
+        if(Window.window == null)
+            return false
+        return Window.Maximized === Window.window.visibility
+    }
+    property string title: "FluentUI"
+
+    onIsMaxChanged: {
+        if(isMax){
+            root.anchors.margins = 4
+            root.anchors.fill = parent
+        }else{
+            root.anchors.margins = 0
+            root.anchors.fill = null
+        }
+    }
+
+    color : FluApp.isDark ? "#202020" : "#F3F3F3"
+
+    Component.onCompleted: {
+
+    }
+
+    WindowHelper{
+        id:helper
+    }
+
+}

src/res.qrc

@@ -15,5 +15,8 @@
         <file>controls/FluTextBox.qml</file>
         <file>controls/FluTimePicker.qml</file>
         <file>res/font/fontawesome-webfont.ttf</file>
+        <file>controls/FluAppBar.qml</file>
+        <file>controls/FluRectangle.qml</file>
+        <file>controls/FluWindow.qml</file>
     </qresource>
 </RCC>

src/win_install.bat

@@ -20,7 +20,10 @@ if %ANDROID% == YES copy /y %LIBFILE_PATH% %BUILDER_BIN_PATH%
 
 if %1 == SHARED (
     echo running install to qtqml folder
+	del /s /q %PRESET_PATH%\plugins.qmltypes
+	%QT_QML_FLUENT_PATH%\..\..\bin\qmlplugindump.exe -nonrelocatable FluentUI 1.0 .\ > %PRESET_PATH%\plugins.qmltypes
     rmdir /s /q %QT_QML_FLUENT_PATH% & md %QT_QML_FLUENT_PATH%
     copy /y %BUILDER_BIN_PATH% %QT_QML_FLUENT_PATH%
+	xcopy %PRESET_PATH% %QT_QML_FLUENT_PATH% /s/e/i/y
 	cd %QT_QML_FLUENT_PATH%
 )