add basic code.

Examples/FluentWindow/qml/Main.qml

@@ -1,14 +1,18 @@
 import QtQuick
 import Fluent as Fluent
 
-Window {
+Fluent.Window {
     width: 640
     height: 480
     visible: true
     title: qsTr("FluentWindow")
 
     Fluent.Rectangle {
+        x:100
+        y:100
         width: 100
         height: 100
+        color:"red"
+        radius:[10,0,10,0]
     }
 }

Fluent/App.cpp

@@ -0,0 +1,26 @@
+#include "App.h"
+
+App::App(QObject *parent) : QObject{parent} {
+}
+
+QString App::windowIcon() const {
+    return m_windowIcon;
+}
+
+void App::setWindowIcon(const QString &icon) {
+    if (m_windowIcon != icon) {
+        m_windowIcon = icon;
+        emit windowIconChanged();
+    }
+}
+
+bool App::useSystemAppBar() const {
+    return m_useSystemAppBar;
+}
+
+void App::setUseSystemAppBar(bool use) {
+    if (m_useSystemAppBar != use) {
+        m_useSystemAppBar = use;
+        emit useSystemAppBarChanged();
+    }
+}

Fluent/App.h

@@ -0,0 +1,31 @@
+#ifndef APP_H
+#define APP_H
+
+#include <QObject>
+#include <QQmlEngine>
+
+class App : public QObject {
+    Q_OBJECT
+    QML_ELEMENT
+    QML_SINGLETON
+    Q_PROPERTY(QString windowIcon READ windowIcon WRITE setWindowIcon NOTIFY windowIconChanged)
+    Q_PROPERTY(bool useSystemAppBar READ useSystemAppBar WRITE setUseSystemAppBar NOTIFY useSystemAppBarChanged)
+
+public:
+    App(QObject *parent = nullptr);
+    QString windowIcon() const;
+    void setWindowIcon(const QString &icon);
+
+    bool useSystemAppBar() const;
+    void setUseSystemAppBar(bool use);
+
+signals:
+    void windowIconChanged();
+    void useSystemAppBarChanged();
+
+private:
+    QString m_windowIcon;
+    bool m_useSystemAppBar = false;
+};
+
+#endif // APP_H

Fluent/CMakeLists.txt

@@ -8,11 +8,25 @@ add_library(Fluent
     QClassStdStream.h QClassStdStream.cpp
 )
 
-qt_add_qml_module(Fluent
+set_source_files_properties(qml/Router.qml PROPERTIES
+    QT_QML_SINGLETON_TYPE TRUE
+)
+
+qt6_add_qml_module(Fluent
     URI Fluent
     VERSION 1.0
     SOURCES
+        App.h App.cpp
+        Frameless.h Frameless.cpp
+        Icons.h
         Rectangle.h Rectangle.cpp
+        Theme.h Theme.cpp
+    QML_FILES
+        qml/AppBar.qml
+        qml/IconButton.qml
+        qml/Router.qml
+        qml/Text.qml
+        qml/Window.qml
 )
 
 target_include_directories(Fluent

Fluent/Frameless.cpp

@@ -0,0 +1,76 @@
+#include "Frameless.h"
+
+Frameless::Frameless(QQuickItem *parent) : QQuickItem{parent} {
+}
+
+QQuickItem *Frameless::appBar() const {
+    return m_appBar;
+}
+
+void Frameless::setAppBar(QQuickItem *appBar) {
+    if (m_appBar != appBar) {
+        m_appBar = appBar;
+        emit appBarChanged();
+    }
+}
+
+QQuickItem *Frameless::maximizeButton() const {
+    return m_maximizeButton;
+}
+
+void Frameless::setMaximizeButton(QQuickItem *button) {
+    if (m_maximizeButton != button) {
+        m_maximizeButton = button;
+        emit maximizeButtonChanged();
+    }
+}
+
+bool Frameless::fixSize() const {
+    return m_fixSize;
+}
+
+void Frameless::setFixSize(bool fix) {
+    if (m_fixSize != fix) {
+        m_fixSize = fix;
+        emit fixSizeChanged();
+    }
+}
+
+bool Frameless::topmost() const {
+    return m_topmost;
+}
+
+void Frameless::setTopmost(bool topmost) {
+    if (m_topmost != topmost) {
+        m_topmost = topmost;
+        emit topmostChanged();
+    }
+}
+
+bool Frameless::disabled() const {
+    return m_disabled;
+}
+
+void Frameless::setDisabled(bool disabled) {
+    if (m_disabled != disabled) {
+        m_disabled = disabled;
+        emit disabledChanged();
+    }
+}
+
+void Frameless::setHitTestVisible(QQuickItem *item) {
+    if (!m_hitTestList.contains(item)) {
+        m_hitTestList.append(item);
+    }
+}
+
+void Frameless::onDestruction() {
+    QGuiApplication::instance()->removeNativeEventFilter(this);
+}
+
+void Frameless::componentComplete() {
+}
+
+bool Frameless::nativeEventFilter(const QByteArray &eventType, void *message, qintptr *result) {
+    return false;
+}

Fluent/Frameless.h

@@ -0,0 +1,55 @@
+#ifndef FRAMELESS_H
+#define FRAMELESS_H
+
+#include <QAbstractNativeEventFilter>
+#include <QQuickItem>
+
+class Frameless : public QQuickItem, QAbstractNativeEventFilter {
+    Q_OBJECT
+    QML_ELEMENT
+    Q_PROPERTY(QQuickItem *appBar READ appBar WRITE setAppBar NOTIFY appBarChanged)
+    Q_PROPERTY(QQuickItem *maximizeButton READ maximizeButton WRITE setMaximizeButton NOTIFY maximizeButtonChanged)
+    Q_PROPERTY(bool fixSize READ fixSize WRITE setFixSize NOTIFY fixSizeChanged)
+    Q_PROPERTY(bool topmost READ topmost WRITE setTopmost NOTIFY topmostChanged)
+    Q_PROPERTY(bool disabled READ disabled WRITE setDisabled NOTIFY disabledChanged)
+
+public:
+    Frameless(QQuickItem *parent = nullptr);
+    QQuickItem *appBar() const;
+    void setAppBar(QQuickItem *appBar);
+
+    QQuickItem *maximizeButton() const;
+    void setMaximizeButton(QQuickItem *button);
+
+    bool fixSize() const;
+    void setFixSize(bool fix);
+
+    bool topmost() const;
+    void setTopmost(bool topmost);
+
+    bool disabled() const;
+    void setDisabled(bool disabled);
+
+    Q_INVOKABLE void setHitTestVisible(QQuickItem *item);
+    Q_INVOKABLE void onDestruction();
+    void componentComplete() final;
+
+    bool nativeEventFilter(const QByteArray &eventType, void *message, qintptr *result) final;
+
+signals:
+    void appBarChanged();
+    void maximizeButtonChanged();
+    void fixSizeChanged();
+    void topmostChanged();
+    void disabledChanged();
+
+private:
+    QQuickItem *m_appBar = nullptr;
+    QQuickItem *m_maximizeButton = nullptr;
+    bool m_fixSize = false;
+    bool m_topmost = false;
+    bool m_disabled = false;
+    QList<QPointer<QQuickItem>> m_hitTestList;
+};
+
+#endif // FRAMELESS_H

Fluent/Rectangle.cpp

@@ -28,3 +28,25 @@ void Rectangle::paint(QPainter *painter) {
     painter->fillPath(path, m_color);
     painter->restore();
 }
+
+QColor Rectangle::color() const {
+    return m_color;
+}
+
+void Rectangle::setColor(const QColor &color) {
+    if (m_color != color) {
+        m_color = color;
+        emit colorChanged();
+    }
+}
+
+QList<int> Rectangle::radius() const {
+    return m_radius;
+}
+
+void Rectangle::setRadius(const QList<int> &radius) {
+    if (m_radius != radius) {
+        m_radius = radius;
+        emit radiusChanged();
+    }
+}

Fluent/Rectangle.h

@@ -1,17 +1,28 @@
 #ifndef RECTANGLE_H
 #define RECTANGLE_H
 
-#include <QQmlEngine>
 #include <QQuickPaintedItem>
 
 class Rectangle : public QQuickPaintedItem {
     Q_OBJECT
     QML_ELEMENT
-public:
+    Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged)
-    explicit Rectangle(QQuickItem *parent = nullptr);
+    Q_PROPERTY(QList<int> radius READ radius WRITE setRadius NOTIFY radiusChanged)
 
+public:
+    Rectangle(QQuickItem *parent = nullptr);
     void paint(QPainter *painter) final;
 
+    QColor color() const;
+    void setColor(const QColor &color);
+
+    QList<int> radius() const;
+    void setRadius(const QList<int> &radius);
+
+signals:
+    void colorChanged();
+    void radiusChanged();
+
 private:
     QColor m_color;
     QList<int> m_radius;

Fluent/Theme.cpp

@@ -0,0 +1,26 @@
+#include "Theme.h"
+
+Theme::Theme(QObject *parent) : QObject{parent} {
+}
+
+QColor Theme::fontPrimaryColor() const {
+    return m_fontPrimaryColor;
+}
+
+void Theme::setFontPrimaryColor(const QColor &color) {
+    if (m_fontPrimaryColor != color) {
+        m_fontPrimaryColor = color;
+        emit fontPrimaryColorChanged();
+    }
+}
+
+QColor Theme::itemNormalColor() const {
+    return m_itemNormalColor;
+}
+
+void Theme::setItemNormalColor(const QColor &color) {
+    if (m_itemNormalColor != color) {
+        m_itemNormalColor = color;
+        emit itemNormalColorChanged();
+    }
+}

Fluent/Theme.h

@@ -0,0 +1,33 @@
+#ifndef THEME_H
+#define THEME_H
+
+#include <QColor>
+#include <QObject>
+#include <QQmlEngine>
+
+class Theme : public QObject {
+    Q_OBJECT
+    QML_ELEMENT
+    QML_SINGLETON
+    Q_PROPERTY(QColor fontPrimaryColor READ fontPrimaryColor WRITE setFontPrimaryColor NOTIFY fontPrimaryColorChanged)
+    Q_PROPERTY(QColor itemNormalColor READ itemNormalColor WRITE setItemNormalColor NOTIFY itemNormalColorChanged)
+
+public:
+    Theme(QObject *parent = nullptr);
+
+    QColor fontPrimaryColor() const;
+    void setFontPrimaryColor(const QColor &color);
+
+    QColor itemNormalColor() const;
+    void setItemNormalColor(const QColor &color);
+
+signals:
+    void fontPrimaryColorChanged();
+    void itemNormalColorChanged();
+
+private:
+    QColor m_fontPrimaryColor;
+    QColor m_itemNormalColor;
+};
+
+#endif // THEME_H

Fluent/qml/AppBar.qml

@@ -0,0 +1,69 @@
+import QtQuick as Quick
+import QtQuick.Layouts
+import Fluent
+
+Quick.Rectangle {
+    id: root
+    property bool showMinimize: true
+    property bool showMaximize: true
+    property bool showClose: true
+    property bool showStayTop: true
+    property bool showDark: false
+    property string title: ""
+    property url icon
+    property string maximizeText : qsTr("Maximize")
+    property Quick.color textColor: Theme.fontPrimaryColor
+    property Quick.color maximizeNormalColor: Theme.itemNormalColor
+    property alias buttonMaximize: btn_maximize
+
+    Quick.Item{
+        id:d
+        property var hitTestList: []
+        property bool hoverMaxBtn: false
+        property var win: Window.window
+        property bool stayTop: {
+            if(d.win instanceof Window){
+                return d.win.stayTop
+            }
+            return false
+        }
+        property bool isRestore: win && (Window.Maximized === win.visibility || Window.FullScreen === win.visibility)
+        property bool resizable: win && !(win.height === win.maximumHeight && win.height === win.minimumHeight && win.width === win.maximumWidth && win.width === win.minimumWidth)
+        function containsPointToItem(point,item){
+            var pos = item.mapToGlobal(0,0)
+            var rect = Qt.rect(pos.x,pos.y,item.width,item.height)
+            if(point.x>rect.x && point.x<(rect.x+rect.width) && point.y>rect.y && point.y<(rect.y+rect.height)){
+                return true
+            }
+            return false
+        }
+    }
+
+    RowLayout {
+        IconButton{
+            id:btn_maximize
+            property bool hover: btn_maximize.hovered
+            Layout.preferredWidth: 40
+            Layout.preferredHeight: 30
+            padding: 0
+            verticalPadding: 0
+            horizontalPadding: 0
+            iconSource : d.isRestore  ? Icons.ChromeRestore : Icons.ChromeMaximize
+            color: {
+                if(down){
+                    return maximizePressColor
+                }
+                return btn_maximize.hover ? maximizeHoverColor : maximizeNormalColor
+            }
+            Layout.alignment: Qt.AlignVCenter
+            visible: d.resizable && !isMac && showMaximize
+            radius: 0
+            iconColor: root.textColor
+            text:d.isRestore?restoreText:maximizeText
+            iconSize: 11
+            onClicked: maxClickListener()
+        }
+    }
+
+
+}

Fluent/qml/IconButton.qml

@@ -0,0 +1,30 @@
+import QtQuick
+import QtQuick.Controls
+
+Button {
+    property int iconSize: 20
+    property int iconSource
+    property int radius:4
+    property color color: {
+        if(!enabled){
+            return disableColor
+        }
+        if(pressed){
+            return pressedColor
+        }
+        return hovered ? hoverColor : normalColor
+    }
+    property color iconColor: {
+        if (FluTheme.dark) {
+            if (!enabled) {
+                return Qt.rgba(130 / 255, 130 / 255, 130 / 255, 1)
+            }
+            return Qt.rgba(1, 1, 1, 1)
+        } else {
+            if (!enabled) {
+                return Qt.rgba(161 / 255, 161 / 255, 161 / 255, 1)
+            }
+            return Qt.rgba(0, 0, 0, 1)
+        }
+    }
+}

Fluent/qml/Router.qml

@@ -0,0 +1,12 @@
+pragma Singleton
+
+import QtQml
+
+QtObject {
+    property var windows: []
+    function addWindow(window){
+        if(!window.transientParent){
+            windows.push(window)
+        }
+    }
+}

Fluent/qml/Window.qml

@@ -0,0 +1,42 @@
+import QtQuick as Quick
+import Fluent
+
+Quick.Window {
+    id: root
+    property string windowIcon: App.windowIcon
+    property bool showStayTop: false
+    property bool showMaximize: true
+    property bool showMinimize: true
+    property bool showClose: true
+    property bool showDark: false
+    property bool fixSize: false
+    property bool stayTop: false
+    property Quick.Item appBar: AppBar {
+        title: root.title
+        height: 30
+        showDark: root.showDark
+        showClose: root.showClose
+        showMinimize: root.showMinimize
+        showMaximize: root.showMaximize
+        showStayTop: root.showStayTop
+        icon: root.windowIcon
+    }
+    Frameless {
+        id: frameless
+        appBar: root.appBar
+        maximizeButton: appBar.buttonMaximize
+        fixSize: root.fixSize
+        topmost: root.stayTop
+        disabled: App.useSystemAppBar
+        Quick.Component.onCompleted: {
+            frameless.setHitTestVisible(appBar.layoutMacosButtons)
+            frameless.setHitTestVisible(appBar.layoutStandardbuttons)
+        }
+        Quick.Component.onDestruction: {
+            frameless.onDestruction()
+        }
+    }
+    Quick.Component.onCompleted: {
+        Router.addWindow(root)
+    }
+}