update

Fix the _systemDark don't get system color while app first boot.

.github/workflows/ubuntu.yml

@@ -47,7 +47,7 @@ jobs:
           version: 1.10.2
           
       - name: ubuntu install GL library
-        run: sudo apt-get install -y libxkbcommon-x11-dev libxcb-icccm4-dev libxcb-image0-dev libxcb-keysyms1-dev libxcb-randr0-dev libxcb-shape0-dev libxcb-xfixes0-dev libxcb-xinerama0-dev libxcb-sync-dev  libxcb-render-util0-dev libxcb-shm0-dev
+        run: sudo apt-get install -y libgl1-mesa-dev libxcb1-dev libgtk-3-dev libxkbcommon-x11-dev libxcb-icccm4-dev libxcb-image0-dev libxcb-keysyms1-dev libxcb-randr0-dev libxcb-shape0-dev libxcb-xfixes0-dev libxcb-xinerama0-dev libxcb-sync-dev  libxcb-render-util0-dev libxcb-shm0-dev
         
       - name: build ubuntu
         run: |

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "framelesshelper"]
+	path = framelesshelper
+	url = https://github.com/zhuzichu520/framelesshelper.git

CMakeLists.txt

@@ -4,3 +4,4 @@ project(FluentUI VERSION 0.1 LANGUAGES CXX)
 
 add_subdirectory(src)
 add_subdirectory(example)
+add_subdirectory(framelesshelper)

README.md

@@ -1,99 +1,119 @@
-# FluentUI
+<div align=center>
+  <img width=64 src="doc/preview/fluent_design.svg">
+</div>
 
-## 简介
+<h1 align="center">
+  QML FluentUI 
+</h1>
+<p align="center">
+  A fluent design component library for Qt QML
+</p>
 
-这是一个漂亮的Fluent组件库，使用QML插件开发的。main分支是Qt6.4.3，<a href="https://github.com/zhuzichu520/FluentUI/wiki/%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8" target="_blank">如何使用？</a>。如果需要qt5的请切换至qt5分支，<a href="https://github.com/zhuzichu520/FluentUI/wiki/%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8%EF%BC%881.2.7%E4%BB%A5%E5%8F%8A%E4%B9%8B%E5%89%8D%E7%89%88%E6%9C%AC%EF%BC%89" target="_blank">如何使用？</a>
+![win-badge] ![ubuntu-badge] ![macos-badge] ![release-badge] ![download-badge] ![download-latest]
+
+<p align="center">
+English | <a href="README_zh_CN.md">简体中文</a>
+</p>
+<div align=center>
+  <img src="doc/preview/demo_large.png">
+</div>
 
-## 编译状态
-| [Windows][win-link]| [Ubuntu][ubuntu-link]|[MacOS][macos-link]|
-|---------------|---------------|-----------------|
-| ![win-badge]  | ![ubuntu-badge]      | ![macos-badge] |
 
 [win-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AWindows "WindowsAction"
 [win-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Windows/badge.svg  "Windows"
-
 [ubuntu-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AUbuntu "UbuntuAction"
 [ubuntu-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Ubuntu/badge.svg "Ubuntu"
-
 [macos-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AMacOS "MacOSAction"
 [macos-badge]: https://github.com/zhuzichu520/FluentUI/workflows/MacOS/badge.svg "MacOS"
-
-## 发布
-
-|[已发布][release-link]|[下载][download-link]|下载次数|
-|:--:|:--:|:--:|
-|![release-badge] |![download-badge]|![download-latest]|
-
 [release-link]: https://github.com/zhuzichu520/FluentUI/releases "Release status"
 [release-badge]: https://img.shields.io/github/release/zhuzichu520/FluentUI.svg?style=flat-square "Release status"
 [download-link]: https://github.com/zhuzichu520/FluentUI/releases/latest "Download status"
 [download-badge]: https://img.shields.io/github/downloads/zhuzichu520/FluentUI/total.svg "Download status"
 [download-latest]: https://img.shields.io/github/downloads/zhuzichu520/FluentUI/latest/total.svg "latest status"
 
-## 支持的组件
 
-|目录|说明|备注|
+<p align=center>
-|----|----|----|
+This is a beautiful FluentUI component library based on Qt QML. Currently the main branch supports Qt 6. If you want to use it in Qt 5, checkout the Qt 5 branch.
-|FluApp|初始化入口|支持路由跳转|
+</p>
-|FluWindow|无边框窗口|解决windows拖动闪烁问题|
-|FluAppBar|窗口顶部标题栏|支持拖动窗口，最小化、最大化、关闭窗口|
-|FluText|Text文本||
-|FluButton|按钮||
-|FluFilledButton|实心按钮||
-|FluIconButton|图标按钮||
-|FluTextButton|文本按钮||
-|FluIcon|图标||
-|FluRadioButton|单选按钮||
-|FluTextBox|单行输入框||
-|FluMultiLineTextBox|多行输入框||
-|FluToggleSwitch|开关按钮||
-|FluSlider|拖动条||
-|FluInfoBar|提示Toast||
-|FluContentDialog|对话框||
-|FluProgressBar|条形进度条||
-|FluProgressRing|圆形进度条||
-|FluRectangle|矩形|支持部分圆角、clip|
-|FluMenu|菜单框||
-|FluTooltip|tooltip提示框||
-|FluTreeView|树控件||
-|FluTheme|主题设置|支持主题颜色切换，夜间模式|
-|FluCarousel|轮播图组件|支持无限轮播|
-|FluTimePicker|时间选择器||
-|FluDatePicker|日期选择器||
-|FluMenu|菜单Popup||
-|FluNavigationView|响应式导航布局||
-|FluScrollbar|滚动条||
-|FluToggleButton|开关按钮||
-|FluPagination|分页组件||
-|FluTableView|表格组件||
-|FluMediaPlayer|播放器||
-|FluFlipView|FlipView||
 
-# 部分效果预览
+## Requirements
 
-## 首页
++ Qt Core, Qt Quick, Qt QML, Qt ShaderTool, Qt 5 Compatibility Module. (**Essential**)
++ Qt LinguistTool (optional,for translations)
++ Qt Svg (optional, however essential for Qt 5)
 
-![](doc/preview/home.png)
+Use [Qt Online Installers](https://download.qt.io/archive/online_installers/) to aquire the moudules (**Recommanded**) or compile them first before using the library.
 
-## 各种Button按钮
+## ⚽ Get started
 
-![](doc/preview/buttons.png)
++ Download the [pre-built release](https://github.com/zhuzichu520/FluentUI/releases). (Please pecify your platform and compilers.)
 
-## 主题颜色切换、夜间模式
++ run `example` program.
 
-![](doc/preview/theme.png)
+or 
 
-## TableView表格组件
++ Clone the repository.
 
-![](doc/preview/tableview.png)
+```SHELL
+git clone --recursive https://github.com/zhuzichu520/FluentUI.git
+```
 
-## FluTreeView树组件
++ Build
 
-![](doc/preview/treeview.png)
+```
+git clone --recursive https://github.com/zhuzichu520/FluentUI.git
+cd FluentUI
+mkdir build
+cd build
+cmake -DCMAKE_PREFIX_PATH=<YOUR_QT_SDK_DIR_PATH> -DCMAKE_BUILD_TYPE=Release -GNinja <PATH_TO_THE_REPOSITORY>
+cmake --build . --config Release --target all --parallel
+```
 
-## 轮播图组件
++ Use your IDE (`Qt Creator` or `CLion`) to open the project. (only **CMake** supported).
 
-![](doc/preview/carousel.png)
+<div align=center>
+  <img src="doc/preview/qt_creator_project.png">
+</div>
 
-### ⚡ Visitor count
++ Compile the project. Then try to execute the `example` demo program.
+
++ Great! Now you are ready to write your first QML FluentUI program! Check the documentations for more details.
+
+
+## 📑 Documentations
+
+(Work in progress...🚀)
+
+## Supported components
+
+|Catalog|Detail|Notes / Demos|
+|:----:|:----:|:----:|
+|FluApp|The initial entry of the program|Router supported(SPA)|
+|FluWindow|Frameless Window|*This only works on windows|
+|FluAppBar|Title bar on top of the window|Drag, minimize, maximize and close are supported.|
+|FluText|Common text||
+|FluButton|Common button|![btn](doc/preview/demo_standardbtn.png) |
+|FluFilledButton|Filled button|![filledbtn](doc/preview/demo_filledbtn.png)|
+|FluTextButton|Text button|![textbtn](doc/preview/demo_textbtn.png)|
+|FluToggleButton|Toggle buttons|![togglebtn](doc/preview/demo_toggle_btn.png)|
+|FluIcon|Common icon|![icons](doc/preview/demo_icon.png)|
+|FluRadioButton|radio button|![radiobtn](doc/preview/demo_radiobtn.png)|
+|FluTextBox|Single-line input box|![textbox](doc/preview/demo_textbox.png)|
+|FluMultiLineTextBox|Multi-lines input area|![textarea](doc/preview/demo_multiline_textbox.png)|
+|FluToggleSwitch|toggle switch|![toggleswitch](doc/preview/demo_toggle_switch.png)|
+
+
+View more [`here`](doc/md/all_components.md)!
+
+
+## Reference
++ [**Windows design**: Design guidelines and toolkits of Microsoft.](https://learn.microsoft.com/en-us/windows/apps/design/)
++ [**Microsoft/WinUI-Gallery**: Microsoft's demo](https://github.com/microsoft/WinUI-Gallery)
+
+
+## License
+
+This FluentUI library currently licensed under [MIT License](./License)
+
+## ⚡ Visitor count
 ![](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)

README_zh_CN.md

@@ -0,0 +1,99 @@
+# FluentUI
+
+## 简介
+
+这是一个漂亮的Fluent组件库，使用QML插件开发的。main分支是Qt6.4.3，<a href="https://github.com/zhuzichu520/FluentUI/wiki/%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8" target="_blank">如何使用？</a>。如果需要qt5的请切换至qt5分支，<a href="https://github.com/zhuzichu520/FluentUI/wiki/%E6%96%B0%E6%89%8B%E5%85%A5%E9%97%A8%EF%BC%881.2.7%E4%BB%A5%E5%8F%8A%E4%B9%8B%E5%89%8D%E7%89%88%E6%9C%AC%EF%BC%89" target="_blank">如何使用？</a>
+
+## 编译状态
+| [Windows][win-link]| [Ubuntu][ubuntu-link]|[MacOS][macos-link]|
+|---------------|---------------|-----------------|
+| ![win-badge]  | ![ubuntu-badge]      | ![macos-badge] |
+
+[win-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AWindows "WindowsAction"
+[win-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Windows/badge.svg  "Windows"
+
+[ubuntu-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AUbuntu "UbuntuAction"
+[ubuntu-badge]: https://github.com/zhuzichu520/FluentUI/workflows/Ubuntu/badge.svg "Ubuntu"
+
+[macos-link]: https://github.com/zhuzichu520/FluentUI/actions?query=workflow%3AMacOS "MacOSAction"
+[macos-badge]: https://github.com/zhuzichu520/FluentUI/workflows/MacOS/badge.svg "MacOS"
+
+## 发布
+
+|[已发布][release-link]|[下载][download-link]|下载次数|
+|:--:|:--:|:--:|
+|![release-badge] |![download-badge]|![download-latest]|
+
+[release-link]: https://github.com/zhuzichu520/FluentUI/releases "Release status"
+[release-badge]: https://img.shields.io/github/release/zhuzichu520/FluentUI.svg?style=flat-square "Release status"
+[download-link]: https://github.com/zhuzichu520/FluentUI/releases/latest "Download status"
+[download-badge]: https://img.shields.io/github/downloads/zhuzichu520/FluentUI/total.svg "Download status"
+[download-latest]: https://img.shields.io/github/downloads/zhuzichu520/FluentUI/latest/total.svg "latest status"
+
+## 支持的组件
+
+|目录|说明|备注|
+|----|----|----|
+|FluApp|初始化入口|支持路由跳转|
+|FluWindow|无边框窗口|解决windows拖动闪烁问题|
+|FluAppBar|窗口顶部标题栏|支持拖动窗口，最小化、最大化、关闭窗口|
+|FluText|Text文本||
+|FluButton|按钮||
+|FluFilledButton|实心按钮||
+|FluIconButton|图标按钮||
+|FluTextButton|文本按钮||
+|FluIcon|图标||
+|FluRadioButton|单选按钮||
+|FluTextBox|单行输入框||
+|FluMultiLineTextBox|多行输入框||
+|FluToggleSwitch|开关按钮||
+|FluSlider|拖动条||
+|FluInfoBar|提示Toast||
+|FluContentDialog|对话框||
+|FluProgressBar|条形进度条||
+|FluProgressRing|圆形进度条||
+|FluRectangle|矩形|支持部分圆角、clip|
+|FluMenu|菜单框||
+|FluTooltip|tooltip提示框||
+|FluTreeView|树控件||
+|FluTheme|主题设置|支持主题颜色切换，夜间模式|
+|FluCarousel|轮播图组件|支持无限轮播|
+|FluTimePicker|时间选择器||
+|FluDatePicker|日期选择器||
+|FluMenu|菜单Popup||
+|FluNavigationView|响应式导航布局||
+|FluScrollbar|滚动条||
+|FluToggleButton|开关按钮||
+|FluPagination|分页组件||
+|FluTableView|表格组件||
+|FluMediaPlayer|播放器||
+|FluFlipView|FlipView||
+
+# 部分效果预览
+
+## 首页
+
+![](doc/preview/home.png)
+
+## 各种Button按钮
+
+![](doc/preview/buttons.png)
+
+## 主题颜色切换、夜间模式
+
+![](doc/preview/theme.png)
+
+## TableView表格组件
+
+![](doc/preview/tableview.png)
+
+## FluTreeView树组件
+
+![](doc/preview/treeview.png)
+
+## 轮播图组件
+
+![](doc/preview/carousel.png)
+
+### ⚡ Visitor count
+![](https://profile-counter.glitch.me/zhuzichu520-FluentUI/count.svg)

doc/md/all_components.md

@@ -0,0 +1,37 @@
+# 支持的组件
+
+|Catalog|Detail|Notes / Demos|
+|:----:|:----:|:----:|
+|FluApp|The initial entry of the program|Router supported(SPA)|
+|FluWindow|Frameless Window|*This only works on windows|
+|FluAppBar|Title bar on top of the window|Drag, minimize, maximize and close are supported.|
+|FluText|Common text||
+|FluButton|Common button|![btn](../preview/demo_standardbtn.png) |
+|FluFilledButton|Filled button|![filledbtn](../preview/demo_filledbtn.png)|
+|FluTextButton|Text button|![textbtn](../preview/demo_textbtn.png)|
+|FluToggleButton|Toggle buttons|![togglebtn](../preview/demo_toggle_btn.png)|
+|FluIcon|fluent icons|![icons](../preview/demo_icon.png)|
+|FluRadioButton|radio button|![radiobtn](../preview/demo_radiobtn.png)|
+|FluTextBox|Single-line input box|![textbox](../preview/demo_textbox.png)|
+|FluMultiLineTextBox|Multi-lines input area|![textarea](../preview/demo_multiline_textbox.png)|
+|FluToggleSwitch|toggle switch|![toggleswitch](../preview/demo_toggle_switch.png)|
+|FluSlider|Slider|![slider](../preview/demo_slider.png)|
+|FluInfoBar|提示Toast|![infobar](../preview/demo_infobar.png)|
+|FluContentDialog| dialog |![dialog](../preview/demo_content_dialog.png)|
+|FluProgressBar| progress bar |![progress](../preview/demo_progress_bar_ring.png)|
+|FluProgressRing|circle progress||
+|FluRectangle|reactangle| ![rect](../preview/demo_rectangle.png)</br>*partially support `round` and `clip` feature|
+|FluMenu|menu||
+|FluTooltip|tooltip|![tooltip](../preview/demo_tooltip.png)|
+|FluTreeView|tree view component|![treeview](../preview/demo_tree_view.png)|
+|FluTheme|theme settings|theme color changes, dark mode are supported|
+|FluCarousel|-||
+|FluTimePicker| time picker ||
+|FluDatePicker|date picker||
+|FluMenu|the menu popup||
+|FluNavigationView|responsive navigation view||
+|FluScrollbar|scroll bar||
+|FluPagination|||
+|FluTableView|table component||
+|FluMediaPlayer|multimedia components||
+|FluFlipView| flip view||

doc/preview/fluent_design.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" stroke="#000000">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+

example.svg

@@ -1 +1,7 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1678260749060" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11227" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M0 0m170.663111 0l682.652445 0q170.663111 0 170.663111 170.663111l0 682.652445q0 170.663111-170.663111 170.663111l-682.652445 0q-170.663111 0-170.663111-170.663111l0-682.652445q0-170.663111 170.663111-170.663111Z" fill="#EBF2FF" p-id="11228"></path><path d="M512.351993 787.674257c182.822858 0 330.926439 98.568613 331.033103 231.312514 0 1.674632-0.031999 3.338597-0.106664 5.002563H181.43622c-0.074665-1.663965-0.106664-3.327931-0.106664-5.002563 0-132.743901 148.210246-231.312514 331.022437-231.312514z" fill="#7D99C8" p-id="11229"></path><path d="M592.264994 721.158309v79.817004h-0.810649c-5.546551 30.079373-38.847191 53.204225-79.102352 53.204225-40.244495 0-73.545134-23.114185-79.091686-53.193559h-0.81065V721.158309h159.815337z" fill="#FBDBCB" p-id="11230"></path><path d="M508.213412 765.626716c-44.105748-1.226641-85.363555-19.306264-118.568196-56.916147-22.826191-25.866128-35.199267-53.054895-37.097894-81.576968l-21.610217-1.610633a59.988084 59.988084 0 0 1-55.433511-56.585488l-0.319994-5.72788a34.932606 34.932606 0 0 1 43.124435-35.839254l0.949314-9.098477a608.008666 608.008666 0 0 1 40.031166-159.015354l10.389117-25.866127H655.026354l10.389117 25.866127a608.008666 608.008666 0 0 1 40.031166 159.015354l0.95998 9.098477a34.932606 34.932606 0 0 1 43.103102 35.839254l-0.309327 5.72788a59.988084 59.988084 0 0 1-55.433512 56.585488l-21.610217 1.610633c-1.909294 28.522072-14.271703 55.710839-37.097893 81.576968-34.239287 38.793858-77.054395 56.798817-122.717444 56.980146z" fill="#FFE7DB" p-id="11231"></path><path d="M546.911273 182.822858a10.666444 10.666444 0 0 1 1.429303 4.31991c0.533322 5.055895 0.714652 9.226474 0.533322 12.501073l-0.202662 2.346618 3.221266-0.543989c21.876878-3.733256 38.452532-9.877128 49.705631-18.452949l2.197288-1.73863a10.666444 10.666444 0 0 1 16.682319 3.98925c8.767817 20.650236 11.125102 40.681819 7.039853 60.116081l-0.373325 1.578633c4.746568 1.514635 9.589134 3.199933 14.506364 5.066562 27.882086 10.581113 57.769463 26.367451 76.883732 75.65709 20.212912 52.084248 18.826274 116.562905-4.149247 193.425304l-1.855961 6.101206H701.425387c-0.47999-51.732256-8.319827-90.526114-23.540843-116.392242-15.221016-25.866128-29.716714-46.185704-43.487094-60.969396-41.513802 10.399783-79.85967 15.914335-115.037603 16.564988l-6.997188 0.063998v0.191996c-37.065894 0-77.737047-5.546551-122.024124-16.628986-13.77038 10.954438-28.266078 31.220683-43.487094 60.7774-15.221016 29.556718-23.060853 68.414575-23.540843 116.584238h-11.114435c-24.746151-79.571676-26.740776-146.076957-6.005209-199.52651 8.746484-22.548864 19.732922-38.079207 31.764672-49.321639 18.079623-20.660903 40.180496-36.009916 66.302619-46.068374a424.716485 424.716485 0 0 1 32.319326-11.029103c25.25814-9.034478 44.991063-16.767651 59.209433-23.210183a366.221704 366.221704 0 0 0 29.151393-14.869024l7.359847-4.266578a10.666444 10.666444 0 0 1 14.623695 3.733256z" fill="#7D99C8" p-id="11232"></path></svg>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 73 73" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000" stroke="#000000">
+
+<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+

example/CMakeLists.txt

@@ -20,7 +20,7 @@ endif()
 file(TO_CMAKE_PATH "/" PATH_SEPARATOR)
 
 #设置版本号
-add_definitions(-DVERSION=1,3,0,0)
+add_definitions(-DVERSION=1,3,1,0)
 
 find_package(Qt6 REQUIRED COMPONENTS Quick REQUIRED)
 
@@ -94,6 +94,8 @@ set_target_properties(example PROPERTIES
 target_link_libraries(example PRIVATE
     Qt6::Quick
     fluentuiplugin
+    FramelessHelper::Core
+    FramelessHelper::Quick
 )
 
 #安装

example/qml/TestWindow.qml

@@ -1,14 +1,69 @@
 import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Layouts
+import Qt.labs.platform
 import FluentUI
+import "qrc:///example/qml/global/"
 
 FluWindow {
+
     id:window
-    width: 400
+    title: "FluentUI"
-    height: 400
+    width: 1000
+    height: 640
+    closeDestory:false
+    minimumWidth: 520
+    minimumHeight: 460
+    launchMode: FluWindow.SingleTask
     visible: true
 
-    FluButton{
+    FluNavigationView2{
-        text:"123"
+        id:nav_view
+        anchors.fill: parent
+        items: ItemsOriginal
+        footerItems:ItemsFooter
+        z:11
+        displayMode:MainEvent.displayMode
+        logo: "qrc:/example/res/image/favicon.ico"
+        title:"FluentUI"
+        autoSuggestBox:FluAutoSuggestBox{
+            width: 280
+            anchors.centerIn: parent
+            iconSource: FluentIcons.Search
+            items: ItemsOriginal.getSearchData()
+            placeholderText: lang.search
+            onItemClicked:
+                (data)=>{
+                    ItemsOriginal.startPageByItem(data)
+                }
+        }
+        actionItem:Item{
+            height: 40
+            width: 148
+            RowLayout{
+                anchors.centerIn: parent
+                spacing: 5
+                FluText{
+                    text:lang.dark_mode
+                }
+                FluToggleSwitch{
+                    selected: FluTheme.dark
+                    clickFunc:function(){
+                        if(FluTheme.dark){
+                            FluTheme.darkMode = FluDarkMode.Light
+                        }else{
+                            FluTheme.darkMode = FluDarkMode.Dark
+                        }
+                    }
+                }
+            }
+        }
+        Component.onCompleted: {
+            ItemsOriginal.navigationView = nav_view
+            ItemsFooter.navigationView = nav_view
+//            nav_view.setCurrentIndex(0)
+        }
     }
 
 }

example/qml/component/CustomWindow.qml

@@ -0,0 +1,64 @@
+import QtQuick
+import QtQuick.Layouts
+import FluentUI
+import org.wangwenx190.FramelessHelper
+
+FluWindow {
+
+    id:window
+
+    property bool fixSize
+    property alias titleVisible: title_bar.titleVisible
+    property bool appBarVisible: true
+    default property alias content: container.data
+
+    Component.onCompleted: {
+        console.debug(FramelessUtils.frameBorderVisible)
+    }
+
+    FluAppBar {
+        id: title_bar
+        title: window.title
+        visible: window.appBarVisible
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        darkText: lang.dark_mode
+    }
+
+    Item{
+        id:container
+        anchors{
+            top: title_bar.bottom
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        clip: true
+    }
+
+    FramelessHelper{
+        id:framless_helper
+        onReady: {
+            setTitleBarItem(title_bar)
+            framless_helper.moveWindowToDesktopCenter()
+            setHitTestVisible(title_bar.minimizeButton())
+            setHitTestVisible(title_bar.maximizeButton())
+            setHitTestVisible(title_bar.closeButton())
+            framless_helper.setWindowFixedSize(fixSize)
+            title_bar.maximizeButton.visible = !fixSize
+            window.visible = true
+        }
+    }
+
+    function setHitTestVisible(com){
+        framless_helper.setHitTestVisible(com)
+    }
+
+    function setTitleBarItem(com){
+        framless_helper.setTitleBarItem(com)
+    }
+
+}

example/qml/page/T_Acrylic.qml

@@ -12,48 +12,52 @@ FluScrollablePage{
     FluArea{
         Layout.fillWidth: true
         Layout.topMargin: 20
-        height: 1439/5+20
+        height: 1200/5+20
         paddings: 10
 
         FluRectangle{
-            width: 1080/5
+            width: 1920/5
-            height: 1439/5
+            height: 1200/5
-            radius:[25,25,25,25]
+            radius:[15,15,15,15]
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.left: parent.left
-            anchors.leftMargin: 20
             Image {
+                id:image
                 asynchronous: true
-                source: "qrc:/example/res/image/image_huoyin.webp"
+                source: "qrc:/example/res/image/banner_3.jpg"
                 anchors.fill: parent
-                sourceSize: Qt.size(width,height)
+                sourceSize: Qt.size(2*width,2*height)
-                FluAcrylic {
+            }
+            FluAcrylic {
+                sourceItem:image
+                anchors.bottom: parent.bottom
+                anchors.right: parent.right
+                width: 100
+                height: 100
+                FluText {
                     anchors.centerIn: parent
-                    width: 100
+                    text: "Acrylic"
-                    height: 100
+                    color: "#FFFFFF"
-                    FluText {
+                    font.bold: true
-                        anchors.centerIn: parent
-                        text: "Acrylic"
-                        color: "#FFFFFF"
-                        font.bold: true
-                    }
                 }
             }
+            Layout.topMargin: 20
         }
+
     }
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: -1
         code:'Image{
+    id:image
     width: 800
     height: 600
     source: "qrc:/example/res/image/image_huoyin.webp"
     radius: 8
+    }
     FluAcrylic{
+        sourceItem:image
         width: 100
         height: 100
         anchors.centerIn: parent
-    }
 }'
     }
 

example/qml/page/T_Buttons.qml

@@ -109,7 +109,7 @@ FluScrollablePage{
             disabled:filled_button_switch.selected
             text:"Filled Button"
             onClicked: {
-                showWarning("点击FilledButton")
+                showWarning("点击FilledButton"+height)
             }
             anchors{
                 verticalCenter: parent.verticalCenter

example/qml/page/T_Home.qml

@@ -22,6 +22,7 @@ FluScrollablePage{
         Layout.fillWidth: true
         height: 320
         Image {
+            id: bg
             fillMode:Image.PreserveAspectCrop
             anchors.fill: parent
             verticalAlignment: Qt.AlignTop
@@ -46,6 +47,7 @@ FluScrollablePage{
         }
 
         ListView{
+            id: list
             anchors{
                 left: parent.left
                 right: parent.right
@@ -61,6 +63,7 @@ FluScrollablePage{
             }
             clip: false
             delegate:Item{
+                id: control
                 width: 220
                 height: 240
                 FluArea{
@@ -68,6 +71,15 @@ FluScrollablePage{
                     width: 200
                     height: 220
                     anchors.centerIn: parent
+                    color: 'transparent'
+                    FluAcrylic {
+                        sourceItem:bg
+                        anchors.fill: parent
+                        color: FluTheme.dark ? 'black' : 'white'
+                        rectX: list.x-list.contentX+10+(control.width)*index
+                        rectY: list.y+10
+                        acrylicOpacity:0.5
+                    }
                     Rectangle{
                         anchors.fill: parent
                         radius: 8

example/qml/page/T_Rectangle.qml

@@ -114,18 +114,17 @@ FluScrollablePage{
                 }
             }
             FluRectangle{
-                width: 1080/5
+                width: 1920/5
-                height: 1439/5
+                height: 1200/5
-                radius:[25,25,25,25]
+                radius:[15,15,15,15]
                 Image {
                     asynchronous: true
-                    source: "qrc:/example/res/image/image_huoyin.webp"
+                    source: "qrc:/example/res/image/banner_1.jpg"
                     anchors.fill: parent
-                    sourceSize: Qt.size(width,height)
+                    sourceSize: Qt.size(2*width,2*height)
                 }
-                Layout.topMargin: 10
+                Layout.topMargin: 20
             }
-
         }
     }
     CodeExpander{

example/qml/page/T_TableView.qml

@@ -34,7 +34,7 @@ FluScrollablePage{
                           {
                               title: '操作',
                               dataIndex: 'action',
-                              width:100
+                              width:120
                           },
                       ];
         table_view.columns = columns
@@ -62,20 +62,14 @@ FluScrollablePage{
                 spacing: 10
                 FluFilledButton{
                     text:"编辑"
-                    topPadding:3
+                    horizontalPadding: 6
-                    bottomPadding:3
-                    leftPadding:6
-                    rightPadding:6
                     onClicked:{
                         showSuccess(JSON.stringify(dataObject))
                     }
                 }
                 FluFilledButton{
                     text:"删除"
-                    topPadding:3
+                    horizontalPadding: 6
-                    bottomPadding:3
-                    leftPadding:6
-                    rightPadding:6
                     onClicked:{
                         showError(JSON.stringify(dataObject))
                     }
@@ -84,20 +78,6 @@ FluScrollablePage{
         }
     }
 
-    function loadData(page,count){
-        const dataSource = []
-        for(var i=0;i<count;i++){
-            dataSource.push({
-                                name: "孙悟空%1".arg(((page-1)*count+i)),
-                                age: 500,
-                                address: "钟灵毓秀的花果山,如神仙仙境的水帘洞",
-                                nickname: "齐天大圣",
-                                action:com_action
-                            })
-        }
-        table_view.dataSource = dataSource
-    }
-
     CodeExpander{
         Layout.fillWidth: true
         Layout.topMargin: 10
@@ -149,6 +129,17 @@ FluScrollablePage{
 }'
     }
 
-
+    function loadData(page,count){
-
+        const dataSource = []
+        for(var i=0;i<count;i++){
+            dataSource.push({
+                                name: "孙悟空%1".arg(((page-1)*count+i)),
+                                age: 500,
+                                address: "钟灵毓秀的花果山,如神仙仙境的水帘洞",
+                                nickname: "齐天大圣",
+                                action:com_action
+                            })
+        }
+        table_view.dataSource = dataSource
+    }
 }

example/qml/page/T_Typography.qml

@@ -8,6 +8,7 @@ FluContentPage {
     property real textScale: 1
 
     title: "Typography"
+    rightPadding: 10
 
     Component.onCompleted: {
         slider.seek(0)

example/qml/window/AboutWindow.qml

@@ -2,17 +2,15 @@
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
+import "../component"
 
-FluWindow {
+CustomWindow {
 
     id:window
     title:"关于"
     width: 600
     height: 600
-    minimumWidth: 600
+    fixSize: true
-    minimumHeight: 600
-    maximumWidth: 600
-    maximumHeight: 600
     launchMode: FluWindow.SingleTask
 
     ColumnLayout{

example/qml/window/LoginWindow.qml

@@ -2,17 +2,15 @@
 import QtQuick.Layouts
 import QtQuick.Controls
 import FluentUI
+import "../component"
 
-FluWindow {
+CustomWindow {
 
     id:window
     title:"登录"
     width: 400
     height: 400
-    minimumWidth: 400
+    fixSize: true
-    minimumHeight: 400
-    maximumWidth: 400
-    maximumHeight: 400
 
     onInitArgument:
         (argument)=>{

example/qml/window/MainWindow.qml

@@ -4,9 +4,10 @@ import QtQuick.Controls
 import QtQuick.Layouts
 import Qt.labs.platform
 import FluentUI
+import "../component"
 import "qrc:///example/qml/global/"
 
-FluWindow {
+CustomWindow {
 
     id:window
     title: "FluentUI"
@@ -15,6 +16,7 @@ FluWindow {
     closeDestory:false
     minimumWidth: 520
     minimumHeight: 460
+    appBarVisible: false
     launchMode: FluWindow.SingleTask
 
     closeFunc:function(event){
@@ -71,15 +73,32 @@ FluWindow {
             window.deleteWindow()
             FluApp.closeApp()
         }
+    }
 
+    FluAppBar {
+        id: title_bar
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: parent.right
+        }
+        darkText: lang.dark_mode
+        showDark: true
+        z:7
     }
 
     FluNavigationView{
         id:nav_view
-        anchors.fill: parent
+        anchors{
+            top: parent.top
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        z:999
         items: ItemsOriginal
         footerItems:ItemsFooter
-        z:11
+        topPadding:FluTools.isMacos() ? 20 : 5
         displayMode:MainEvent.displayMode
         logo: "qrc:/example/res/image/favicon.ico"
         title:"FluentUI"
@@ -94,32 +113,10 @@ FluWindow {
                     ItemsOriginal.startPageByItem(data)
                 }
         }
-        actionItem:Item{
-            height: 40
-            width: 148
-            RowLayout{
-                anchors.centerIn: parent
-                spacing: 5
-                FluText{
-                    text:lang.dark_mode
-                }
-                FluToggleSwitch{
-                    selected: FluTheme.dark
-                    clickFunc:function(){
-                        if(FluTheme.dark){
-                            FluTheme.darkMode = FluDarkMode.Light
-                        }else{
-                            FluTheme.darkMode = FluDarkMode.Dark
-                        }
-                    }
-                }
-            }
-        }
         Component.onCompleted: {
             ItemsOriginal.navigationView = nav_view
             ItemsFooter.navigationView = nav_view
             nav_view.setCurrentIndex(0)
         }
     }
-
 }

example/qml/window/MediaWindow.qml

@@ -2,8 +2,9 @@
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
+import "../component"
 
-FluWindow {
+CustomWindow {
 
     title:"视频播放器"
     width: 640

example/qml/window/SingleInstanceWindow.qml

@@ -2,17 +2,15 @@
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
+import "../component"
 
-FluWindow {
+CustomWindow {
 
     id:window
     title:"SingleInstance"
     width: 500
     height: 600
-    minimumWidth: 500
+    fixSize: true
-    minimumHeight: 600
-    maximumWidth: 500
-    maximumHeight: 600
     launchMode: FluWindow.SingleInstance
 
     FluTextBox{
@@ -34,5 +32,4 @@ FluWindow {
         }
         text:"我是一个SingleInstance模式的窗口，如果我存在，我会销毁之前的窗口，并创建一个新窗口"
     }
-
 }

example/qml/window/SingleTaskWindow.qml

@@ -2,17 +2,15 @@
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
+import "../component"
 
-FluWindow {
+CustomWindow {
 
     id:window
     title:"SingleTask"
     width: 500
     height: 600
-    minimumWidth: 500
+    fixSize: true
-    minimumHeight: 600
-    maximumWidth: 500
-    maximumHeight: 600
     launchMode: FluWindow.SingleTask
 
     FluText{

example/qml/window/StandardWindow.qml

@@ -2,17 +2,15 @@
 import QtQuick.Controls
 import QtQuick.Layouts
 import FluentUI
+import "../component"
 
-FluWindow {
+CustomWindow {
 
     id:window
     title:"Standard"
     width: 500
     height: 600
-    minimumWidth: 500
+    fixSize: true
-    minimumHeight: 600
-    maximumWidth: 500
-    maximumHeight: 600
     launchMode: FluWindow.Standard
 
     FluText{

example/src/main.cpp

@@ -4,23 +4,24 @@
 #include <QDir>
 #include <QQuickWindow>
 #include <QProcess>
+#include <FramelessHelper/Quick/framelessquickmodule.h>
+#include <FramelessHelper/Core/private/framelessconfig_p.h>
 #include "lang/Lang.h"
 #include "AppInfo.h"
 #include "tool/IPC.h"
 
-int main(int argc, char *argv[])
+FRAMELESSHELPER_USE_NAMESPACE
+
+    int main(int argc, char *argv[])
 {
     //将样式设置为Basic，不然会导致组件显示异常
     qputenv("QT_QUICK_CONTROLS_STYLE","Basic");
-    //6.4及以下监听系统深色模式变化
+    FramelessHelper::Quick::initialize();
-#ifdef Q_OS_WIN
-    qputenv("QT_QPA_PLATFORM","windows:darkmode=2");
-#endif
     QGuiApplication::setOrganizationName("ZhuZiChu");
     QGuiApplication::setOrganizationDomain("https://zhuzichu520.github.io");
     QGuiApplication::setApplicationName("FluentUI");
-    //    QQuickWindow::setGraphicsApi(QSGRendererInterface::Software);
     QGuiApplication app(argc, argv);
+    FramelessConfig::instance()->set(Global::Option::ForceHideWindowFrameBorder);
     AppInfo* appInfo = new AppInfo();
     IPC ipc(0);
     QString activeWindowEvent = "activeWindow";
@@ -37,6 +38,7 @@ int main(int argc, char *argv[])
     }
     app.setQuitOnLastWindowClosed(false);
     QQmlApplicationEngine engine;
+    FramelessHelper::Quick::registerTypes(&engine);
     QQmlContext * context = engine.rootContext();
     Lang* lang = appInfo->lang();
     context->setContextProperty("lang",lang);
@@ -45,7 +47,7 @@ int main(int argc, char *argv[])
     });
     context->setContextProperty("appInfo",appInfo);
     const QUrl url(QStringLiteral("qrc:/example/qml/App.qml"));
-//    const QUrl url(QStringLiteral("qrc:/example/qml/TestWindow.qml"));
+    //    const QUrl url(QStringLiteral("qrc:/example/qml/TestWindow.qml"));
     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
         &app, [url](QObject *obj, const QUrl &objUrl) {
             if (!obj && url == objUrl)

src/CMakeLists.txt

@@ -13,7 +13,7 @@ endif()
 set(QML_PLUGIN_DIRECTORY ${CMAKE_PREFIX_PATH}/qml/FluentUI)
 
 #设置版本号
-add_definitions(-DVERSION=1,3,0,0)
+add_definitions(-DVERSION=1,3,1,0)
 
 find_package(Qt6 REQUIRED COMPONENTS Core Quick Qml ShaderTools)
 
@@ -61,9 +61,9 @@ qt_add_qml_module(fluentuiplugin
 
 #链接库
 target_link_libraries(fluentuiplugin PUBLIC
-    Qt::Core
+    Qt::CorePrivate
-    Qt::Quick
+    Qt::QuickPrivate
-    Qt::Qml
+    Qt::QmlPrivate
 )
 
 #链接库 win32库 不然mingw会编译错误

src/FluApp.cpp

@@ -78,7 +78,6 @@ void FluApp::navigate(const QString& route,const QJsonObject& argument,FluRegist
         fluRegister->to(view);
     }
     view->setColor(QColor(Qt::transparent));
-    view->show();
 }
 
 QJsonArray FluApp::awesomelist(const QString& keyword)

src/FluApp.h

@@ -8,9 +8,6 @@
 #include <QQmlContext>
 #include <QJsonObject>
 #include <QQmlEngine>
-#include "FluTheme.h"
-#include "FluTools.h"
-#include "FluColors.h"
 #include "FluRegister.h"
 #include "stdafx.h"
 

src/FluTheme.cpp

@@ -1,8 +1,10 @@
-#include "FluTheme.h"
+#include "FluTheme.h"
 
 #include "Def.h"
+#include "FluColors.h"
 #include <QPalette>
-#include "FluApp.h"
+#include <QtGui/qpa/qplatformtheme.h>
+#include <QtGui/private/qguiapplication_p.h>
 #include <QGuiApplication>
 
 FluTheme* FluTheme::m_instance = nullptr;
@@ -24,14 +26,16 @@ FluTheme::FluTheme(QObject *parent)
     primaryColor(FluColors::getInstance()->Blue());
     nativeText(false);
     darkMode(Fluent_DarkMode::Fluent_DarkModeType::Light);
+    _systemDark = systemDark();
     qApp->installEventFilter(this);
 }
 
 bool FluTheme::eventFilter(QObject *obj, QEvent *event)
 {
     Q_UNUSED(obj);
-    if (event->type() == QEvent::ApplicationPaletteChange)
+    if (event->type() == QEvent::ApplicationPaletteChange || event->type() == QEvent::ThemeChange)
     {
+        _systemDark = systemDark();
         Q_EMIT darkChanged();
         event->accept();
         return true;
@@ -41,9 +45,10 @@ bool FluTheme::eventFilter(QObject *obj, QEvent *event)
 
 bool FluTheme::systemDark()
 {
-    QPalette palette = qApp->palette();
+    if (const QPlatformTheme * const theme = QGuiApplicationPrivate::platformTheme()) {
-    QColor color = palette.color(QPalette::Window).rgb();
+        return (theme->appearance() == QPlatformTheme::Appearance::Dark);
-    return !(color.red() * 0.2126 + color.green() * 0.7152 + color.blue() * 0.0722 > 255 / 2);
+    }
+    return false;
 }
 
 bool FluTheme::dark(){
@@ -52,7 +57,7 @@ bool FluTheme::dark(){
     }else if(_darkMode == Fluent_DarkMode::Fluent_DarkModeType::Light){
         return false;
     }else if(_darkMode == Fluent_DarkMode::Fluent_DarkModeType::System){
-        return systemDark();
+        return _systemDark;
     }else{
         return false;
     }

src/FluTheme.h

@@ -47,6 +47,7 @@ public:
     Q_SIGNAL void darkChanged();
 private:
     bool _dark;
+    bool _systemDark;
     bool eventFilter(QObject *obj, QEvent *event);
     bool systemDark();
 };

src/FluTools.cpp

@@ -39,4 +39,28 @@ QString FluTools::readFile(const QString &fileName)
     return content;
 }
 
+bool FluTools::isMacos(){
+#if defined(Q_OS_MACOS)
+    return true;
+#else
+    return false;
+#endif
+}
+
+bool FluTools::isLinux(){
+#if defined(Q_OS_LINUX)
+    return true;
+#else
+    return false;
+#endif
+}
+
+bool FluTools::isWin(){
+#if defined(Q_OS_WIN)
+    return true;
+#else
+    return false;
+#endif
+}
+
 

src/FluTools.h

@@ -42,6 +42,12 @@ public:
      */
     Q_INVOKABLE QString readFile(const QString &fileName);
 
+    Q_INVOKABLE bool isMacos();
+
+    Q_INVOKABLE bool isLinux();
+
+    Q_INVOKABLE bool isWin();
+
 };
 
 #endif // FLUTOOLS_H

src/imports/FluentUI/Controls/FluAcrylic.qml

@@ -4,29 +4,34 @@ import FluentUI
 
 Item {
     id: control
-
     property alias color: rect.color
     property alias acrylicOpacity: rect.opacity
-
+    property alias radius:bg.radius
-    Rectangle {
+    property alias blurRadius: blur.radius
-        id: rect
+    property int rectX: control.x
+    property int rectY: control.y
+    property var sourceItem: control.parent
+    FluRectangle{
+        id:bg
         anchors.fill: parent
-        color: "white"
+        radius: [8,8,8,8]
-        opacity: 0.05
+        ShaderEffectSource {
+            id: effect_source
+            anchors.fill: parent
+            sourceItem: control.sourceItem
+            sourceRect: Qt.rect(rectX, rectY, control.width, control.height)
+            Rectangle {
+                id: rect
+                anchors.fill: parent
+                color: "white"
+                opacity: 0.5
+            }
+        }
+        FastBlur {
+            id:blur
+            radius: 50
+            anchors.fill: effect_source
+            source: effect_source
+        }
     }
-
-    ShaderEffectSource {
-        id: effect_source
-        anchors.fill: parent
-        sourceItem: control.parent
-        sourceRect: Qt.rect(control.x, control.y, control.width, control.height)
-    }
-
-    GaussianBlur {
-        radius: 20
-        anchors.fill: effect_source
-        source: effect_source
-        samples: 1 + radius * 2
-    }
-
 }

src/imports/FluentUI/Controls/FluAppBar.qml

@@ -5,7 +5,6 @@ import QtQuick.Layouts
 import FluentUI
 
 Rectangle{
-
     property string title: ""
     property string darkText : "夜间模式"
     property string minimizeText : "最小化"
@@ -20,48 +19,44 @@ Rectangle{
     property color closeNormalColor: Qt.rgba(0,0,0,0)
     property color closeHoverColor:  Qt.rgba(251/255,115/255,115/255,1)
     property bool showDark: false
+    property bool titleVisible: true
+    property bool isMac: FluTools.isMacos()
     property color borerlessColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
-
+    id:root
+    color: Qt.rgba(0,0,0,0)
+    height: visible ? 30 : 0
+    opacity: visible
+    z: 65535
     Item{
         id:d
         property var win: Window.window
         property bool isRestore: win && Window.Maximized === win.visibility
         property bool resizable: win && !(win.minimumHeight === win.maximumHeight && win.maximumWidth === win.minimumWidth)
     }
-
-    id:root
-    color: Qt.rgba(0,0,0,0)
-    visible: false
-    height: visible ? 30 : 0
-    opacity: visible
-    z: 65535
-
     TapHandler {
-        onTapped: if (tapCount === 2) toggleMaximized()
+        onTapped: if (tapCount === 2) btn_maximize.clicked()
         gesturePolicy: TapHandler.DragThreshold
     }
-
     DragHandler {
         target: null
         grabPermissions: TapHandler.CanTakeOverFromAnything
         onActiveChanged: if (active) { d.win.startSystemMove(); }
     }
-
     FluText {
         text: title
         anchors{
             verticalCenter: parent.verticalCenter
-            left: parent.left
+            left: isMac ? undefined : parent.left
-            leftMargin: 10
+            leftMargin: isMac ? undefined : 10
+            horizontalCenter: isMac ? parent.horizontalCenter : undefined
         }
+        visible: root.titleVisible
         color:root.textColor
     }
-
     RowLayout{
         anchors.right: parent.right
         height: root.height
         spacing: 0
-
         RowLayout{
             Layout.alignment: Qt.AlignVCenter
             Layout.rightMargin: 5
@@ -82,8 +77,8 @@ Rectangle{
                 }
             }
         }
-
         FluIconButton{
+            id:btn_minimize
             width: 40
             height: 30
             iconSource : FluentIcons.ChromeMinimize
@@ -91,33 +86,40 @@ Rectangle{
             iconSize: 11
             text:minimizeText
             radius: 0
+            visible: !isMac
             iconColor: root.textColor
             color: hovered ? minimizeHoverColor : minimizeNormalColor
             onClicked: {
-                d.win.showMinimized()
+                d.win.visibility = Window.Minimized
             }
         }
         FluIconButton{
+            id:btn_maximize
             width: 40
             height: 30
             iconSource : d.isRestore  ? FluentIcons.ChromeRestore : FluentIcons.ChromeMaximize
             color: hovered ? maximizeHoverColor : maximizeNormalColor
             Layout.alignment: Qt.AlignVCenter
-            visible: d.resizable
+            visible: d.resizable && !isMac
             radius: 0
             iconColor: root.textColor
             text:d.isRestore?restoreText:maximizeText
             iconSize: 11
             onClicked: {
-                toggleMaximized()
+                if (d.win.visibility === Window.Maximized)
+                    d.win.visibility = Window.Windowed
+                else
+                    d.win.visibility = Window.Maximized
             }
         }
         FluIconButton{
+            id:btn_close
             iconSource : FluentIcons.ChromeClose
             Layout.alignment: Qt.AlignVCenter
             text:closeText
             width: 40
             height: 30
+            visible: !isMac
             radius: 0
             iconSize: 10
             iconColor: hovered ? Qt.rgba(1,1,1,1) : root.textColor
@@ -128,14 +130,16 @@ Rectangle{
         }
     }
 
-    function toggleMaximized() {
+    function minimizeButton(){
-        if(!d.resizable)
+        return btn_minimize
-            return
+    }
-        if (d.win.visibility === Window.Maximized) {
+
-            d.win.showNormal();
+    function maximizeButton(){
-        } else {
+        return btn_maximize
-            d.win.showMaximized();
+    }
-        }
+
+    function closeButton(){
+        return btn_close
     }
 
 }

src/imports/FluentUI/Controls/FluArea.qml

@@ -4,33 +4,28 @@ import QtQuick.Window
 import FluentUI
 
 Rectangle {
-
     default property alias content: container.data
     property int paddings : 0
     property int leftPadding : 0
     property int rightPadding : 0
     property int topPadding : 0
     property int bottomPadding : 0
-
     radius: 4
     color: FluTheme.dark ? Window.active ?  Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
     border.color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
     border.width: 1
     implicitHeight: height
     implicitWidth: width
-
     Behavior on color{
         ColorAnimation {
             duration: 300
         }
     }
-
     Behavior on border.color{
         ColorAnimation {
             duration: 300
         }
     }
-
     Item {
         id: container
         anchors.fill: parent
@@ -39,5 +34,4 @@ Rectangle {
         anchors.topMargin: Math.max(paddings,topPadding)
         anchors.bottomMargin: Math.max(paddings,bottomPadding)
     }
-
 }

src/imports/FluentUI/Controls/FluAutoSuggestBox.qml

@@ -3,25 +3,20 @@ import QtQuick.Controls
 import FluentUI
 
 FluTextBox{
-
     property var items:[]
     property string emptyText: "没有找到结果"
     property int autoSuggestBoxReplacement: FluentIcons.Search
     signal itemClicked(var data)
     signal handleClicked
-
     id:control
     width: 300
-
     Component.onCompleted: {
         loadData()
     }
-
     QtObject{
         id:d
         property bool flagVisible: true
     }
-
     Popup{
         id:control_popup
         y:control.height
@@ -126,19 +121,16 @@ FluTextBox{
             control_popup.visible = true
         }
     }
-
     function handleClick(modelData){
         control_popup.visible = false
         control.itemClicked(modelData)
         updateText(modelData.title)
     }
-
     function updateText(text){
         d.flagVisible = false
         control.text = text
         d.flagVisible = true
     }
-
     function loadData(){
         var result = []
         if(items==null){
@@ -152,5 +144,4 @@ FluTextBox{
         })
         list_view.model = result
     }
-
 }

src/imports/FluentUI/Controls/FluBadge.qml

@@ -3,11 +3,9 @@ import QtQuick.Controls
 import FluentUI
 
 Rectangle{
-
     property bool isDot: false
     property bool showZero: true
     property int count: 0
-
     id:control
     color:Qt.rgba(255/255,77/255,79/255,1)
     width: {
@@ -61,7 +59,6 @@ Rectangle{
             return  -10
         }
     }
-
     Text{
         anchors.centerIn: parent
         color: Qt.rgba(1,1,1,1)
@@ -72,7 +69,4 @@ Rectangle{
             return count+"+"
         }
     }
-
-
-
 }

src/imports/FluentUI/Controls/FluBreadcrumbBar.qml

@@ -4,26 +4,21 @@ import QtQuick.Layouts
 import FluentUI
 
 Item {
-
     property int textSize: 15
     property string separator: "/"
     property var items: []
     property int spacing: 5
     signal clickItem(var model)
-
     id:control
     implicitWidth: 300
     height: 30
-
     onItemsChanged: {
         list_model.clear()
         list_model.append(items)
     }
-
     ListModel{
         id:list_model
     }
-
     ListView{
         id:list_view
         width: parent.width
@@ -88,13 +83,10 @@ Item {
             }
         }
     }
-
     function remove(index,count){
         list_model.remove(index,count)
     }
-
     function count(){
         return list_model.count
     }
-
 }

src/imports/FluentUI/Controls/FluButton.qml

@@ -4,23 +4,19 @@ import QtQuick.Controls.Basic
 import FluentUI
 
 Button {
-
     property bool disabled: false
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
-
     id: control
-    topPadding:5
-    bottomPadding:5
-    leftPadding:15
-    rightPadding:15
     enabled: !disabled
     focusPolicy:Qt.TabFocus
+    horizontalPadding:12
     Keys.onSpacePressed: control.visualFocus&&clicked()
     font:FluTextStyle.Body
-
     background: Rectangle{
+        implicitWidth: 28
+        implicitHeight: 28
         border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
         border.width: 1
         radius: 4

src/imports/FluentUI/Controls/FluCalendarPicker.qml

@@ -5,13 +5,11 @@ import QtQuick.Window
 import FluentUI
 
 Rectangle {
-
     property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
     property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property string text: "请选择日期"
     property var window : Window.window
-
     id:control
     color: {
         if(mouse_area.containsMouse){
@@ -24,7 +22,6 @@ Rectangle {
     radius: 4
     border.width: 1
     border.color: dividerColor
-
     MouseArea{
         id:mouse_area
         hoverEnabled: true
@@ -33,7 +30,6 @@ Rectangle {
             popup.showPopup()
         }
     }
-
     FluText{
         id:text_date
         anchors{
@@ -47,7 +43,6 @@ Rectangle {
         horizontalAlignment: Text.AlignHCenter
         text:control.text
     }
-
     FluIcon{
         iconSource: FluentIcons.Calendar
         iconSize: 14
@@ -58,8 +53,6 @@ Rectangle {
             rightMargin: 12
         }
     }
-
-
     Menu{
         id:popup
         height: container.height
@@ -75,7 +68,6 @@ Rectangle {
                 duration: 83
             }
         }
-
         exit:Transition {
             NumberAnimation {
                 property: "opacity"
@@ -84,7 +76,6 @@ Rectangle {
                 duration: 83
             }
         }
-
         contentItem: Item{
             clip: true
             FluCalendarView{

src/imports/FluentUI/Controls/FluCalendarView.qml

@@ -3,27 +3,22 @@ import QtQuick.Controls
 import FluentUI
 
 Item {
-
     enum DisplayMode {
         Month,
         Year,
         Decade
     }
-
     property int displayMode: FluCalendarView.Month
     property var date: new Date()
     property var currentDate : new Date()
     property var toDay: new Date()
     signal dateClicked(var date)
-
     id:control
     width: 280
     height: 325
-
     Component.onCompleted: {
         updateMouth(date)
     }
-
     Component{
         id:com_week
         Item{
@@ -35,7 +30,6 @@ Item {
             }
         }
     }
-
     Component{
         id:com_year
         Button{
@@ -94,7 +88,6 @@ Item {
             contentItem: Item{}
         }
     }
-
     Component{
         id:com_month
         Button{
@@ -154,8 +147,6 @@ Item {
             contentItem: Item{}
         }
     }
-
-
     Component{
         id:com_day
         Button{
@@ -189,7 +180,6 @@ Item {
                         }
                     }
                 }
-
                 Rectangle{
                     id:backgound_today
                     anchors.centerIn: parent
@@ -201,7 +191,6 @@ Item {
                     border.color: FluTheme.primaryColor.dark
                     border.width: 1
                 }
-
                 Rectangle{
                     id:backgound_selected
                     anchors.centerIn: parent
@@ -211,7 +200,6 @@ Item {
                     visible: isToDay
                     color: FluTheme.primaryColor.dark
                 }
-
                 FluText{
                     text:date.getDate()
                     anchors.centerIn: parent
@@ -229,15 +217,12 @@ Item {
             contentItem: Item{}
         }
     }
-
     FluArea{
         anchors.fill: parent
         radius: 5
-
         FluShadow{
             radius: 5
         }
-
         Rectangle{
             id:layout_divider
             height: 1
@@ -248,7 +233,6 @@ Item {
                 topMargin: 44
             }
         }
-
         Item{
             id:layout_top
             anchors{
@@ -257,7 +241,6 @@ Item {
                 top: parent.top
                 bottom: layout_divider.top
             }
-
             FluTextButton{
                 id:title
                 leftPadding: 0
@@ -278,7 +261,6 @@ Item {
                     }
                 }
             }
-
             FluIconButton{
                 id:icon_up
                 iconSource: FluentIcons.CaretUpSolid8
@@ -309,7 +291,6 @@ Item {
                     }
                 }
             }
-
             FluIconButton{
                 id:icon_down
                 iconSource: FluentIcons.CaretDownSolid8
@@ -341,11 +322,9 @@ Item {
                 }
             }
         }
-
         ListModel {
             id:list_model
         }
-
         Item{
             id:layout_bottom
             anchors{
@@ -354,7 +333,6 @@ Item {
                 top: layout_divider.bottom
                 bottom: parent.bottom
             }
-
             GridView{
                 model: list_model
                 anchors.fill: parent
@@ -388,23 +366,18 @@ Item {
             }
         }
     }
-
     function createItemWeek(name){
         return {type:0,date:new Date(),name:name,isDecade:false}
     }
-
     function createItemDay(date){
         return {type:1,date:date,name:"",isDecade:false}
     }
-
     function createItemMonth(date){
         return {type:2,date:date,name:"",isDecade:false}
     }
-
     function createItemYear(date,isDecade){
         return {type:3,date:date,name:"",isDecade:isDecade}
     }
-
     function updateDecade(date){
         list_model.clear()
         var year = date.getFullYear()
@@ -417,7 +390,6 @@ Item {
         }
         title.text = decadeStart+"-"+(decadeStart+10)
     }
-
     function updateYear(date){
         list_model.clear()
         var year = date.getFullYear()
@@ -429,7 +401,6 @@ Item {
         }
         title.text = year+"年"
     }
-
     function updateMouth(date){
         list_model.clear()
         list_model.append([createItemWeek("一"),createItemWeek("二"),createItemWeek("三"),createItemWeek("四"),createItemWeek("五"),createItemWeek("六"),createItemWeek("日")])
@@ -468,6 +439,4 @@ Item {
         }
         title.text = year+"年"+(month+1)+"月"
     }
-
-
 }

src/imports/FluentUI/Controls/FluCarousel.qml

@@ -3,20 +3,16 @@ import QtQuick.Controls
 import FluentUI
 
 Item {
-
     property bool flagXChanged: true
     property int radius : 5
     property int loopTime: 2000
     property bool showIndicator: true
-
     id:control
     width: 400
     height: 300
-
     ListModel{
         id:content_model
     }
-
     FluRectangle{
         anchors.fill: parent
         radius: [control.radius,control.radius,control.radius,control.radius]
@@ -80,14 +76,6 @@ Item {
             }
         }
     }
-    function setData(data){
-        content_model.clear()
-        content_model.append(data[data.length-1])
-        content_model.append(data)
-        content_model.append(data[0])
-        list_view.currentIndex = 1
-        timer_run.restart()
-    }
     Row{
         spacing: 10
         anchors{
@@ -133,4 +121,12 @@ Item {
             timer_anim.start()
         }
     }
+    function setData(data){
+        content_model.clear()
+        content_model.append(data[data.length-1])
+        content_model.append(data)
+        content_model.append(data[0])
+        list_view.currentIndex = 1
+        timer_run.restart()
+    }
 }

src/imports/FluentUI/Controls/FluCheckBox.qml

@@ -5,7 +5,6 @@ import QtQuick.Layouts
 import FluentUI
 
 Button {
-
     property bool selected: false
     property var clickFunc
     property bool disabled: false
@@ -14,7 +13,6 @@ Button {
     property color borderHoverColor: FluTheme.dark ? Qt.rgba(167/255,167/255,167/255,1) : Qt.rgba(135/255,135/255,135/255,1)
     property color borderDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
     property color borderPressedColor: FluTheme.dark ? Qt.rgba(90/255,90/255,90/255,1) : Qt.rgba(191/255,191/255,191/255,1)
-
     property color normalColor: FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(247/255,247/255,247/255,1)
     property color selectedColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
     property color hoverColor: FluTheme.dark ? Qt.rgba(72/255,72/255,72/255,1) : Qt.rgba(236/255,236/255,236/255,1)
@@ -22,7 +20,6 @@ Button {
     property color selectedPreesedColor: FluTheme.dark ? Qt.darker(selectedColor,1.3) : Qt.lighter(selectedColor,1.3)
     property color selectedDisableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(50/255,50/255,50/255,1) : Qt.rgba(253/255,253/255,253/255,1)
-
     id:control
     enabled: !disabled
     focusPolicy:Qt.TabFocus

src/imports/FluentUI/Controls/FluColorPicker.qml

@@ -75,5 +75,4 @@ Button{
             popup.open()
         }
     }
-
 }

src/imports/FluentUI/Controls/FluColorView.qml

@@ -4,28 +4,21 @@ import FluentUI
 import "ColorPicker"
 
 Item {
-
     property alias colorValue: color_picker.colorValue
-
     width: color_picker.width+10
     height: color_picker.height
-
     FluArea{
         anchors.fill: parent
         radius: 5
-
         FluShadow{
             radius: 5
         }
-
         ColorPicker{
             id:color_picker
         }
     }
-
     function setColor(color) {
         color_picker.setColor(color)
     }
-
 }
 

src/imports/FluentUI/Controls/FluContentDialog.qml

@@ -6,7 +6,6 @@ import FluentUI
 
 Popup {
     id: popup
-
     property string title: "Title"
     property string message: "Message"
     property string neutralText: "Neutral"
@@ -30,7 +29,6 @@ Popup {
     anchors.centerIn: Overlay.overlay
     closePolicy: Popup.CloseOnEscape
     background:Item{}
-
     enter: Transition {
         reversible: true
         NumberAnimation {
@@ -58,11 +56,9 @@ Popup {
         implicitHeight: text_title.height + text_message.height + layout_actions.height
         color:FluTheme.dark ? Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(249/255,249/255,249/255,1)
         radius:5
-
         FluShadow{
             radius: 5
         }
-
         FluText{
             id:text_title
             font: FluTextStyle.TitleLarge
@@ -77,7 +73,6 @@ Popup {
                 right: parent.right
             }
         }
-
         FluText{
             id:text_message
             font: FluTextStyle.Body
@@ -93,7 +88,6 @@ Popup {
                 right: parent.right
             }
         }
-
         Rectangle{
             id:layout_actions
             height: 68
@@ -104,7 +98,6 @@ Popup {
                 left: parent.left
                 right: parent.right
             }
-
             RowLayout{
                 anchors
                 {
@@ -124,7 +117,6 @@ Popup {
                         neutralClicked()
                     }
                 }
-
                 FluButton{
                     id:negative_btn
                     Layout.fillWidth: true
@@ -136,7 +128,6 @@ Popup {
                         negativeClicked()
                     }
                 }
-
                 FluFilledButton{
                     id:positive_btn
                     Layout.fillWidth: true

src/imports/FluentUI/Controls/FluContentPage.qml

@@ -5,16 +5,15 @@ import QtQuick.Controls
 import FluentUI
 
 Item {
-
     property alias title: text_title.text
     default property alias content: container.data
-    property int leftPadding: 0
+    property int leftPadding: 10
     property int topPadding: 0
-    property int rightPadding: 0
+    property int rightPadding: 10
-    property int bottomPadding: 0
+    property int bottomPadding: 10
-
+    property int pageMode: FluNavigationView.Standard
+    property string url: ''
     id:control
-
     FluText{
         id:text_title
         font: FluTextStyle.TitleLarge
@@ -27,7 +26,6 @@ Item {
             rightMargin: control.rightPadding
         }
     }
-
     Item{
         clip: true
         id:container
@@ -41,5 +39,4 @@ Item {
             bottomMargin: control.bottomPadding
         }
     }
-
 }

src/imports/FluentUI/Controls/FluCopyableText.qml

@@ -3,9 +3,7 @@ import QtQuick.Controls
 import FluentUI
 
 TextField {
-
     property color textColor: FluTheme.dark ? FluColors.White : FluColors.Grey220
-
     id:control
     color: textColor
     readOnly: true
@@ -34,5 +32,4 @@ TextField {
         id:menu
         inputItem: control
     }
-
 }

src/imports/FluentUI/Controls/FluDatePicker.qml

@@ -5,7 +5,6 @@ import QtQuick.Window
 import FluentUI
 
 Rectangle {
-
     property color dividerColor: FluTheme.dark ? Qt.rgba(77/255,77/255,77/255,1) : Qt.rgba(239/255,239/255,239/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
     property color normalColor: FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(254/255,254/255,254/255,1)
@@ -13,7 +12,6 @@ Rectangle {
     property bool showYear: true
     property bool changeFlag: true
     readonly property var rowData: ["","",""]
-
     id:root
     color: {
         if(mouse_area.containsMouse){
@@ -26,7 +24,6 @@ Rectangle {
     radius: 4
     border.width: 1
     border.color: dividerColor
-
     MouseArea{
         id:mouse_area
         hoverEnabled: true
@@ -35,7 +32,6 @@ Rectangle {
             popup.showPopup()
         }
     }
-
     Rectangle{
         id:divider_1
         width: 1
@@ -44,8 +40,6 @@ Rectangle {
         color: dividerColor
         visible: showYear
     }
-
-
     Rectangle{
         id:divider_2
         width: 1
@@ -53,7 +47,6 @@ Rectangle {
         height: parent.height
         color: dividerColor
     }
-
     FluText{
         id:text_year
         anchors{
@@ -67,8 +60,6 @@ Rectangle {
         horizontalAlignment: Text.AlignHCenter
         text:"年"
     }
-
-
     FluText{
         id:text_month
         anchors{
@@ -81,8 +72,6 @@ Rectangle {
         horizontalAlignment: Text.AlignHCenter
         text:"月"
     }
-
-
     FluText{
         id:text_day
         anchors{
@@ -95,7 +84,6 @@ Rectangle {
         horizontalAlignment: Text.AlignHCenter
         text:"日"
     }
-
     Menu{
         id:popup
         modal: true
@@ -111,7 +99,6 @@ Rectangle {
                 duration: 83
             }
         }
-
         exit:Transition {
             NumberAnimation {
                 property: "opacity"
@@ -139,20 +126,16 @@ Rectangle {
                 FluShadow{
                     radius: 4
                 }
-
                 RowLayout{
                     id:layout_content
                     spacing: 0
                     width: parent.width
                     height: 300
-
                     Component{
                         id:list_delegate
-
                         Item{
                             height:38
                             width:getListView().width
-
                             function getListView(){
                                 if(type === 0)
                                     return list_view_1
@@ -161,8 +144,6 @@ Rectangle {
                                 if(type === 2)
                                     return list_view_3
                             }
-
-
                             Rectangle{
                                 anchors.fill: parent
                                 anchors.topMargin: 2
@@ -226,7 +207,6 @@ Rectangle {
                             }
                         }
                     }
-
                     ListView{
                         id:list_view_1
                         width: 100
@@ -292,14 +272,12 @@ Rectangle {
                         }
                     }
                 }
-
                 Rectangle{
                     width: parent.width
                     height: 1
                     anchors.top: layout_content.bottom
                     color: dividerColor
                 }
-
                 Rectangle{
                     id:layout_actions
                     height: 40
@@ -310,14 +288,12 @@ Rectangle {
                         left: parent.left
                         right: parent.right
                     }
-
                     Item {
                         id:divider
                         width: 1
                         height: parent.height
                         anchors.centerIn: parent
                     }
-
                     FluButton{
                         anchors{
                             left: parent.left
@@ -331,7 +307,6 @@ Rectangle {
                             popup.close()
                         }
                     }
-
                     FluFilledButton{
                         anchors{
                             right: parent.right
@@ -355,23 +330,18 @@ Rectangle {
             rowData[0] = text_year.text
             rowData[1] = text_month.text
             rowData[2] = text_day.text
-
             const now = new Date();
             var year = text_year.text === "年"? now.getFullYear() : Number(text_year.text);
             var month = text_month.text === "月"? now.getMonth() + 1 : Number(text_month.text);
             var day =  text_day.text === "日" ? now.getDate() : Number(text_day.text);
-
             list_view_1.currentIndex = list_view_1.model.indexOf(year)
             text_year.text = year
-
             list_view_2.model = generateMonthArray(1,12)
             list_view_2.currentIndex = list_view_2.model.indexOf(month)
             text_month.text = month
-
             list_view_3.model = generateMonthDaysArray(year,month)
             list_view_3.currentIndex = list_view_3.model.indexOf(day)
             text_day.text = day
-
             var pos = root.mapToItem(null, 0, 0)
             if(window.height>pos.y+root.height+container.height){
                 popup.y = root.height
@@ -382,7 +352,6 @@ Rectangle {
             }
             popup.open()
         }
-
         onClosed: {
             if(changeFlag){
                 text_year.text = rowData[0]
@@ -391,7 +360,6 @@ Rectangle {
             }
         }
     }
-
     function generateYearArray(startYear, endYear) {
         const yearArray = [];
         for (let year = startYear; year <= endYear; year++) {
@@ -399,7 +367,6 @@ Rectangle {
         }
         return yearArray;
     }
-
     function generateMonthArray(startMonth, endMonth) {
         const monthArray = [];
         for (let month = startMonth; month <= endMonth; month++) {
@@ -407,7 +374,6 @@ Rectangle {
         }
         return monthArray;
     }
-
     function generateMonthDaysArray(year, month) {
         const monthDaysArray = [];
         const lastDayOfMonth = new Date(year, month, 0).getDate();
@@ -416,6 +382,4 @@ Rectangle {
         }
         return monthDaysArray;
     }
-
-
 }

src/imports/FluentUI/Controls/FluDivider.qml

@@ -3,13 +3,10 @@ import QtQuick.Window
 import FluentUI
 
 Rectangle {
-
     color: FluTheme.dark ? Window.active ? Qt.rgba(55/255,55/255,55/255,1):Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,230/255,234/255,1)
-
     Behavior on color{
         ColorAnimation {
             duration: 300
         }
     }
-
 }

src/imports/FluentUI/Controls/FluDropDownButton.qml

@@ -5,25 +5,21 @@ import QtQuick.Window
 import FluentUI
 
 Button {
-
     property bool disabled: false
     property color normalColor: FluTheme.dark ? Qt.rgba(62/255,62/255,62/255,1) : Qt.rgba(254/255,254/255,254/255,1)
     property color hoverColor: FluTheme.dark ? Qt.rgba(68/255,68/255,68/255,1) : Qt.rgba(251/255,251/255,251/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(59/255,59/255,59/255,1) : Qt.rgba(252/255,252/255,252/255,1)
     property var window : Window.window
     property alias items: menu.content
-
     id: control
-    topPadding:5
-    bottomPadding:5
-    leftPadding:15
     rightPadding:35
     enabled: !disabled
     focusPolicy:Qt.TabFocus
-
+    horizontalPadding:12
     Keys.onSpacePressed: control.visualFocus&&clicked()
-
     background: Rectangle{
+        implicitWidth: 28
+        implicitHeight: 28
         border.color: FluTheme.dark ? "#505050" : "#DFDFDF"
         border.width: 1
         radius: 4
@@ -47,7 +43,6 @@ Button {
             }
             iconColor:title.color
         }
-
     }
     contentItem: FluText {
         id:title
@@ -74,23 +69,22 @@ Button {
             }
         }
     }
-
     onClicked: {
-        var pos = control.mapToItem(null, 0, 0)
+        if(items && menu.getContainerCount()!==0){
-        var containerHeight = menu.getContainerHeight()
+            var pos = control.mapToItem(null, 0, 0)
-        if(window.height>pos.y+control.height+containerHeight){
+            var containerHeight = menu.getContainerHeight()
-            menu.y = control.height
+            if(window.height>pos.y+control.height+containerHeight){
-        }else if(pos.y>containerHeight){
+                menu.y = control.height
-            menu.y = -containerHeight
+            }else if(pos.y>containerHeight){
-        }else{
+                menu.y = -containerHeight
-            menu.y = window.height-(pos.y+containerHeight)
+            }else{
+                menu.y = window.height-(pos.y+containerHeight)
+            }
+            menu.open()
         }
-        menu.open()
     }
-
     FluMenu{
         id:menu
         width: control.width
     }
-
 }

src/imports/FluentUI/Controls/FluExpander.qml

@@ -4,18 +4,15 @@ import QtQuick.Window
 import FluentUI
 
 Item {
-
     property string  headerText: "Titlte"
     property bool expand: false
     property int contentHeight : 300
     default property alias content: container.data
-
+    id:control
-    id:root
     height: layout_header.height + container.height
     width: 400
     implicitWidth: width
     implicitHeight: height
-
     Rectangle{
         id:layout_header
         width: parent.width
@@ -23,28 +20,24 @@ Item {
         radius: 4
         color: FluTheme.dark ? Window.active ? Qt.rgba(38/255,44/255,54/255,1) : Qt.rgba(39/255,39/255,39/255,1) : Qt.rgba(251/255,251/255,253/255,1)
         border.color: FluTheme.dark ?  Window.active ? Qt.rgba(55/255,55/255,55/255,1) : Qt.rgba(45/255,45/255,45/255,1) : Qt.rgba(226/255,229/255,234/255,1)
-
         Behavior on color{
             ColorAnimation {
                 duration: 300
             }
         }
-
         Behavior on border.color{
             ColorAnimation {
                 duration: 300
             }
         }
-
         MouseArea{
-            id:root_mouse
+            id:control_mouse
             anchors.fill: parent
             hoverEnabled: true
             onClicked: {
                 expand = !expand
             }
         }
-
         FluText{
             text: headerText
             anchors{
@@ -53,7 +46,6 @@ Item {
                 leftMargin: 15
             }
         }
-
         FluIconButton{
             anchors{
                 verticalCenter: parent.verticalCenter
@@ -61,7 +53,7 @@ Item {
                 rightMargin: 15
             }
             color:{
-                if(root_mouse.containsMouse || hovered){
+                if(control_mouse.containsMouse || hovered){
                     return FluTheme.dark ? Qt.rgba(73/255,73/255,73/255,1) : Qt.rgba(245/255,245/255,245/255,1)
                 }
                 return FluTheme.dark ? Qt.rgba(0,0,0,0) : Qt.rgba(0,0,0,0)
@@ -81,8 +73,6 @@ Item {
             }
         }
     }
-
-
     Rectangle{
         id:container
         width: parent.width
@@ -104,5 +94,4 @@ Item {
             }
         }
     }
-
 }

src/imports/FluentUI/Controls/FluFilledButton.qml

@@ -4,23 +4,20 @@ import QtQuick.Controls.Basic
 import FluentUI
 
 Button {
-
     property bool disabled: false
     property color normalColor: FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
     property color hoverColor: FluTheme.dark ? Qt.darker(normalColor,1.1) : Qt.lighter(normalColor,1.1)
     property color disableColor: FluTheme.dark ? Qt.rgba(82/255,82/255,82/255,1) : Qt.rgba(199/255,199/255,199/255,1)
     property color pressedColor: FluTheme.dark ? Qt.darker(normalColor,1.2) : Qt.lighter(normalColor,1.2)
-
     id: control
     enabled: !disabled
-    topPadding:5
-    bottomPadding:5
-    leftPadding:15
-    rightPadding:15
     Keys.onSpacePressed: control.visualFocus&&clicked()
     focusPolicy:Qt.TabFocus
     font:FluTextStyle.Body
+    horizontalPadding:12
     background: Rectangle{
+        implicitWidth: 28
+        implicitHeight: 28
         radius: 4
         FluFocusRectangle{
             visible: control.visualFocus

src/imports/FluentUI/Controls/FluFlipView.qml

@@ -4,22 +4,18 @@ import QtQuick.Controls.Basic
 import FluentUI
 
 Item{
-
     property bool vertical: false
     default property alias content : swipe.contentData
     property alias currentIndex: swipe.currentIndex
-
     id:control
     width: 400
     height: 300
     implicitWidth: width
     implicitHeight: height
-
     QtObject{
         id:d
         property bool flag: true
     }
-
     MouseArea{
         anchors.fill: parent
         preventStealing: true
@@ -36,7 +32,6 @@ Item{
                 timer.restart()
             }
     }
-
     Timer{
         id:timer
         interval: 250
@@ -44,7 +39,6 @@ Item{
             d.flag = true
         }
     }
-
     SwipeView {
         id:swipe
         clip: true
@@ -52,7 +46,6 @@ Item{
         orientation:control.vertical ? Qt.Vertical : Qt.Horizontal
         anchors.fill: parent
     }
-
     Button{
         id:btn_start
         height: vertical ? 20 : 40
@@ -82,7 +75,6 @@ Item{
             swipe.currentIndex = Math.max(swipe.currentIndex - 1, 0)
         }
     }
-
     Button{
         id:btn_end
         height: vertical ? 20 : 40
@@ -112,6 +104,4 @@ Item{
             swipe.currentIndex = Math.min(swipe.currentIndex + 1,swipe.count-1)
         }
     }
-
 }
-

src/imports/FluentUI/Controls/FluFocusRectangle.qml

@@ -3,9 +3,7 @@ import QtQuick.Controls
 import FluentUI
 
 Item {
-
     property int radius: 4
-
     id:root
     anchors.fill: parent
     anchors.margins: -3
@@ -19,5 +17,4 @@ Item {
         border.color: FluTheme.dark ? Qt.rgba(1,1,1,1) : Qt.rgba(0,0,0,1)
         z: 65535
     }
-
 }

src/imports/FluentUI/Controls/FluIcon.qml

@@ -3,16 +3,14 @@ import QtQuick.Controls
 import FluentUI
 
 Text {
-
     property int iconSource
     property int iconSize: 20
     property color iconColor: FluTheme.dark ? "#FFFFFF" : "#000000"
-
     id:text_icon
     font.family: "Segoe Fluent Icons"
     font.pixelSize: iconSize
     horizontalAlignment: Text.AlignHCenter
     verticalAlignment: Text.AlignVCenter
     color: iconColor
-    text: (String.fromCharCode(iconSource).toString(16));
+    text: (String.fromCharCode(iconSource).toString(16))
 }

src/imports/FluentUI/Controls/FluIconButton.qml

@@ -4,7 +4,6 @@ import QtQuick.Controls.Basic
 import FluentUI
 
 Button {
-
     property int iconSize: 20
     property int iconSource
     property bool disabled: false
@@ -35,7 +34,6 @@ Button {
             return Qt.rgba(0,0,0,1)
         }
     }
-
     id:control
     width: 30
     height: 30

src/imports/FluentUI/Controls/FluInfoBar.qml

@@ -3,21 +3,17 @@ import QtQuick.Controls
 import FluentUI
 
 FluObject {
-    id:infoBar
-
     property var root;
-    property int layoutY: 75;
+    property int layoutY: 75
-
+    id:control
     FluObject{
         id:mcontrol
-
         property string const_success: "success";
         property string const_info:    "info";
         property string const_warning: "warning";
         property string const_error:   "error";
         property int maxWidth: 300;
         property var screenLayout: null;
-
         function create(type,text,duration,moremsg){
             if(screenLayout){
                 var last = screenLayout.getLastloader();
@@ -26,7 +22,6 @@ FluObject {
                     return;
                 }
             }
-
             initScreenLayout();
             contentComponent.createObject(screenLayout,{
                                               type:type,
@@ -35,22 +30,19 @@ FluObject {
                                               moremsg:moremsg,
                                           });
         }
-
         function createCustom(itemcomponent,duration){
             initScreenLayout();
             if(itemcomponent){
                 contentComponent.createObject(screenLayout,{itemcomponent:itemcomponent,duration:duration});
             }
         }
-
         function initScreenLayout(){
             if(screenLayout == null){
                 screenLayout = screenlayoutComponent.createObject(root);
-                screenLayout.y = infoBar.layoutY;
+                screenLayout.y = control.layoutY;
                 screenLayout.z = 100000;
             }
         }
-
         Component{
             id:screenlayoutComponent
             Column{
@@ -59,9 +51,7 @@ FluObject {
                 move: Transition {
                     NumberAnimation { properties: "y"; easing.type: Easing.OutBack; duration: 300 }
                 }
-
                 onChildrenChanged: if(children.length === 0)  destroy();
-
                 function getLastloader(){
                     if(children.length > 0){
                         return children[children.length - 1];
@@ -70,7 +60,6 @@ FluObject {
                 }
             }
         }
-
         Component{
             id:contentComponent
             Item{
@@ -80,45 +69,35 @@ FluObject {
                 property string type
                 property string text
                 property string moremsg
-
                 width:  parent.width;
                 height: loader.height;
-
                 function close(){
                     content.destroy();
                 }
-
                 function restart(){
                     delayTimer.restart();
                 }
-
                 Timer {
                     id:delayTimer
                     interval: duration; running: true; repeat: true
                     onTriggered: content.close();
                 }
-
                 Loader{
                     id:loader;
                     x:(parent.width - width) / 2;
                     property var _super: content;
-
                     scale: item ? 1 : 0;
                     asynchronous: true
-
                     Behavior on scale {
                         NumberAnimation {
                             easing.type: Easing.OutBack;
                             duration: 100
                         }
                     }
-
                     sourceComponent:itemcomponent ? itemcomponent : mcontrol.fluent_sytle;
                 }
-
             }
         }
-
         property Component fluent_sytle:  Rectangle{
             width:  rowlayout.width  + (_super.moremsg ? 25 : 80);
             height: rowlayout.height + 20;
@@ -208,26 +187,19 @@ FluObject {
             }
         }
     }
-
     function showSuccess(text,duration=1000,moremsg){
         mcontrol.create(mcontrol.const_success,text,duration,moremsg ? moremsg : "");
     }
-
     function showInfo(text,duration=1000,moremsg){
         mcontrol.create(mcontrol.const_info,text,duration,moremsg ? moremsg : "");
     }
-
     function showWarning(text,duration=1000,moremsg){
         mcontrol.create(mcontrol.const_warning,text,duration,moremsg ? moremsg : "");
     }
-
     function showError(text,duration=1000,moremsg){
         mcontrol.create(mcontrol.const_error,text,duration,moremsg ? moremsg : "");
     }
-
     function showCustom(itemcomponent,duration=1000){
         mcontrol.createCustom(itemcomponent,duration);
     }
-
-
 }

src/imports/FluentUI/Controls/FluItem.qml

@@ -3,29 +3,24 @@ import QtQuick.Controls
 import Qt5Compat.GraphicalEffects
 
 Item{
-    id:control
     property var radius:[0,0,0,0]
     default property alias contentItem: container.data
-
+    id:control
     Item{
         id:container
         width: control.width
         height: control.height
         opacity: 0
     }
-
     onWidthChanged: {
         canvas.requestPaint()
     }
-
     onHeightChanged: {
         canvas.requestPaint()
     }
-
     onRadiusChanged: {
         canvas.requestPaint()
     }
-
     Canvas {
         id: canvas
         anchors.fill: parent
@@ -55,11 +50,9 @@ Item{
             ctx.restore();
         }
     }
-
     OpacityMask {
         anchors.fill: container
         source: container
         maskSource: canvas
     }
-
 }

src/imports/FluentUI/Controls/FluMediaPlayer.qml

@@ -4,17 +4,14 @@ import QtMultimedia
 import FluentUI
 
 Rectangle {
-
     property url source
     property bool showControl: false
     property real volume: 30
-
     id:control
     width: 480
     height: 270
     color: FluColors.Black
     clip: true
-
     MouseArea{
         anchors.fill: parent
         preventStealing: true
@@ -22,7 +19,6 @@ Rectangle {
             showControl = !showControl
         }
     }
-
     MediaPlayer {
         id: mediaplayer
         property bool autoSeek:true
@@ -31,9 +27,9 @@ Rectangle {
         audioOutput: AudioOutput{
             id:audio_output
         }
-        onErrorChanged:
+        onErrorStringChanged:
             (error)=> {
-                console.debug(error)
+                console.debug(errorString)
             }
         onPositionChanged: {
             if(autoSeek){
@@ -49,16 +45,13 @@ Rectangle {
                 }
             }
     }
-
     onSourceChanged: {
         slider.seek(0)
     }
-
     VideoOutput {
         id:video_output
         anchors.fill: parent
     }
-
     Item{
         height: 100
         y:showControl ? control.height - 110 : control.height
@@ -110,7 +103,6 @@ Rectangle {
                 mediaplayer.position = val*mediaplayer.duration/slider.maxValue
             }
         }
-
         FluText{
             id:start_time
             anchors{
@@ -120,7 +112,6 @@ Rectangle {
             }
             text: formatDuration(slider.value*mediaplayer.duration/slider.maxValue)
         }
-
         FluText{
             id:end_time
             anchors{
@@ -130,7 +121,6 @@ Rectangle {
             }
             text: formatDuration(mediaplayer.duration)
         }
-
         Row{
             spacing: 10
             anchors{
@@ -164,7 +154,6 @@ Rectangle {
                 }
             }
         }
-
         FluIconButton{
             id:btn_volume
             iconSize: 17
@@ -179,7 +168,6 @@ Rectangle {
                 audio_output.muted = !audio_output.muted
             }
         }
-
         FluSlider{
             id:slider_volume
             size: 80
@@ -195,7 +183,6 @@ Rectangle {
             }
         }
     }
-
     function formatDuration(duration) {
         const seconds = Math.floor(duration / 1000);
         const hours = Math.floor(seconds / 3600);
@@ -203,18 +190,13 @@ Rectangle {
         const remainingSeconds = seconds % 60;
         return `${pad(hours)}:${pad(minutes)}:${pad(remainingSeconds)}`;
     }
-
     function pad(value) {
         return value.toString().padStart(2, '0');
     }
-
     function pause(){
         mediaplayer.pause()
     }
-
     function play(){
         mediaplayer.play()
     }
-
 }
-

src/imports/FluentUI/Controls/FluMenu.qml

@@ -4,7 +4,6 @@ import QtQuick.Controls
 import FluentUI
 
 Menu {
-
     default property alias content: container.data
     property bool enableAnimation: true
     id: popup
@@ -21,7 +20,6 @@ Menu {
             duration: enableAnimation ? 83 : 0
         }
     }
-
     exit:Transition {
         NumberAnimation {
             property: "opacity"
@@ -30,7 +28,6 @@ Menu {
             duration: enableAnimation ? 83 : 0
         }
     }
-
     background:Item{
         FluShadow{
             radius: 5
@@ -56,9 +53,10 @@ Menu {
             }
         }
     }
-
     function getContainerHeight(){
         return container.height
     }
-
+    function getContainerCount(){
+        return container.children.length
+    }
 }

src/imports/FluentUI/Controls/FluMenuItem.qml

@@ -3,11 +3,9 @@ import QtQuick.Controls
 import FluentUI
 
 Item {
-
     property string text: "MenuItem"
     property var onClickFunc
     signal clicked
-
     id:control
     width: {
         if(control.parent){
@@ -16,7 +14,6 @@ Item {
         return 140
     }
     height: 32
-
     Rectangle{
         anchors.centerIn: parent
         width: control.width-40
@@ -35,12 +32,10 @@ Item {
                 return Qt.rgba(0,0,0,0)
             }
         }
-
         FluText{
             text: control.text
             anchors.centerIn: parent
         }
-
         MouseArea{
             id:mouse_area
             hoverEnabled: true

src/imports/FluentUI/Controls/FluMultilineTextBox.qml

@@ -4,14 +4,12 @@ import QtQuick.Controls.Basic
 import FluentUI
 
 TextArea{
-
     property bool disabled: false
     property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
     property color disableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
     property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
     property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
     property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
-
     id:control
     width: 300
     enabled: !disabled
@@ -44,5 +42,4 @@ TextArea{
         id:menu
         inputItem: control
     }
-
 }

src/imports/FluentUI/Controls/FluNavigationView.qml

@@ -6,14 +6,12 @@ import QtQuick.Layouts
 import FluentUI
 
 Item {
-
     enum DisplayMode {
         Open,
         Compact,
         Minimal,
         Auto
     }
-
     property url logo
     property string title: ""
     property FluObject items
@@ -21,9 +19,13 @@ Item {
     property int displayMode: FluNavigationView.Auto
     property Component autoSuggestBox
     property Component actionItem
-
+    property int topPadding: 0
+    enum PageModeFlag{
+        Standard = 0,
+        SingleTop = 1,
+        SingleTask = 2
+    }
     id:control
-
     QtObject{
         id:d
         property bool enableStack: true
@@ -46,11 +48,9 @@ Item {
         property bool isCompactAndPanel: d.displayMode === FluNavigationView.Compact && d.enableNavigationPanel
         property bool isCompactAndNotPanel:d.displayMode === FluNavigationView.Compact && !d.enableNavigationPanel
         property bool isMinimalAndPanel: d.displayMode === FluNavigationView.Minimal && d.enableNavigationPanel
-
         onIsCompactAndNotPanelChanged: {
             collapseAll()
         }
-
         onDisplayModeChanged: {
             if(d.displayMode === FluNavigationView.Compact){
                 collapseAll()
@@ -61,7 +61,6 @@ Item {
                 timer_anim_x_enable.restart()
             }
         }
-
         function handleItems(){
             var idx = 0
             var data = []
@@ -97,14 +96,12 @@ Item {
             return data
         }
     }
-
     Component{
         id:com_panel_item_empty
         Item{
             visible: false
         }
     }
-
     Component{
         id:com_panel_item_separatorr
         FluDivider{
@@ -124,7 +121,6 @@ Item {
             }
         }
     }
-
     Component{
         id:com_panel_item_header
         Item{
@@ -153,7 +149,6 @@ Item {
             }
         }
     }
-
     Component{
         id:com_panel_item_expander
         Item{
@@ -259,7 +254,6 @@ Item {
                         iconSize: 15
                     }
                 }
-
                 Item{
                     id:item_icon
                     width: 30
@@ -308,7 +302,6 @@ Item {
             }
         }
     }
-
     Component{
         id:com_panel_item
         Item{
@@ -412,7 +405,6 @@ Item {
                         iconSize: 15
                     }
                 }
-
                 Item{
                     id:item_icon
                     width: 30
@@ -432,7 +424,6 @@ Item {
                         }
                     }
                 }
-
                 FluText{
                     id:item_title
                     text:model.title
@@ -462,17 +453,20 @@ Item {
             }
         }
     }
-
-
     Item {
         id:nav_app_bar
         width: parent.width
         height: 40
+        anchors{
+            top: parent.top
+            topMargin: control.topPadding
+        }
         z:999
         RowLayout{
             height:parent.height
             spacing: 0
             FluIconButton{
+                id:btn_back
                 iconSource: FluentIcons.ChromeBack
                 Layout.leftMargin: 5
                 Layout.preferredWidth: 30
@@ -535,7 +529,6 @@ Item {
                 font: FluTextStyle.Body
             }
         }
-
         Item{
             anchors.right: parent.right
             height: parent.height
@@ -552,7 +545,6 @@ Item {
             }
         }
     }
-
     Item{
         anchors{
             left: d.isMinimal || d.isCompactAndPanel  ? parent.left : layout_list.right
@@ -591,7 +583,6 @@ Item {
             replaceExit : Transition{}
         }
     }
-
     MouseArea{
         anchors.fill: parent
         visible: d.isMinimalAndPanel||d.isCompactAndPanel
@@ -599,7 +590,6 @@ Item {
             d.enableNavigationPanel = false
         }
     }
-
     Rectangle{
         id:layout_list
         width: {
@@ -633,16 +623,9 @@ Item {
             if(d.isMinimal || d.isCompactAndPanel){
                 return FluTheme.dark ? Qt.rgba(61/255,61/255,61/255,1) : Qt.rgba(243/255,243/255,243/255,1)
             }
-            if(Window.window.active){
+            return "#00000000"
-                return FluTheme.dark ? Qt.rgba(26/255,34/255,41/255,1) : Qt.rgba(238/255,244/255,249/255,1)
-            }
-            return FluTheme.dark ? Qt.rgba(32/255,32/255,32/255,1) : Qt.rgba(243/255,243/255,243/255,1)
-        }
-        Behavior on color{
-            ColorAnimation {
-                duration: 300
-            }
         }
+
         x: {
             if(d.displayMode !== FluNavigationView.Minimal)
                 return 0
@@ -652,7 +635,7 @@ Item {
             id:layout_header
             width: layout_list.width
             clip: true
-            y:nav_app_bar.height
+            y:nav_app_bar.height+control.topPadding
             height: autoSuggestBox ? 38 : 0
             Loader{
                 id:loader_auto_suggest_box
@@ -671,7 +654,6 @@ Item {
                     }
                 }
             }
-
             FluIconButton{
                 visible:opacity
                 opacity:d.isCompactAndNotPanel
@@ -699,7 +681,6 @@ Item {
                 }
             }
         }
-
         ListView{
             id:nav_list
             clip: true
@@ -806,7 +787,6 @@ Item {
             }
         }
     }
-
     Popup{
         property var childModel
         id:control_popup
@@ -872,7 +852,6 @@ Item {
             control_popup.open()
         }
     }
-
     Timer{
         id:timer_anim_x_enable
         interval: 150
@@ -880,7 +859,6 @@ Item {
             anim_layout_list_x.enabled = true
         }
     }
-
     function collapseAll(){
         for(var i=0;i<nav_list.model.length;i++){
             var item = nav_list.model[i]
@@ -889,24 +867,44 @@ Item {
             }
         }
     }
-
     function setCurrentIndex(index){
         nav_list.currentIndex = index
 
     }
-
     function getItems(){
         return nav_list.model
     }
-
     function push(url){
-        nav_swipe.push(url)
+        if (nav_swipe.depth>0)
+        {
+            let page = nav_swipe.find(function(item) {
+                return item.url === url;
+            })
+            if (page)
+            {
+                switch(page.pageMode)
+                {
+                    case FluNavigationView.SingleTask:
+                        while(nav_swipe.currentItem !== page)
+                        {
+                            nav_swipe.pop()
+                            d.stackItems.pop()
+                        }
+                        return
+                    case FluNavigationView.SingleTop:
+                        if (nav_swipe.currentItem.url === url)
+                            return
+                        break
+                    case FluNavigationView.Standard:
+                    default:
+                }
+            }
+        }
+        nav_swipe.push(url,{url:url})
     }
-
     function getCurrentIndex(){
         return nav_list.currentIndex
     }
-
     function startPageByItem(data){
         var items = getItems();
         for(var i=0;i<items.length;i++){
@@ -923,5 +921,10 @@ Item {
             }
         }
     }
-
+    function backButton(){
+        return btn_back
+    }
+    function navButton(){
+        return btn_nav
+    }
 }

src/imports/FluentUI/Controls/FluNavigationView2.qml

@@ -0,0 +1,57 @@
+import QtQuick
+import QtQuick.Window
+import QtQuick.Controls
+import QtQuick.Controls.Basic
+import QtQuick.Layouts
+import FluentUI
+
+Item {
+
+    property url logo
+    property string title: ""
+    property FluObject items
+    property FluObject footerItems
+    property int displayMode: FluNavigationView.Auto
+    property Component autoSuggestBox
+    property Component actionItem
+    id:control
+    Item {
+        id:nav_app_bar
+        width: parent.width
+        height: 40
+        RowLayout{
+            height:parent.height
+            spacing: 0
+            FluIconButton{
+                iconSource: FluentIcons.ChromeBack
+                Layout.leftMargin: 5
+                Layout.preferredWidth: 30
+                Layout.preferredHeight: 30
+                Layout.alignment: Qt.AlignVCenter
+                iconSize: 15
+            }
+            FluIconButton{
+                id:btn_nav
+                iconSource: FluentIcons.GlobalNavButton
+                iconSize: 15
+                Layout.preferredWidth: 30
+                Layout.preferredHeight: 30
+                Layout.alignment: Qt.AlignVCenter
+            }
+            Image{
+                Layout.preferredHeight: 20
+                Layout.preferredWidth: 20
+                source: control.logo
+                Layout.leftMargin: 12
+                sourceSize: Qt.size(40,40)
+                Layout.alignment: Qt.AlignVCenter
+            }
+            FluText{
+                Layout.alignment: Qt.AlignVCenter
+                text:control.title
+                Layout.leftMargin: 12
+                font: FluTextStyle.Body
+            }
+        }
+    }
+}

src/imports/FluentUI/Controls/FluObject.qml

@@ -3,7 +3,6 @@ import QtQuick.Controls
 import FluentUI
 
 QtObject {
-    id:flu_object;
-
     default property list<QtObject> children;
+    id:flu_object;
 }

src/imports/FluentUI/Controls/FluPagination.qml

@@ -4,7 +4,6 @@ import QtQuick.Layouts
 import FluentUI
 
 Item {
-    id: control
     signal requestPage(int page,int count)
     property string previousText: "<上一页"
     property string nextText: "下一页>"
@@ -14,18 +13,14 @@ Item {
     property int __itemPerPage: 10
     property int pageButtonCount: 5
     property int __pageButtonHalf: Math.floor(pageButtonCount/2)+1
-
+    id: control
-
     implicitHeight: 40
     implicitWidth: content.width
-
     Row{
         id: content
         height: control.height
-        spacing: 25
+        spacing: 10
         padding: 10
-
-
         FluToggleButton{
             visible: control.pageCount>1
             disabled: control.pageCurrent<=1
@@ -34,7 +29,6 @@ Item {
                 control.calcNewPage(control.pageCurrent-1);
             }
         }
-
         Row{
             spacing: 5
             FluToggleButton{
@@ -94,7 +88,6 @@ Item {
             }
         }
     }
-
     function calcNewPage(page)
     {
         if(!page)
@@ -105,6 +98,4 @@ Item {
         control.pageCurrent=page_num
         control.requestPage(page_num,control.__itemPerPage)
     }
-
-
 }

src/imports/FluentUI/Controls/FluPasswordBox.qml

@@ -4,7 +4,6 @@ import QtQuick.Controls.Basic
 import FluentUI
 
 TextField{
-
     property bool disabled: false
     property int iconSource: 0
     property color normalColor: FluTheme.dark ?  Qt.rgba(255/255,255/255,255/255,1) : Qt.rgba(27/255,27/255,27/255,1)
@@ -12,7 +11,6 @@ TextField{
     property color placeholderNormalColor: FluTheme.dark ? Qt.rgba(210/255,210/255,210/255,1) : Qt.rgba(96/255,96/255,96/255,1)
     property color placeholderFocusColor: FluTheme.dark ? Qt.rgba(152/255,152/255,152/255,1) : Qt.rgba(141/255,141/255,141/255,1)
     property color placeholderDisableColor: FluTheme.dark ? Qt.rgba(131/255,131/255,131/255,1) : Qt.rgba(160/255,160/255,160/255,1)
-
     id:control
     width: 300
     enabled: !disabled
@@ -74,6 +72,4 @@ TextField{
         id:menu
         inputItem: control
     }
-
 }
-

src/imports/FluentUI/Controls/FluPivot.qml

@@ -3,27 +3,22 @@ import QtQuick.Controls
 import FluentUI
 
 Item {
-
     default property alias content: d.children
     property alias currentIndex: nav_list.currentIndex
     property color normalColor: FluTheme.dark ? FluColors.Grey120 : FluColors.Grey120
     property color hoverColor: FluTheme.dark ? FluColors.Grey10 : FluColors.Black
-
     id:control
     width: 400
     height: 300
     implicitHeight: height
     implicitWidth: width
-
     MouseArea{
         anchors.fill: parent
         preventStealing: true
     }
-
     FluObject{
         id:d
     }
-
     ListView{
         id:nav_list
         height: 40
@@ -77,7 +72,6 @@ Item {
             }
         }
     }
-
     Item{
         id:container
         anchors{
@@ -87,7 +81,6 @@ Item {
             right: parent.right
             bottom: parent.bottom
         }
-
         Repeater{
             model:d.children
             Loader{
@@ -98,6 +91,4 @@ Item {
             }
         }
     }
-
-
 }

src/imports/FluentUI/Controls/FluProgressBar.qml

@@ -3,17 +3,14 @@ import QtQuick.Controls
 import FluentUI
 
 FluRectangle {
-
     property real progress: 0.5
     property bool indeterminate: true
-
     id: control
     width: 150
     height: 5
     radius: [3,3,3,3]
     clip: true
     color:  FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
-
     Component.onCompleted: {
         if(indeterminate){
             bar.x = -control.width*0.5
@@ -23,14 +20,12 @@ FluRectangle {
             bar.x = 0
         }
     }
-
     Rectangle{
         id:bar
         radius: 3
         width: control.width*progress
         height:  control.height
         color:FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
-
         Behavior on x{
             id:behavior
             enabled: false

src/imports/FluentUI/Controls/FluProgressRing.qml

@@ -3,13 +3,11 @@ import QtQuick.Controls
 import FluentUI
 
 Rectangle {
-
     property real linWidth : width/8
     property real progress: 0.25
     property bool indeterminate: true
     readonly property real radius2 : radius - linWidth/2
     property color primaryColor : FluTheme.dark ? FluTheme.primaryColor.lighter : FluTheme.primaryColor.dark
-
     id: control
     width: 44
     height: 44
@@ -17,25 +15,21 @@ Rectangle {
     border.width: linWidth
     color: "#00000000"
     border.color: FluTheme.dark ? Qt.rgba(99/255,99/255,99/255,1) : Qt.rgba(214/255,214/255,214/255,1)
-
     onProgressChanged: {
         canvas.requestPaint()
     }
-
-    Connections{
-        target: FluTheme
-        function onDarkChanged(){
-            canvas.requestPaint()
-        }
-    }
-
     Component.onCompleted: {
         if(indeterminate){
             behavior.enabled = true
             control.rotation = 360
         }
     }
-
+    Connections{
+        target: FluTheme
+        function onDarkChanged(){
+            canvas.requestPaint()
+        }
+    }
     Behavior on rotation{
         id:behavior
         enabled: false
@@ -53,7 +47,6 @@ Rectangle {
             }
         }
     }
-
     Canvas {
         id:canvas
         anchors.fill: parent
@@ -74,6 +67,4 @@ Rectangle {
             ctx.restore();
         }
     }
-
-
 }

src/imports/FluentUI/Controls/FluRadioButton.qml

@@ -5,10 +5,8 @@ import QtQuick.Layouts
 import FluentUI
 
 Button {
-
     property bool selected: false
     property bool disabled: false
-
     id:control
     enabled: !disabled
     focusPolicy:Qt.TabFocus
@@ -102,4 +100,3 @@ Button {
         }
     }
 }
-

src/imports/FluentUI/Controls/FluRatingControl.qml

@@ -3,22 +3,18 @@ import QtQuick.Controls
 import FluentUI
 
 Item {
-
     property int number: 5
     property int spacing: 4
     property int size: 18
     property int value:0
-
     id:control
     implicitWidth: container.width
     implicitHeight: container.height
-
     QtObject{
         id:d
         property int mouseValue: 0
         property int itemSize: control.size+spacing*2
     }
-
     Row{
         id:container
         spacing: 0
@@ -42,7 +38,6 @@ Item {
             }
         }
     }
-
     MouseArea{
         anchors.fill: container
         hoverEnabled: true
@@ -56,5 +51,4 @@ Item {
             control.value = Number(mouse.x / d.itemSize)+1
         }
     }
-
 }

src/imports/FluentUI/Controls/FluRectangle.qml

@@ -4,12 +4,10 @@ import Qt5Compat.GraphicalEffects
 import FluentUI
 
 Item{
-
     property var radius:[0,0,0,0]
     property color color : "#FFFFFF"
     property bool shadow: true
     default property alias contentItem: container.data
-
     id:control
     FluShadow{
         anchors.fill: container
@@ -21,7 +19,6 @@ Item{
             return false
         }
     }
-
     Rectangle{
         id:container
         width: control.width
@@ -29,7 +26,6 @@ Item{
         opacity: 0
         color:control.color
     }
-
     Canvas {
         id: canvas
         anchors.fill: parent
@@ -59,11 +55,9 @@ Item{
             ctx.restore();
         }
     }
-
     OpacityMask {
         anchors.fill: container
         source: container
         maskSource: canvas
     }
-
 }

src/imports/FluentUI/Controls/FluScrollBar.qml

@@ -1,20 +1,17 @@
 import QtQuick
-import QtQuick.Controls
+import QtQuick.Controls.Basic
 import FluentUI
 
 ScrollBar {
-
     property color handleNormalColor: Qt.rgba(134/255,134/255,134/255,1)
     property color handleHoverColor: Qt.lighter(handleNormalColor)
     property color handlePressColor: Qt.darker(handleNormalColor)
     property bool expand: false
-
     id: control
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                             implicitContentWidth + leftPadding + rightPadding)
     implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
                              implicitContentHeight + topPadding + bottomPadding)
-
     visible: control.policy !== ScrollBar.AlwaysOff
     minimumSize: 0.3
     topPadding:{
@@ -128,7 +125,6 @@ ScrollBar {
             duration: 150
         }
     }
-
     FluIconButton{
         id:btn_top
         iconSource: FluentIcons.CaretSolidUp
@@ -190,5 +186,4 @@ ScrollBar {
             increase()
         }
     }
-
 }

src/imports/FluentUI/Controls/FluScrollablePage.qml

@@ -5,7 +5,6 @@ import QtQuick.Controls
 import FluentUI
 
 Item {
-
     property alias title: text_title.text
     default property alias content: container.data
     property int spacing : 0
@@ -13,9 +12,9 @@ Item {
     property int topPadding: 0
     property int rightPadding: 10
     property int bottomPadding: 10
-
+    property int pageMode: FluNavigationView.Standard
+    property string url: ''
     id:control
-
     FluText{
         id:text_title
         font: FluTextStyle.Title
@@ -31,7 +30,6 @@ Item {
             rightMargin: control.rightPadding
         }
     }
-
     Flickable{
         id:flickview
         clip: true

src/imports/FluentUI/Controls/FluShadow.qml

@@ -6,63 +6,61 @@ Item {
 
     property color color: FluTheme.dark ? "#FFFFFF" : "#999999"
     property int radius: 4
-
+    id:control
-    id:root
     anchors.fill: parent
     anchors.margins: -4
-
     Rectangle{
-        width: root.width
+        width: control.width
-        height: root.height
+        height: control.height
         anchors.centerIn: parent
         color: "#00000000"
         opacity: 0.02
         border.width: 1
-        radius: root.radius
+        radius: control.radius
-        border.color: root.color
+        border.color: control.color
     }
 
     Rectangle{
-        width: root.width - 2
+        width: control.width - 2
-        height: root.height - 2
+        height: control.height - 2
         anchors.centerIn: parent
         color: "#00000000"
         opacity: 0.04
         border.width: 1
-        radius: root.radius
+        radius: control.radius
-        border.color: root.color
+        border.color: control.color
     }
     Rectangle{
-        width: root.width - 4
+        width: control.width - 4
-        height: root.height - 4
+        height: control.height - 4
         anchors.centerIn: parent
         color: "#00000000"
         opacity: 0.06
         border.width: 1
-        radius: root.radius
+        radius: control.radius
-        border.color: root.color
+        border.color: control.color
     }
 
     Rectangle{
-        width: root.width - 6
+        width: control.width - 6
-        height: root.height - 6
+        height: control.height - 6
         anchors.centerIn: parent
         color: "#00000000"
         opacity: 0.08
         border.width: 1
-        radius: root.radius
+        radius: control.radius
-        border.color: root.color
+        border.color: control.color
     }
 
     Rectangle{
-        width: root.width - 8
+        width: control.width - 8
-        height: root.height - 8
+        height: control.height - 8
         anchors.centerIn: parent
         opacity: 0.1
-        radius: root.radius
+        radius: control.radius
         color: "#00000000"
         border.width: 1
-        border.color: root.color
+        border.color: control.color
     }
 
 }

src/imports/FluentUI/Controls/FluSlider.qml

@@ -4,7 +4,6 @@ import Qt5Compat.GraphicalEffects
 import FluentUI
 
 Item{
-
     property int size: 180
     property int dotSize: 24
     property int value: 50
@@ -14,16 +13,13 @@ Item{
     property var onLineClickFunc
     signal pressed
     signal released
-
     id:root
     height: control.height
     width: control.width
     rotation: vertical ? 180 : 0
-
     Component.onCompleted: {
         seek(value)
     }
-
     MouseArea{
         id:mouse_line
         anchors.centerIn: control
@@ -45,7 +41,6 @@ Item{
                 }
             }
     }
-
     Rectangle {
         id: control
         width: vertical ? 4 :size
@@ -61,7 +56,6 @@ Item{
             color:FluTheme.dark ? FluTheme.primaryColor.lighter :FluTheme.primaryColor.dark
         }
     }
-
     Rectangle{
         id:dot
         width: dotSize
@@ -109,20 +103,17 @@ Item{
                 }
                 root.pressed()
             }
-
             onReleased: {
                 tool_tip.visible  =  false
                 root.released()
             }
         }
-
         FluTooltip{
             id:tool_tip
             text:String(root.value)
             y: vertical ? 32 : -40
         }
     }
-
     function seek(val){
         if(vertical){
             dot.y =val/maxValue*control.height - dotSize/2

src/imports/FluentUI/Controls/FluStatusView.qml

@@ -4,7 +4,6 @@ import QtQuick.Layouts
 import FluentUI
 
 Item{
-
     enum StatusMode  {
         Loading,
         Empty,
@@ -14,13 +13,11 @@ Item{
     default property alias content: container.data
     property int statusMode: FluStatusView.Loading
     signal errorClicked
-
     Item{
         id:container
         anchors.fill: parent
         visible: statusMode === FluStatusView.Success
     }
-
     FluArea{
         paddings: 0
         border.width: 0
@@ -43,7 +40,6 @@ Item{
             }
         }
     }
-
     FluArea{
         paddings: 0
         border.width: 0
@@ -63,7 +59,6 @@ Item{
             }
         }
     }
-
     FluArea{
         paddings: 0
         border.width: 0
@@ -90,8 +85,6 @@ Item{
             }
         }
     }
-
-
     function showSuccessView(){
         statusMode = FluStatusView.Success
     }
@@ -104,5 +97,4 @@ Item{
     function showErrorView(){
         statusMode = FluStatusView.Error
     }
-
 }

src/imports/FluentUI/Controls/FluTabView.qml

@@ -4,25 +4,21 @@ import QtQuick.Layouts
 import FluentUI
 
 Item {
-
     enum TabWidthBehavior {
         Equal,
         SizeToContent,
         Compact
     }
-
     enum CloseButtonVisibility{
         Nerver,
         Always,
         OnHover
     }
-
     property int tabWidthBehavior : FluTabView.Equal
     property int closeButtonVisibility : FluTabView.Always
     property int itemWidth: 146
     property bool addButtonVisibility: true
     signal newPressed
-
     id:control
     implicitHeight: height
     implicitWidth: width
@@ -31,7 +27,6 @@ Item {
             return parent
         return undefined
     }
-
     QtObject {
         id: d
         property int dragIndex: -1
@@ -39,16 +34,13 @@ Item {
         property bool itemPress: false
         property int maxEqualWidth: 240
     }
-
     MouseArea{
         anchors.fill: parent
         preventStealing: true
     }
-
     ListModel{
         id:tab_model
     }
-
     FluIconButton{
         id:btn_new
         visible: addButtonVisibility
@@ -61,7 +53,6 @@ Item {
             newPressed()
         }
     }
-
     ListView{
         id:tab_nav
         height: 34
@@ -88,21 +79,16 @@ Item {
             policy: ScrollBar.AlwaysOff
         }
         delegate:  Item{
-
             width: item_layout.width
             height: item_container.height
             z: item_mouse_drag.pressed ? 1000 : 1
-
             Item{
                 id:item_layout
                 width: item_container.width
                 height: item_container.height
-
                 FluItem{
                     id:item_container
-
                     property real timestamp: new Date().getTime()
-
                     height: tab_nav.height
                     width: {
                         if(tabWidthBehavior === FluTabView.Equal){
@@ -119,24 +105,20 @@ Item {
                     radius: [6,6,0,0]
                     Behavior on x { enabled: d.dragBehavior; NumberAnimation { duration: 200 } }
                     Behavior on y { enabled: d.dragBehavior; NumberAnimation { duration: 200 } }
-
                     MouseArea{
                         id:item_mouse_hove
                         anchors.fill: parent
                         hoverEnabled: true
                     }
-
                     MouseArea{
                         id:item_mouse_drag
                         anchors.fill: parent
                         drag.target: item_container
                         drag.axis: Drag.XAxis
-
                         onWheel: (wheel)=>{
                                      if (wheel.angleDelta.y > 0) scroll_nav.decrease()
                                      else scroll_nav.increase()
                                  }
-
                         onPressed: {
                             d.itemPress = true
                             item_container.timestamp = new Date().getTime();
@@ -147,7 +129,6 @@ Item {
                             item_container.x = pos.x
                             item_container.y = pos.y
                         }
-
                         onReleased: {
                             d.itemPress = false
                             timer.stop()
@@ -164,7 +145,6 @@ Item {
                             item_container.x = 0;
                             item_container.y = 0;
                         }
-
                         onPositionChanged: {
                             var pos = tab_nav.mapFromItem(item_container, 0, 0)
                             updatePosition(pos)
@@ -211,7 +191,6 @@ Item {
                             }
                         }
                     }
-
                     Rectangle{
                         anchors.fill: parent
                         color: {
@@ -234,7 +213,6 @@ Item {
                             }
                         }
                     }
-
                     RowLayout{
                         spacing: 0
                         height: parent.height
@@ -271,7 +249,6 @@ Item {
                             }
                         }
                     }
-
                     FluIconButton{
                         id:item_btn_close
                         iconSource: FluentIcons.ChromeClose
@@ -294,7 +271,6 @@ Item {
                             tab_model.remove(index)
                         }
                     }
-
                     FluDivider{
                         width: 1
                         height: 16
@@ -307,8 +283,6 @@ Item {
             }
         }
     }
-
-
     Item{
         id:container
         anchors{
@@ -317,7 +291,6 @@ Item {
             right: parent.right
             bottom: parent.bottom
         }
-
         Repeater{
             model:tab_model
             Loader{
@@ -328,23 +301,17 @@ Item {
             }
         }
     }
-
-
     function createTab(icon,text,page,argument={}){
         return {icon:icon,text:text,page:page,argument:argument}
     }
-
     function appendTab(icon,text,page,argument){
         tab_model.append(createTab(icon,text,page,argument))
     }
-
     function setTabList(list){
         tab_model.clear()
         tab_model.append(list)
     }
-
     function count(){
         return tab_nav.count
     }
-
 }